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结构和susy-compass。我正在尝试使用Susy网格构建响应式Web模板。我想要用于桌面的12列960px，用于平板电脑的10列768px以及用于移动设备的4列320px，但我无法理解它。我一直试图在768px处使用10列来@include at-breakpoint，但是默认的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。网格背景就像任何其他Susy mixin一样 - 除非你告诉它，它不知道要改变不同的断点。

我如何使用Susy-compass'at-breakpoint'？

1 个答案: