使用苏西设置列位置

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() mixins 手动完成。

或者您可以使用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);
}