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

Question

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.

@jonsuh I've added the generated CSS code. I think you'll agree that the specificity of the CSS is the issue here. — Jodi Warren, Jul 31 '14 at 21:42
Specificity shouldn't be an issue in this case if one page has let's say `
` and another `
`. Which is why I'm curious about the HTML that's being produced, particularly the area where the `home` or `products` classes are being set. — jonsuh, Jul 31 '14 at 21:47
Maybe I should explain the problem more: the CSS as generated isn't prefixed with .home or .products. Ideally we'd have .home .item-width-2 and .products .item-width-2, each with different margins. I was avoiding trying to lead the question too much, but maybe that's not the most productive way to ask. — Jodi Warren, Jul 31 '14 at 22:26

score 7 · Accepted Answer · answered Aug 01 '14 at 07:01

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

Jodi Warren · Answer 2 · 2014-08-01T10:12:59.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();
        }
    }
}

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

2 Answers2