Susyグリッドを使って 'ブートストラップ'スタイルのグリッドを作成する方法は？

Question

私はブートストラップがパディングを使用し、その後、行をすべて負にして行を整列させるのが好きです。特定のもので溝を取り除こうとしているときに、:nth-childセレクタの必要性が排除されました。

しかし、私は地図で溝を指定するのが好きで、パーセンテージとして設定されています。私はそれをやり遂げたことがありましたが、それは鈍い感じがあり、より良い方法があるのだろうかと思います。

設定：

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

行のスタイル：：

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

設定されたベース列スタイル：

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

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

が半分ガター値を取得0

列の幅を設定：

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

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

...etc 

大丈夫です。しかし、私はサッシーの価値にハッキングしているように感じ、それは素晴らしいとは思わない。より良い方法がありますか？

Answer 1

スージーがすでにオプションとしてsplit（ハーフガター余白）またはinside（半樋パディング）を選択することができますgutter-position設定を持っている - ので、あなたはその数学を自分で行う必要はありません。ガターの位置をinsideに設定すると、gutter()の機能はハーフガターの幅を返します。ここでは、スプリット雨どいとin sassmeister次のとおりです。ここで

$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

はSusybootがそれを解決する方法である：

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

そしてここ逸品です：

gem install susyboot 

は、著者と力を合わせる気軽に（私）とプロジェクトをより良いものにする。