Set suzy gutters for a certain file / grouped set of classes?

Question

I know that you can set gutters for a suzy grid globally:

$susy: (
   columns: 12,
   gutters: 0.32,
}

And you can also override this for a particular class:

.something {
  @include span(1 of 3);
  @include gutters(1em);
}

But can you override gutters for certain file?

If the code below was a simplified version of my code what would be the shortest way of making row1s have a different gutter to row2s?

<div class="container1">
    <div class="row1">
        // Something
    </div>
    <div class="row1">
        // Something
    </div>
    <div class="row1">
        <div class="container1">
            <div class="row1">
                // Something
            </div>
            <div class="row1">
                // Something
            </div>
            <div class="row1">
                // Something
            </div>
        </div>
    </div>
</div>

<div class="container2">
    <div class="row2">
        // Something
    </div>
    <div class="row2">
        // Something
    </div>
    <div class="row2">
        <div class="container2">
            <div class="row2">
                // Something
            </div>
            <div class="row2">
                // Something
            </div>
            <div class="row2">
                // Something
            </div>
        </div>
    </div>
</div>

score 1 · Accepted Answer · answered Apr 29 '16 at 06:37

You can use the with-layout function to set up a special grid for any group of content:

$susy: (gutters: 0.3);
// everything out here will use 0.3 gutters...

@include with-layout((gutters: 0.5)) {
  // everything in here will use 0.5 gutters...  
  .row2 {
    @include span(3);
  }
}

// everything out here will use 0.3 gutters again...

The mixin accepts any standard Susy grid map (used above) or grid shorthand as an argument. You can get more detail from the docs.

Set suzy gutters for a certain file / grouped set of classes?

1 Answers1