如何在 Neat 中更改跨媒体查询的自动列数

Question

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

.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; }
}

Answer 1

有一个'omega reset' mixin 可以处理这个问题：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);
    }
}

Answer 2

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

.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);
    }
 }