Comment utiliser Susy pour produire différentes mises en page sur différentes pages ?

Question

J'utilise Susy 2.1.3 comme système de grille.J'ai un élément contenant qui a une gouttière différente sur différents modèles.J'ai déclaré deux mises en page différentes et je pense les invoquer correctement.Toutefois, la disposition définie en dernier lieu est celle qui s'applique partout.Dans le code ci-dessous, la disposition $onepx-gutters est appliquée même sur le .home page.

Mon code SCSS ressemble beaucoup à :

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

Le code CSS généré est similaire à :

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

Comme vous pouvez le constater, cela ne génère pas d'instances distinctes de .home .item-width-2 et .products .item-width-2 avec des marges différentes sur chacun.

Answer 1

Votre solution fonctionne parce que vous avez modifié l'ordre du code, et non à cause de l'espacement des noms.Partout où vous utilisez @include layout vous modifiez la variable globale pour tout le code qui suit (jusqu'à ce que vous la modifiiez à nouveau).Il existe quelques autres options :

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

Cela fonctionne correctement si je espacer les éléments manuellement déclarez les mises en page dans l'ordre, comme ceci :

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