我如何使用苏西指南针‘在-断点’？

Question

<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结构和苏西罗盘。我试着用苏西网格构建一个响应性好的网页模板。我想要12列960‘t用于桌面，10列768’t用于平板电脑，4列320‘t用于移动，但我只是不明白。我一直在尝试@将768 12的at -断点包含10列，但默认的12列仍未更改为10列。

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

Answer 1

在断点想要更改的任何内容都必须放在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。网格背景就像任何其他苏西混音-它不知道改变不同的断点，除非你告诉它。