Susy: Wie erweitert Content-Box, um auch Gitter-Padding zu decken?

Question

Ich habe gerade angefangen mit Susy zu spielen. Ich habe ein 12-Spalten-Gitter, das Gitter-Padding hat. Jetzt möchte ich, dass die Kopfzeile meiner Seite das gesamte Raster einschließlich der Rasterauffüllung überspannt. Was ich gerade mache, ist die Berechnung der Gesamtbreite und dann die Einstellung eines negativen Randes in der Kopfzeile. Das fühlt sich ziemlich hacky für mich an ... Gibt es einen saubereren Weg, es zu tun?

$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

Sie haben zwei gute Möglichkeiten. Eins ist eine vereinfachte Version von dem, was Sie haben. Da Blockelemente standardmäßig 100% Breite haben, können Sie einfach Ihre Breiteneinstellung (und all diese hacky Mathe) beseitigen.

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

Ihre andere Option besteht darin, mehrere Container auf der Seite zu verwenden. Das erfordert eine Änderung des Markups, aber manchmal ist es eine Vereinfachung, die gut funktioniert. Wenn Sie den Header außerhalb Ihres aktuellen Containers verschieben und ihn als eigenen Container deklarieren, ist das der Trick.

(als Neben. Hinweis: Wenn Sie die volle Breite jemals tun müssen, können Sie einfach die columns-width()-Funktion (für innere Breite, ohne Polsterung) oder container-outer-width() für die volle Breite einschließlich der Polsterung)

UPDATE:

ich habe diese mixin benutzen, anzuwenden blutet überall ich es brauche:

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

Einige Beispiele:

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