Susy: come estendere la casella del contenuto per coprire anche il riempimento della griglia?

Question

Ho appena iniziato a suonare con Susy. Ho una griglia di 12 colonne che ha una griglia su di essa. Ora voglio che l'intestazione della mia pagina si estenda all'intera griglia includendo il riempimento della griglia. Quello che sto facendo ora è calcolare la larghezza complessiva e quindi impostare un margine negativo sull'intestazione. Questo mi sembra piuttosto intrusivo ... C'è un modo più pulito per farlo?

$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

Hai due buone opzioni. Uno è una versione semplificata di ciò che hai. Poiché gli elementi di blocco hanno una larghezza del 100% di default, puoi semplicemente eliminare l'impostazione della larghezza (e tutta la matematica hacky).

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

L'altra opzione è utilizzare più contenitori sulla pagina. Ciò richiede una modifica al markup, ma a volte è una semplificazione che funziona bene. Se sposti l'intestazione al di fuori del tuo contenitore corrente e lo dichiari come un contenitore di proprietà, questo farà il trucco.

(come nota a margine:. Se si ha bisogno l'intera larghezza mai, si può semplicemente utilizzare la funzione columns-width() (per la larghezza interna, senza imbottitura) oppure container-outer-width() per l'intera larghezza compresa l'imbottitura)

UPDATE:

Sto usando questo mixin, per applicare sanguinare ovunque ne ho bisogno:

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

Alcuni esempi:

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