Susy：根据屏幕大小更改列数 [英] Susy: change the number of columns according to screen size

问题描述

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

In the Compass/Sass plugin, Susy, you set the number of columns in the _base.scss file.

对于桌面视图，我喜欢有12列。但是，移动视图的列过多。是否有方法可以更改移动显示的列数？

For a desktop view, I like to have 12 columns. However, this is too many columns for a mobile view. Is there a way to change the number of columns for a mobile display?

（我进行了响应式网页设计，因此桌面版和移动版网站将共享相同的_base文件）。

(I'm make a responsive web design, so both the desktop and the mobile versions of the site will share the same _base file).

谢谢！

推荐答案

> UPDATE： Susy 1.0现在具有使用 at-breakpoint mixin内置的此功能。请参阅官方网站上的文档。

UPDATE: Susy 1.0 now has this feature built in using the at-breakpoint mixin. See the docs on the official site.

是的，你可以！我正在把这个功能烘焙成Susy的核心，但暂时你必须自己做。这里是我的方法（需要最新的指南针和Sass阿尔法）：

Yes you can! I'm in the process of baking this feature into the core of Susy, but for the time being you have to do it yourself. Here's my approach (requires the latest Compass, and 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;
  }
}

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

Repeat as needed for each break point. You can also create simple mixins to help you:

@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：根据屏幕大小更改列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！