Susy: change the number of columns according to screen size

Question

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 col

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