1

Bourbon Neat 允许您将span-column()mixin 与 mixin 一起使用omega()来创建automatic columns类似于基础 5 的块网格。但是，在跨媒体查询共享样式时，这些似乎都失败了。看看下面的例子：

.blocks { 
    @include media($iphone) {
       @include span-column(4);
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega(4n);
    }
}

它使用第 n 个子位置从行中的最后一项中删除边距，但是当媒体查询发生时，如果您正在更改 omega，它不会覆盖其他 CSS。所以第一个媒体查询将按预期工作。然后，当$ipad触发查询时nth-child(3n)，CSS 中的剩余部分会中断$ipad查询。有没有办法解决这个问题？

编译的CSS：

.block-grid > li {
  float: left;
  display: block;
  margin-right: 2.68967%;
  width: 48.65516%;
}
.block-grid > li:last-child { margin-right: 0; }
.block-grid > li:nth-child(2n) { margin-right: 0; }
.block-grid > li:nth-child(2n+1) { clear: left; }

@media screen and (min-width: 1024px) {
  .block-grid > li {
    float: left;
    display: block;
    margin-right: 2.68967%;
    width: 31.54022%;
  }
  .block-grid > li:last-child { margin-right: 0; }
  .block-grid > li:nth-child(3n) { margin-right: 0; }
  .block-grid > li:nth-child(3n+1) { clear: left; }
}
4

2 回答 2

4

有一个“欧米茄重置”混合可以处理这个问题：http: //joshfry.me/notes/omega-reset-for-bourbon-neat/

这样做：

@mixin omega-reset($nth) {  
  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
  &:nth-child(#{$nth}+1) { clear: none }
}

因此，要修复原始问题中的代码，请将 omega-reset mixin 放在适当的位置，然后执行以下操作：

.blocks { 
    @include media($iphone) {
       @include span-column(4);
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega-reset(3n);  //added to reset previous omega value
       @include omega(4n);
    }
}
于 2014-05-12T22:04:27.757 回答
1

你如何使用 Bourbon/Neat 来解决这个问题将取决于@mediamixin 是如何工作的。您所需的输出将需要如下所示：

.block-grid > li {
  float: left;
  display: block;
  margin-right: 2.68967%;
  width: 48.65516%;
}
.block-grid > li:last-child { margin-right: 0; }
@media (max-width: 1024px) {
    .block-grid > li:nth-child(2n) { margin-right: 0; }
    .block-grid > li:nth-child(2n+1) { clear: left; }
}

所以，如果$ipad只是一个像素值，最简单的方法是使用该变量手动写出您的媒体查询：

.block-grid > li {
    @include media($iphone) {
       @include span-column(4);
    }
    @media (max-width: $ipad) {
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega(4n);
    }
 }

如果它是new-breakpoint()函数的结果，那么您只需要使用 max-width 创建另一个媒体查询上下文（我只是通过查看源/示例可以收集到的内容，所以您必须原谅如果这不太正确，请告诉我）：

$smaller-than-ipad: new-breakpoint(max-width 500px 12); // 12 = total columns, optional

.block-grid > li {
    @include media($iphone) {
       @include span-column(4);
    }
    @include media($smaller-than-ipad) {
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega(4n);
    }
 }
于 2014-04-29T23:39:48.563 回答