Example of using with-grid-settings with breakpoints

Question

I'm trying to figure out how to use a different grid setting based on a breakpoint but can't get it to work. Here's my code. I'm using the respond-to mixin for media queries.

$breakpoints: 'screenSmall' 480px 768px,
              'screenMedium' 768px 1279px,
              'screenXlarge' 1441px;                                                   

$total-columns: 4;
$column-width: 5em;
$gutter-width: 1em;
$grid-padding: $gutter-width;

[role="main"] {
  @include container($total-columns);
  background: #aaa;
  @include susy-grid-background;
}

@include respond-to('screenSmall')
  @include with-grid-settings(8,4em,1.5em,1em) {
    [role="main"] { @include container; }
  };
}

@include respond-to('screenMedium')
  @include with-grid-settings(12,4em,1.5em,1em) {
    [role="main"] { @include container; }
  };
}

Answer 1

What exactly isn't working about it? Is there no change at all for the different breakpoints, or simply no change to the background grid image? I'm guessing the latter. If you want the background to respond to new settings, you will need to re-declare the background with those settings:

@include respond-to('screenSmall')
  @include with-grid-settings(8,4em,1.5em,1em) {
    [role="main"] { 
      @include container; 
      @include susy-grid-background;
    }
  };
}

@include respond-to('screenMedium')
  @include with-grid-settings(12,4em,1.5em,1em) {
    [role="main"] { 
      @include container; 
      @include susy-grid-background;
    }
  };
}

Of course, I think you could do it more easily with at-breakpoint rather than respond-to. But that's a different question. :)