css – 如何使用Susy在不同页面上生成不同的布局？

我正在使用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的单独实例,每个实例具有不同的边距.

您的解决方案有效,因为您更改了代码顺序,而不是因为名称间距.在使用@include布局的任何地方,您都要更改后面所有代码的全局变量(直到您再次更改它).还有一些其他选择：

// 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