Come posso usare Susy per produrre diversi layout su pagine diverse?

Question

Sto usando Susy 2.1.3 come sistema di griglia.Ho un elemento contenente che ha una grondaia diversa su diversi modelli.Ho dichiarato due layout diversi e penso che lo sto invocando correttamente.Tuttavia, il layout che è definito per ultimo è quello che si applica ovunque.Nel codice qui sotto, il layout di $ Onypx-Gutters viene applicato anche sulla pagina .home.

Il mio codice SCSS è molto simile a:

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

.

Il codice CSS generato è simile a:

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

.

Come puoi vedere, non genera istanze separate di .home .item-width-2 e .products .item-width-2 con margini diversi su ciascuno.

Answer 1

La tua soluzione funziona perché hai cambiato l'ordine del codice, non a causa della spaziatura del nome.Ovunque si utilizza @include layout che stai cambiando la variabile globale per tutto il codice che segue (finché non lo modifichi di nuovo).Ci sono alcune altre opzioni:

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

Funziona correttamente se I SPESPRONSE NAME Gli elementi manualmente dichiarano i layout in ordine, come:

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

.