1 
<section class="container">
  <div class="content>
    <article>MainContent</article>
    <aside>SideBar</aside>
  </div>
</section>


.content {
  @include container;
  @include at-breakpoint(0 768px 10) {
    @include container(10, 10);
}
article {
  @include span-columns(9, $total-columns);
}
aside.sidebar {
  @include span-columns(3 omega, $total-columns);
}

这是我的 html 结构和 susy-compass。我正在尝试使用 Susy 网格构建响应式 Web 模板。我想要 12 列 960px 的桌面，10 列 768px 的平板电脑和 4 列 320px 的移动设备，但我就是想不通。我一直在尝试@include at-breakpoint at 768px 10 列，但默认的 12 列仍未更改为 10 列。

有任何想法吗？对于构建这样的模板有什么好的建议吗？

4

1 回答 1

3

任何你想在断点处改变的东西都必须放在里面at-breakpoint。传递给的参数container实际上是 的快捷方式at-breakpoint，因此您不会在其中使用它们。你想要这样的东西：

$total-columns: 4;
$container-width: 320px;

$tablet-width: 768px;
$tablet-columns: 10;
$desktop-width: 960px;
$desktop-columns: 12;

.content {
  @include container;
  @include at-breakpoint($tablet-width $tablet-columns) {
    width: $tablet-width;
  }
  @include at-breakpoint($desktop-width $desktop-columns) {
    width: $desktop-width;
  }
}

article {
  // mobile styles & tablet breakpoint could go here...
  @include at-breakpoint($desktop-width $desktop-columns) {
    @include span-columns(9); // $total-columns is assumed...
  }
}

aside.sidebar {
  // mobile styles & tablet breakpoint could go here...
  @include at-breakpoint($desktop-width $desktop-columns) {
    @include span-columns(3 omega);
  }
}

现在，如果您想查看各种网格，您还必须susy-grid-background在每个断点处包含（沿着容器宽度）。网格背景就像任何其他 Susy mixin - 除非你告诉它，它不知道改变不同的断点。

于 2013-10-10T00:15:18.577 回答