susy-sass - 与 Susy 的标记顺序不同的布局顺序

Question

是否可以使用 Susy 创建一个布局，其顺序与标记中的顺序不同？

我的标记类似于：

<div id="container">
  <div id="content"></div>
  <div id="sidebar1"></div>
  <div id="sidebar2"></div>
</div>

这种标记最适合以线性方式（内容、侧边栏、侧边栏）呈现的移动设备。

但是桌面，我想展示东西侧边栏，内容，侧边栏。

我的 $susy 地图是：

$susy: (
  container: 1200px,
  columns: 12,
  global-box-sizing: border-box
);

我试过了

#content{
  @include span(7 at 4 of 12);
}
#sidebar1{
  @include span(3 first);
}
#sidebar2{
  @include span(2 last);
}

和

#content{
  @include span(7 at 4 of 12);
}
#sidebar1{
  @include span(3 at 1 of 12);
}
#sidebar2{
  @include span(2 at 10 of 12);
}

score 1 · Accepted Answer

除非您使用浮动隔离（使用isolate关键字），否则传入位置（first、last、at 10等）只会影响排水沟和最后流。有了隔离，你就能得到你想要的。尝试这个：

#content{
  @include span(7 at 4 of 12 isolate);
}
#sidebar1{
  @include span(3 first isolate);
}
#sidebar2{
  @include span(2 last isolate);
}

1 回答 1