css - SASS grid system WITHOUT edge gutters

Question

I'm looking for a sass grid system that does not have edge gutters, a.k.a. there is no left gutter applied to the first column, and no right gutter applied to the last column.

Normally you could simply use :first-child / :last-child to remove the gutters, but then the first/last columns would be slightly wider than the rest (I'm using padding as gutters).

Is there a grid system that supports this? Or would I be better off writing it on my own?

Edit: I decided to go ahead and try writing my own solution :) Answer below.

Answer 1

这是我想出的一个简单的解决方案，希望这可以帮助其他有类似要求的人：

@mixin grid($total, $gutter) {
    float: left;
    width: percentage(1 / $total);

    @for $i from 1 through $total {
        &:nth-of-type(#{$i}) {
            padding-left: ($i - 1) / $total * $gutter + 0px;
            padding-right: ($total - $i) / $total * $gutter + 0px;
        }
    }

    &:first-of-type { padding-left: 0; }
    &:last-of-type { padding-right: 0; }
}

然后使用它只需调用：

@include grid(4, 30px); // Creates a 4 column grid with 30px inner gutters

请注意，这是一个非常简单的解决方案，仅适用于每列宽度相同的情况。