Question

我正在寻找一个不有边缘排水沟的sass网格系统，例如，没有左侧排水沟应用于第一列，并且没有右侧排水沟应用于最后一列。

通常你可以简单地使用：first-child /：last-child来移除排水沟，但是第一列/最后一列会比其余的稍宽一些（我使用填充作为排水沟）。

是否有支持此功能的网格系统？或者我最好自己写一下？

编辑：我决定继续尝试编写自己的解决方案:)以下答案。

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

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

SASS网格系统没有边缘排水沟

1 个答案: