css - susy：根据屏幕大小改变列数

Question

在 Compass/Sass 插件Susy中，您可以设置 _base.scss 文件中的列数。

对于桌面视图，我喜欢有 12 列。但是，对于移动视图来说，这列太多了。有没有办法更改移动显示的列数？

（我正在做一个响应式网页设计，所以网站的桌面版和移动版都将共享同一个 _base 文件）。

谢谢！

Answer 1

更新： Susy 1.0 现在使用 mixin内置了这个功能。请参阅官方网站at-breakpoint上的文档。

是的你可以！我正在将此功能烘焙到 Susy 的核心中，但目前你必须自己做。这是我的方法（需要最新的 Compass 和 Sass alpha）：

// for mobile layouts
$total-cols: 4;

.container {
  @include container;
}

// for desktops
@media all and (min-width: 30em) {
  $total-cols: 12;

  .container {
    @include container;
  }
}

根据需要对每个断点重复。您还可以创建简单的 mixin 来帮助您：

@mixin desktop() {
  @media all and (min-width: 30em) {
    $current-total: $total-cols; // remember current column setting
    $total-cols: 12;             // change column setting for new context

    @content;                    // apply content with new column-count

    $total-cols: $current-total; // return original column setting
  }
}

.container {
  @include container;

  @include desktop {
    @include container;
  }
}