如何在媒体查询中使用不同的网格装订线宽度？

Question

我希望使用Bootstrap SASS变量$grid-gutter-width来获得不同的网格装订线宽度，但在媒体查询中为其分配不同的值不起作用。我知道这是不可能的，但是使用mixins或循环的任何帮助都是值得赞赏的。

什么不起作用的例子，但指出了我想要实现的目标：

$grid-gutter-width: 30px !default;

@media ($screen-sm-min) {
    $grid-gutter-width: 50px;
}
@media ($screen-md-min) {
    $grid-gutter-width: 70px;
}

有谁知道如何以聪明的方式实现这一目标？

Answer 1

在将Sass处理成CSS之前，您无权访问媒体查询，并且变量仅在处理之前相关。

您需要找到使用$ grid-gutter-width的位置（可能在the make-grid-columns mixin in the grid-framework file中），并为不同的屏幕宽度生成不同的装订线宽度。

您可能需要添加一个嵌套循环，以便为每个屏幕宽度覆盖每个列规范（xs，sm，md等）。