在Bourbon Neat设置固定排水沟

Question

默认情况下，Neat使用百分比作为每个span-columns元素的边距，但我希望有一个固定的30px装订线，无论outer-container宽度如何。

Answer 1

一种解决方案是创建自己的mixin来覆盖Neat gutter。

@mixin col-with-gutter( $cols, $gutter ){
    @include span-columns($cols);
    margin-right: $gutter;
}

.half{
    @include col-with-gutter(2, 30px);
}

如果您需要使用其他一些span-columns功能，显然您必须进行一些额外的自定义。我建议你看看_span-columns.scss source，找出最适合你的方法。

老实说，我认为这个功能没有内置的原因。在大多数情况下，将装订线设置为30px对于响应式设计是不利的（因为总的宽度是列可能不会达到100％）。

您可能有正当理由想要30px，但如果您不确定您需要一个确切的值，则可能值得重新考虑。