Как установить отступы на контейнере?

Question

У меня есть заголовок полной ширины, и я хочу установить для него заполнение с помощью математики Сьюзи, вместо того, чтобы переписывать каждый раз заполнение контейнеров в моем макете.

Например:

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>

Оба они имеют полную ширину, но, конечно, там нет отступов. Дело в том, как я могу вставить один и тот же отступ по умолчанию для всего Susy, как span без необходимости делать это вручную с padding-left а также padding-right на контейнерах?

Answer 1

Сьюзи ничего не делает с заполнением контейнера. У Susy нет способа сделать это, но вы можете создать свой собственный класс mixin или placeholder, чтобы справиться с этим для вас (даже используя по ходу дела susy):

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

@mixin container-padding($size: $container-padding)  {
  padding-left: $size;
  padding-right: $size;
}