susy-compass - 使用 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()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);
}