避免 span-column 为 :last-child 设置右边距

Question

给定 HTML :

<div class="parent">
    <div class="element"></div>
    <div class="other"></div>
</div>

还有这个 Sass :

.parent {
  .element {
        @include span-columns(2.5 of 8);
  }
}

它生成 CSS :

.parent .element {
  float: left;
  display: block;
  margin-right: 3.22581%;
  width: 29.03226%;
}

.parent .element:last-child {
  margin-right: 0;
}

带有 :last-child 的部分困扰着我，因为它覆盖了我想保留的带有 right-margin 的第一条规则。如何防止 Neat 添加 :last-child 规则？或者我应该采取什么解决方法来设置我想要的右边距？

Answer 1

我觉得你在这里没问题。 Neat 的 span-columns() mixin 的工作原理是将一个元素建立为一列，其中包含您在上面复制的 classes，包括列之间的装订线的右边距。然后它使用 :last-child 伪 class 删除最后一列的装订线边距，这样你就没有不必要的 space 了。

考虑到这一点，您示例中的 .element div 不是 :last-child，因此特定 div 的右边距将保持不变。我将其放入 JSBin 中以向您展示：http://jsbin.com/wawopef/edit?html,css,output。我也制作了 .other 专栏，因为很明显您打算将它作为一个专栏。 .elementdiv还有余量，那么

如果你真的想覆盖规则，你可以通过重写 mixin 来实现，但是 A) 这可能不是你想要做的，B) 这是使用别人的网格框架的一部分。如果我们按照他们的文档进行操作，它应该可以正常工作。或者框架不好，幸好Bourbon和Neat没有！

避免 span-column 为 :last-child 设置右边距

Avoid span-column to set right-margin for :last-child

sass

neat

bourbon