2015-10-05 8 views
1

У меня есть полная ширина заголовка, и я хочу установить прописку на ней, используя математику 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 на контейнерах?

ответ

0

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

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

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

Спасибо, что это лучше, чем делать вручную. Спасибо, и спасибо за этот замечательный инструментарий. – Mireba