Susy: change the number of columns according to screen size

问题

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

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?

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

Thanks!

回答1:

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

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

来源：https://stackoverflow.com/questions/9782914/susy-change-the-number-of-columns-according-to-screen-size

标签

css

Sass

susy-compass