Susy：根据屏幕尺寸改变列数

在 Compass/Sass 插件中，Susy http://susy.oddbird.net/，您可以在 _base.scss 文件中设置列数。

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

（我正在制作响应式网页设计，因此该网站的桌面版和移动版将共享相同的 _base 文件）。

Thanks!

UPDATE: Susy 1.0 现在使用以下内置功能at-breakpoint混合。请参阅文档官方网站 http://susy.oddbird.net/.

是的你可以！我正在将这个功能融入 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;
  }
}