使用Susy定制网格系统

Question

我想创建一个类似于简单网格系统的引导程序。

我的嫌疑设置：

$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>

问题是嵌套div中的填充。 #left和#right div上的填充很好，但#right > .col-6内的div（#right）较小，因为susy使用百分比作为填充。

有没有办法以这种方式使用susy？

Answer 1

Susy有一个名为“嵌套”的混音。 Susy documentation

我相信这是您正在寻找的维持原始排水沟和柱尺寸的方法。