使用 Susy 设置列位置

Question

如何设置列在 Susy 中的显示位置？

我认为这会起作用：

#idLeftColumn{
@include span(1 at 1 first);
}

#idMiddleColumn{
@include span(1 at 2);
}

#idRightColumn{
@include span(1 at 3 last);
}  

html 代码的顺序是中间列、左列和右列。

网站首先显示中间列。这是源代码中的顺序。

这里是完整代码：http://sassmeister.com/gist/60d85878921ca500c681

Answer 1

Susy 默认使用标准浮动布局。因为浮动在流程中堆叠，您不能以任何“绝对”方式定位它们——您必须将它们从一个位置push 或pull 定位到另一个位置。 Susy 无法知道它们在流程中的默认位置，但您可以使用 push() 和 pull() 混合器手动完成。

或者您可以使用isolation 输出选项，它使用负边距将所有内容拉到左侧，然后允许您按照上面尝试的方式定位它们。

您可以内联执行此操作：

#idLeftColumn{
  @include span(1 at 1 isolate); // "at 1 first" is redundant
}

#idMiddleColumn{
  @include span(1 at 2 isolate);
}

或者您可以全局执行：

@include layout(isolate);

#idLeftColumn{
  @include span(1 at 1); // "at 1 first" is redundant
}

#idMiddleColumn{
  @include span(1 at 2);
}