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

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

Например:

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 в контейнерах?


css sass susy-compass susy-sass susy
person Mireba    schedule 05.10.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

@mixin container-padding($size: $container-padding)  {
  padding-left: $size;
  padding-right: $size;
}
person Miriam Suzanne    schedule 06.10.2015
comment
Спасибо, это намного лучше, чем делать вручную. Спасибо, и спасибо за этот удивительный набор инструментов. - person Mireba; 06.10.2015