Susy - 更改流体容器上的列数

Question

我在8列布局上有2列宽的 div.article 。

在断点处将布局增加到12列，我希望 div.article 仍然是2列宽。

请注意，由于流体容器，列宽不固定。

问题是，当我的布局（和我的列宽）发生变化时， div.article 会保持原始宽度。它的宽度仍然是2“旧”列宽。

为了解决这个问题，我必须有这样的标记：

.article {
    @include span-columns(2); // original size
    @include at-breakpoint($mobile_portrait) {
        @include span-columns(2); // I must add this so its new width is large as 2 columns of the new layout
    }
}

有没有办法在流体网格上防止这样的重复标记？

Answer 1

不，没有。这不是流体设计的问题。

你正在做的事情被称为Susy词汇中的“魔法网格”。对于不同的屏幕尺寸，网格具有不同的列数。

为了使其工作，CSS应包含小屏幕和大屏幕布局的样式。你在这里做的就是提供它们。请注意，从span-columns内部调用at-breakpoint时，会生成不同的值。

这是适当的方式。您应该对该代码感到满意。

看看Susy的魔术网格演示：http://susy.oddbird.net/demos/magic/#demo-breakpoints