Susy: Как расширить область содержимого, чтобы покрыть сетку?

Question

Я только начал играть с Сьюзи. У меня есть 12-ти столбчатая сетка, на которой есть сетка. Теперь я хочу, чтобы заголовок моей страницы охватывал всю сетку, включая сетку. То, что я делаю прямо сейчас, - это вычисление общей ширины, а затем установка отрицательного поля в заголовке. Это выглядит довольно храбрым для меня ... Есть ли более чистый способ сделать это?

$total-columns : 12; 
$column-width : 3.5em; 
$gutter-width : 1.25em; 
$grid-padding : 2em; 

$total-width: ($total-columns * ($column-width + $gutter-width)) + (2 * $grid-padding) - $gutter-width; 

header { 
    height: 150px; 
    width: $total-width; 
    margin-left: -$grid-padding; 
} 

Answer 1

У вас есть два хороших варианта. Один из них - упрощенная версия того, что у вас есть. Поскольку по умолчанию блочные элементы имеют ширину 100%, вы можете просто устранить настройку ширины (и всю эту хакерскую математику).

header { 
    height: 150px; 
    margin: 0 0 - $grid-padding; 
} 

Другой вариант - использовать несколько контейнеров на странице. Это требует изменения разметки, но иногда это упрощение, которое работает хорошо. Если вы перемещаете заголовок за пределы текущего контейнера и объявляете его как собственный контейнер, это будет делать трюк.

(как примечание стороны:. Если вам нужна вся ширина когда-либо, вы можете просто использовать columns-width() функции (для внутренней ширины, без прокладки) или container-outer-width() для полной ширины, включая отступы)

UPDATE:

Я использую эту подмешать, чтобы применить кровь, где мне это нужно:

@mixin bleed($padding: $grid-padding, $sides: left right) { 
    @if $sides == 'all' { 
    margin: - $padding; 
    padding: $padding; 
    } @else { 
    @each $side in $sides { 
     margin-#{$side}: - $padding; 
     padding-#{$side}: $padding; 
    } 
    } 
} 

Некоторые примеры:

#header { @include bleed; } 
#nav { @include bleed($sides: left); } 
#main { @include bleed($sides: right); } 
#footer { @include bleed(space(3)); }