我正在使用Susy 2.1.3作为网格系统。我有一个包含元素,不同的模板具有不同的沟槽。我已经声明了两个不同的布局,并认为我正在正确地调用它们。然而,最后定义的布局适用于所有地方。在下面的代码中,即使在.home
页面上也应用了$onepx-gutters布局。
我的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
,并在每个实例上使用不同的外边距。
<div class="home"><div class="item-container">
,另一个页面有<div class="products"><div class="item-container">
,那么特定性在这种情况下不应该是一个问题。这就是为什么我对生成的 HTML 感到好奇,特别是设置home
或products
类的区域。 - jonsuh