在Bourbon Neat设置固定排水沟

Question

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

Answer 1

一种解决方案是创建您自己的 mixin 来覆盖 Neat 装订线。

@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 源代码，找出最适合您的方法。

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

您可能有合理的理由想要精确的值30px，但如果您不确定是否需要精确的值，则可能值得重新考虑。