Nest elements has different padding value

Question

I spent a couple hours to figure it out but no luck, so basically I've this configuration

$susy: (
    columns: 12,
    gutters: 54px/53px,
    container: 1230px
);

In my layout file _layout.scss, I've this

@include layout( $susy inside );

.content-area {
    padding-top: gutter( 6 );

    .layout-2c-l & {
        @include span( 8 of 12 no-gutters );
        @include gutters(5); // 62.0625px
    }

    .archive.layout-2c-l &,
    .search.layout-2c-l & {
        padding-left: 0;
        padding-right: 0;
    }
}

In my case, on archive and search page I've to remove the gutters then re-added it via it's child elements like so in _archives.scss file

.page-header {
    @include gutters(5); // 41.375px
}

As you can see the code above beside the gutters I add the pixel value, the first gutters resulting 62.0625px and the the second one 41.375px.

If this is how susy works, is there any way to get the same result?

Miriam Suzanne · Accepted Answer · 2016-01-18T06:49:22.623

Unless you set math: static in your Susy config, Susy will output % values based on the context that you give it. If you tell it that you are in a context of 5 both places, you will get the same % output — but that will translate into different px values if the parent containers are not actually the same width. So gutter(5) should only be used in places where the parent element spans 5 columns.

It's hard to tell from your sparse code sample, but it looks like you are maybe using the gutter context argument differently from how it is intended. When used correctly, you will always get a gutter ~54px (since that's what your settings specify).

Eric, thank you for your clear and helpful explanation. But, I ended up with removing gutters from `.layout-2c-l` and set the gutters in their children elements. — Satrya, Jan 18 '16 at 16:09

Nest elements has different padding value

1 Answers1