使用 Susy 自定义网格系统

Question

我想用 susy 创建一个类似 bootstrap 的简单网格系统。

我的 susy 设置：

$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 上的 padding 很好，但 #right 内部的 div (#right > .col-6) 更小，因为 susy 使用百分比作为填充。

有没有办法这样使用susy？

Answer 1

Susy 有一个名为“nested”的 mixin。 Susy documentation

我相信这就是您要保持原始装订线和列大小的方法。