Question

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

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

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

谢谢！

Answer 1

更新： Susy 1.0现在使用at-breakpoint mixin内置了此功能。请参阅the official site上的文档。

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

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

@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;
  }
}

Susy：根据屏幕大小更改列数

1 个答案: