Wie erstelle ich mit Susy unterschiedliche Layouts auf verschiedenen Seiten?

Question

Ich verwende Susy 2.1.3 als Grid-System.Ich habe ein enthaltendes Element, das in verschiedenen Vorlagen einen unterschiedlichen Bundsteg hat.Ich habe zwei verschiedene Layouts deklariert und denke, dass ich sie richtig aufrufe.Es gilt jedoch überall das zuletzt definierte Layout.Im folgenden Code wird das $onepx-gutters-Layout auch auf das angewendet .home Seite.

Mein SCSS-Code sieht sehr ähnlich aus:

$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);
}

Der generierte CSS-Code ähnelt:

.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%;
}

Wie Sie sehen, werden keine separaten Instanzen von generiert .home .item-width-2 Und .products .item-width-2 mit jeweils unterschiedlichen Rändern.

Answer 1

Ihre Lösung funktioniert, weil Sie die Codereihenfolge geändert haben, nicht aufgrund des Namensabstands.Überall dort, wo Sie es verwenden @include layout Sie ändern die globale Variable für den gesamten folgenden Code (bis Sie sie erneut ändern).Es gibt noch ein paar andere Möglichkeiten:

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

Answer 2

Es funktioniert einwandfrei, wenn ich Namespace der Elemente manuell Deklarieren Sie die Layouts der Reihe nach, etwa so:

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