Custom grid system with Susy

Question

I would like to create a bootstrap like, simple grid system with susy.

My susy settings:

$susy: (
    columns: 12,
    gutters: 1/4,
    gutter-position: inside,
    global-box-sizing: border-box,
);

SASS:

[class^="col-"].last {
    @include last();
}

[class^="col-"].nest {
    padding:0;
}

@for $i from 1 through 12 {
    .col-#{$i} {
        @include span($i of 12);
    }
}

HTML

<div id="left" class="col-6">left</div>
<div id="right" class="col-6 last nest">
    <div class="col-6">right 1</div>
    <div class="col-6 last">right 2</div>
</div>

The problem is the padding, inside the nested div. The padding on the #left and #right div is good, but the divs ( #right > .col-6 ) inside #right are smaller, because susy use percentage as padding.

Is there a way to use susy this way?

Answer 1

Susy has a mixin called "nested". Susy documentation

I believe this is what you are looking for to maintain the original gutters and column sizes.