Search code examples
responsive-designsassgrid-layoutsusy

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.