Как использовать Susy для создания разных макетов на разных страницах?
-
26-12-2019 - |
Вопрос
В качестве сеточной системы я использую Susy 2.1.3.У меня есть содержащий элемент, который имеет разные поля в разных шаблонах.Я объявил два разных макета и думаю, что вызываю их правильно.Однако макет, который определяется последним, применяется везде.В приведенном ниже коде макет $onepx-gutters применяется даже к .home
страница.
Мой код SCSS очень похож на:
$small-gutters : (
columns: 12,
gutters: 0.137254902,
output: float,
gutter-position: split,
global-box-sizing: border-box,
);
$onepx-gutters : (
columns: 12,
gutters: 1px/80px,
output: float,
gutter-position: before,
global-box-sizing: border-box,
);
.home .item-container {
@include layout($small-gutters);
@include container();
}
.products .item-container {
@include layout($onepx-gutters);
@include container();
}
.item-container .item-width-2 {
@include span(first 8 of 12);
&:nth-child(2n+3) {
clear: both;
}
}
.item-container .item-width-1 {
@include span(4 of 12);
}
Сгенерированный код CSS похож на:
.item-width-2 {
width: 65.66092%;
float: left;
margin-left: 0.50287%;
margin-right: 0.50287%; }
.item-width-2:nth-child(2n+3) {
clear: both;
}
.item-width-1 {
width: 32.32759%;
float: left;
margin-left: 0.50287%;
margin-right: 0.50287%;
}
Как видите, он не генерирует отдельные экземпляры .home .item-width-2
и .products .item-width-2
с разными полями на каждом.
Решение
Ваше решение работает, потому что вы изменили порядок кода, а не из-за расстояния между именами.Везде, где вы используете @include layout
вы меняете глобальную переменную для всего последующего кода (пока не измените ее снова).Есть еще несколько вариантов:
// with-layout
// - only change the settings for nested code
@include with-layout($onepx-gutters) {
@include span(3); // this will use $onepx-gutters
}
@include span(3); // this will not
// local context
// - change your settings for any one mixin!
@include span(3 $onepx-gutters); // this will use $onepx-gutters
@include span(3 $small-gutters); // this will use $small-gutters
Другие советы
Это работает правильно, если я пространство имен элементов вручную объявите макеты по порядку, например так:
@mixin item-width-2() {
@include span(first 8 of 12);
&:nth-child(2n+3) {
clear: both;
}
}
@mixin item-width-1() {
@include span(4 of 12);
}
.products {
.item--holder {
@include layout($onepx-gutters);
@include container();
}
.item {
&.width-2 {
@include item-width-2();
}
&.width-1 {
@include item-width-1();
}
}
}
.home {
.item-holder {
@include layout($small-gutters);
@include container();
}
.item {
&.width-2 {
@include item-width-2();
}
&.width-1 {
@include item-width-1();
}
}
}