使用 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 默认使用标准浮动布局。因为浮动在流中堆叠，所以您不能以任何 "absolute" 方式放置它们 - 您必须 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);
}

使用 Susy 设置列位置

set column position with Susy

susy-compass

susy-sass

susy