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

Question

Bourbon Neat允许您使用span-column()混合元素和omega()混合元素来创建类似于基础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重置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/Neart来实现这一点将取决于@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()函数的结果，那么你只需要使用最大宽度创建另一个媒体查询上下文(我只是根据我从源代码/示例中收集到的信息，所以如果这不太正确，你必须原谅我(：

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