Switching Gutter Widths At Different Breakpoints Using Susy Next

Throughout my stylesheets I have calls to span, using Susy's mixins to control the widths of the numerous modules used across a site.

I now have a requirement to change the grid gutter width at a given breakpoint. Whereas with a traditional grid system like the one one used by Foundation, all I would need would be a media query like this (assuming I has used classes on the elements):

@include breakpoint($medium-up) {
   .column, .columns
   {
      padding: 6rem;
   }
}

I can't see how to do the same thing using Susy. All my grid styling is now provided through mixins, so I no longer have clear hooks to target the spans.

How can I switch gutter widths at a breakpoint without resorting to adding individual breakpoints for each place I've used span?

From Susy's documentation it seems the answer is to add something like:

.example {
    @include span(6);

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

But repeating this across all my modules seems like a lot of duplication.

Of course, this problem isn't limited to Susy. The same issues arise using Compas's Vertical Rhythm. As soon as the rhythm needs to change at a breakpoint, the only option is to explicitly declare the change in a breakpoint at each and every point vertical rhythm's functionality is used.

In both cases - horizontal layout and vertical rhythm, it seems that a layer of abstraction is needed to allow for centralised changes to propagate across modules and avoid proliferation of duplicated media queries.

To be clear, I'm in no way criticising either toolkit. Just looking for the best way to use them.

Susy was never intended to dictate how you work, so if you don't like Susy's approach to gutters, set the gutters setting to null, and handle them exactly like you would in Foundation. Susy can't build that in, because we are strict about staying out of your markup — but you could easily build foundation-style grids using Susy to handle the math. If that's what you like, go for it!

.column, .columns {
  padding: 3rem;

  @include breakpoint($medium-up) {
    padding: 6rem;
  }
}

That just means you'll have to use the column class all over your markup. It's a trade-off.

You can also simplify the way you are handling it with Susy. If gutters are the only thing you need to change, you can cut down more on your output:

.example {
  @include span(6);

  @include susy-breakpoint($medium-up, $medium-up-layout) {
    @include gutters();
  }
}

And if you want to cut down on your input, you can wrap it in a mixin:

@mixin gutter-change() {
  @include susy-breakpoint($medium-up, $medium-up-layout) {
    @include gutters();
  }
}

.example {
  @include span(6);
  @include gutter-change;
}

From the research I've seen, repeated media-queries in the output don't add relevant load-time to CSS, as long as you are delivering gzipped assets.