Define global grid context in Susy 2

Question

In susy one it were pretty easy to define scopes where a element changed width depending on a global variable. I'm trying to learn Susy 2 but can not really get the point how it works with breakpoint integration.

I have made some psudocode here to point out what i want to archive

Susy SASS maps

$small: (
    columns: 4,
);

$medium: (
    columns: 18,
);

$large: (
    columns: 24,
);

A html element

.foo {

    span 2

    at medium
        span 6

    at large
        span 12

}

RESULT I WANT for .foo

• in small = 50% (minus some gutter)
• in medium = 33,3333% (minus some gutter)
• in large = 50% (minus some gutter)

How do you archive this? I've looked at several tutorials but they do not speak about this. This question talks about something similar. Is it possibly so that we have to constantly tell Susy which layout to use? We could of course say x **of** something but i found it quite handy to just define the grids globally and skip the of all the time.

Answer 1

You can do this in Susy 2 almost exactly the way you did in Susy 1. The syntax is a bit more explicit, but the ideas are the same. Assuming you were using at-breakpoint in Susy 1, you'll use susy-breakpoint in Susy 2 [see the docs]:

$small: 4;
$medium: 18;
$large: 24;

// Susy 1    

$columns: $small;

.foo {
  @include span-columns(2);

  @include at-breakpoint($medium) {
    @include span-columns(6);
  }

  @include at-breakpoint($large) {
    @include span-columns(12);
  }
}

// Susy 2

@include layout($small);

.foo {
  @include span(2);

  @include susy-breakpoint(container($medium), $medium) {
    @include span(6);
  }

  @include susy-breakpoint(container($large), $large) {
    @include span(12);
  }
}

You can replace the container() arguments with your own breakpoints, as you like. I used the container function because that will mimic the way Susy 1 set breakpoints by default. It's a little less magic, a bit more explicit, and a lot more powerful. You now have the full power of Breakpoint available for defining your media-queries.