与 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);
}

Answer 1

除非您使用浮动隔离（使用 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);
}

Layout order which differs from markup order with Susy