CODEWITHSUNDEEP
csssasssusy-compasssusy-sass
Jodi Warren
Jodi Warren

Reputation: 410

How do I use Susy to produce different layouts on different pages?

I'm using Susy 2.1.3 as a grid system. I have a containing element which has a different gutter on different templates. I've declared two different layouts and think I'm invoking them correctly. However, the layout which is defined last is the one which applies everywhere. In the below code, the $onepx-gutters layout is applied even on the .home page.

My SCSS code is very much like:

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

The generated CSS code is similar to:

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

As you can see, it doesn't generate separate instances of .home .item-width-2 and .products .item-width-2 with different margins on each.

Upvotes: 3

Views: 2627

Answers (2)

Jodi Warren
Jodi Warren

Reputation: 410

It works properly if I namespace the elements manually declare the layouts in order, like 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();
        }
    }
}

Upvotes: 0

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

Your solution works because you changed the code order, not because of name-spacing. Anywhere you are using @include layout you are changing the global variable for all the code that follows (until you change it again). There are a few other 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

Upvotes: 7

Related Questions