1

I have a header full width and I want to set padding on it using the Susy math, instead of being rewriting every time the padding of the containers in my layout.

For example:

CSS:

@import "susy";
@import "compass/reset";

$susy: (
    columns: 12,
    gutter-position: inside,
    global-box-sizing: border-box
);

#header {
  height: 80px;
  background: red;
}

#footer {
  height: 80px;
  background: blue;
}

Html:

<header id="header"></header>
<footer id="footer"></footer>

Both of them are full width, but there's no padding, of course. The thing is: How can I insert the same padding of the entire Susy default, like the span without the need of doing this manually with padding-left and padding-right on containers?

Mireba
  • 35
  • 5

1 Answers1

0

Susy doesn't do anything with container padding. There is no Susy way to do it, but you can create your own mixin or placeholder class to handle it for you (even using susy along the way):

$container-padding: gutter(); // any size you want

@mixin container-padding($size: $container-padding)  {
  padding-left: $size;
  padding-right: $size;
}
Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Thank you, that is way better than doing manually. Thank you, and thank you for this amazing toolkit. – Mireba Oct 06 '15 at 14:11