3

Susy 2.1.3 をグリッド システムとして使用しています。異なるテンプレートに異なるガターを持つ包含要素があります。2 つの異なるレイアウトを宣言しましたが、正しく呼び出していると思います。ただし、最後に定義されたレイアウトは、どこにでも適用されるものです。以下のコードでは、ページにも $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

4

2 に答える 2

0

私がすればそれは正しく動作します要素を手動で名前空間化する次のように、順番にレイアウトを宣言します。

@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();
        }
    }
}
于 2014-07-31T23:26:13.343 に答える