Compass Susy: "With-Grid-Settings()" - Can't get gutter-width working

Question

I'm running into an issue with Susy with Compass.

I am trying to create a grid at desktop size, then change the grid settings at mobile size.

I try using the with-grid-settings mixin, but I can only change the columns and grid-padding, the gutter-width and column-width won't change.

Code is as follows:

        $total-columns  : 16;        
        $column-width   : 6em;           
        $gutter-width   : 6em;            
        $grid-padding   : 3em;  

    @media (#{$tablet-min}) and (#{$tablet-max}) {
            .l_content {
            @include container;
            }
    };

    @media (#{$desktop-min}) and (#{$desktop-max}) {
        @include with-grid-settings(8,6em,10em,10em) {
            .l_content {
            @include container;
            }
        };
    };

.content-item {
    @include span-columns(8, 16);

    &.omega{
       @include span-columns(8 omega, 16);
    }
}

DOM ELEMENTS:

<div class="l_content">
   <div class="content-item">
   <div class="content-item omega">
</div>

I know I can use the at-breakpoint() mixin, but avoiding it for now.

I've tried many variations of this code, but with no luck. One of the strange things I see when turning on @susy-grid-background, is that the grid changes, but the elements in the grid do not move.

Eric Meyer if you are out there, I'd be super grateful for your help!! I've read all of your responses without any success.

EDIT #1 These are the two mixins that wrote. The first to handle the columns and outer padding. The second to handle the margins and column size. Outer-grid-settings gets applied to the container element, inner-grid-settings gets applied to the column-span elements. Hopefully I full understand this and this is helpful.

@mixin outter-grid-settings(
  $columns,
  $outter-padding
){
  @include with-grid-settings($columns, 1, 1, $outter-padding){
    @content;
  };
}

@mixin inner-grid-settings(
  $column-width,
  $column-margin
){
  @include with-grid-settings(1, $column-width, $column-margin, 1){
    @content;
  };
}

Answer 1

Sass is not aware of the DOM, which means that Susy elements are not aware of their container, unless you make that connection explicit. To do that, you have change the span output as well as the container output at each breakpoint. Your span-columns(8, 16) is only giving you the output based on your global settings. You need to add a new span inside a media-query/with-grid-settings combo.

.content-item {
    @include span-columns(8, 16);

    &.omega{
       @include span-columns(8 omega, 16);
    }

    @media (#{$desktop-min}) and (#{$desktop-max}) {
        @include with-grid-settings(8,6em,10em,10em) {
            @include span-columns(8, 16);
        };
    };
}

That may look repetitive, but it isn't - because the meaning of span-columns(8, 16) changes any time you change the settings. you could DRY various parts of this, by wrapping things in mixins, but that's up to you. That's all we do for at-breakpoint, and you could do it your own way.