如何在容器上设置填充？

Question

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?

Answer 1

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