Пользовательская система сетки с Susy

Я хотел бы создать простую систему сетки, подобную начальной загрузке, с 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. Отступы в div #left и #right хороши, но div (#right > .col-6) внутри #right меньше, потому что Susy использует проценты в качестве заполнения.

Есть ли способ использовать susy таким образом?


css sass susy-compass susy-sass
person user1452062    schedule 24.02.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У Susy есть миксин под названием «вложенный». документация Susy

Я считаю, что это то, что вы ищете, чтобы сохранить исходные желоба и размеры столбцов.

person FabianMeul    schedule 24.02.2015
comment
Я хотел бы использовать «систему сетки» без изменений в будущем. Я хотел бы повторно использовать код для модулей, для которых требуются столбцы (галереи, новостные блоки, портфолио и т. д.). Вложенный миксин удаляет отступы, и я уже сделал это в своем коде. Моя проблема заключается в разнице в заполнении вложенных столбцов. - person user1452062; 24.02.2015
comment
Миксин nested не удаляет отступы — это делает ключевое слово nest. Миксин nested фактически меняет контекст для вложенных блоков, что вам и нужно. Но будьте осторожны, вложенные классы становятся экспоненциально сложными. См.: sassmeister.com/gist/ericam/0be8e9a3806ad3757bdf - person Miriam Suzanne; 25.02.2015