css - 使用 Susy 自定义网格系统

Question

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

我的苏西设置：

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

萨斯：

[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和div上的 padding#right不错，但里面的 div ( #right > .col-6)#right更小，因为 susy 使用百分比作为 padding。

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

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.