Wie verwende ich Susy-Raster, um ein "Bootstrap" -Stilgitter zu erstellen?

Question

Ich mag die Art, wie Bootstrap Paddings verwendet und dann die 'Zeile' negativ abrundet, um alles in eine Linie zu bringen. Es hat die Notwendigkeit für :nth-child Selektoren beim Versuch entfernt, Gossen auf bestimmte Dinge zu entfernen.

Aber ich mag die Möglichkeit, die Dachrinnen in einer Karte angeben und sie sind als Prozentsatz festgelegt. Ich habe es irgendwie geschafft, aber es fühlt sich klobig an und fragt sich, ob es einen besseren Weg gibt.

Config:

$split-gutter: (
    columns: 12, 
    gutters: .8 
); 

Holen Sie sich das Halb Gosse Wert:

$susy-split-gutter-width: (span(1) * map-get($split-gutter, gutters))/2; 

Row Stile:

.row { 
    @include clear; 
    margin-left: -$susy-split-gutter-width; 
    margin-right: -$susy-split-gutter-width; 
} 

Stellen Sie die Basisspalte Stile:

[class^="col-"] { 
    float: left; 
    padding-left: $susy-split-gutter-width; 
    padding-right: $susy-split-gutter-width; 
} 

die Breite auf Säulen Set:

.col-1 { 
    width: span(1); 
} 

.col-2 { 
    width: span(2); 
} 

...etc 

das ok ist. Aber es fühlt sich an, als ob ich mich in Susy-Werte hacke und ich bin mir nicht sicher, ob das großartig ist. Gibt es einen besseren Weg?

Answer 1

Susy hat eine gutter-position Einstellung, die bereits ermöglicht split (Halb Gosse Margins) oder inside (Halb Gosse padding) als Optionen zur Auswahl - so haben Sie nicht, dass Mathematik selbst zu tun. Stellen Sie die Rinnenposition auf inside und die gutter()-Funktion wird eine halbe Rinnenbreite zurückgeben. Hier ist es in sassmeister mit Split Rinnen:

$susy: (
    columns: 12, 
    gutters: 0.8, 
    gutter-position: split, 
); 

@include border-box-sizing; 

.container { 
    @include container(); 
} 

.row { 
    margin-left: 0 - gutter(); 
    margin-right: 0 - gutter(); 
} 

.column { 
    @include span(2) 
} 

Answer 2

Hier ist, wie Susyboot löst es:

$susy: (
    columns: 12, 
    gutter-position: inside, 
    global-box-sizing: border-box, 
); 

@include border-box-sizing; 

.container { 
    @include container(); 
    padding: 0 gutter(); 
    @include susy-clearfix; 
} 

.row { 
    margin: 0 gutter() * -1; 
    @include susy-clearfix; 
} 

Und hier ist der Edelstein:

gem install susyboot 

Fühlen Sie sich frei Kräfte zu bündeln, mit dem Autor (Ich) und mache das Projekt besser.