0

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?

user1452062
  • 805
  • 4
  • 12
  • 27

1 Answers1

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.

FabianMeul
  • 239
  • 2
  • 9
  • I would like to use the 'grid system' without modification in the future. I would like to re-use the code for modules what requires columns.(galleries, news blocks, portfolio, etc) The nested mixin removes the padding, and I already did it in my code. My problem is the padding difference in the nested columns. – user1452062 Feb 24 '15 at 17:54
  • The `nested` mixin does not remove any padding — the `nest` keyword does.The `nested` mixin actually changes the context for nested blocks, which is what you need. But watch out, nested classes get exponentially complex. See: http://sassmeister.com/gist/ericam/0be8e9a3806ad3757bdf – Miriam Suzanne Feb 24 '15 at 21:01