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

【问题标题】：How do I use Susy to produce different layouts on different pages?如何使用 Susy 在不同的页面上生成不同的布局？
【发布时间】：2014-07-31 21:17:38
【问题描述】：

我使用 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 的单独实例。

【问题讨论】：

您随附的 HTML 会有所帮助
@jonsuh 我已经添加了生成的 CSS 代码。我想你会同意 CSS 的特殊性是这里的问题。
如果一个页面有<div class="home"><div class="item-container">和另一个<div class="products"><div class="item-container">，那么在这种情况下，特异性不应该成为问题。这就是为什么我对正在生成的 HTML 感到好奇，尤其是在设置 home 或 products 类的区域。
也许我应该更多地解释这个问题：生成的 CSS 没有以 .home 或 .products 为前缀。理想情况下，我们有 .home .item-width-2 和 .products .item-width-2，每个都有不同的边距。我避免试图过多地引导问题，但也许这不是最有效的提问方式。

标签： css sass susy-compass susy-sass

【解决方案1】：

您的解决方案之所以有效，是因为您更改了代码顺序，而不是因为名称间距。在您使用@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

【讨论】：

【解决方案2】：

如果我~~为元素手动命名空间~~按顺序声明布局，它可以正常工作，如下所示：

@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();
        }
    }
}

【讨论】：