在 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，但如果您不确定是否需要确切值，则可能值得重新考虑。

在 Bourbon Neat 中设置固定的装订线

Set fixed gutter in Bourbon Neat

sass

neat

bourbon