Сетка SASS БЕЗ кромочных желобов

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

Обратите внимание, что это чрезвычайно простое решение, которое будет обрабатывать только ситуации, когда каждый столбец имеет одинаковую ширину.