[SOLVED] Use different Susy config at different breakpoints

Use different Susy config at different breakpoints

I'm trying to use two different Susy grid global configs for two breakpoints in my layout design: tablet and desktop.

This is my _variables.scss code:

// Susy Sass Grid System Config
$susy: (
  columns: 12,
  column-width: 45px,
  global-box-sizing: border-box,
  gutters: 18px / 45px,
  gutter-position: inside,
  math: static,
  output: float,
);

$susy-desktop: (
  columns: 12,
  column-width: 67px,
  global-box-sizing: border-box,
  gutters: 30px / 67px,
  gutter-position: inside,
  math: static,
  output: float,
);

@include susy-breakpoint(1200px, $susy-desktop, false);

How can I achieve to get the $susy-desktop config when hit a width of 1200px. The mixin appears not to work. The normal config $susy is working properly.

If needs any more information please tell me and thanks a ton for your time! ;)

Solution

The susy-breakpoint mixin is a wrapper that expects contents. It will add a media-query, and change settings for everything passed into it:

@include susy-breakpoint(1200px, $susy-desktop, false) {
  /* This code will use the $susy-desktop settings at 1200px */
  @include span(3);
}

Using susy-breakpoint without passing in content will have no effect.