Question

Bourbon Neat允许您使用span-column() mixin和omega() mixin创建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; }
}

Answer 1

有一个＆＃39; omega重置＆＃39; 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);
    }
 }

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

2 个答案: