【Susy】Sass,Compassでグリッドレイアウトしまそ
何
SusyはCompassのプラグインです。
グリッドなサイトを制作するためのMixinを提供してくれます。
モバイル・ファーストも可能よ。
インストール
Susy: Getting Startedを眺めたら多分わかります。
使い方
初期設定
Susyを使うときは次の変数に何かしら値を代入してから使います。
$total-columns : 12; $column-width : 4em; $gutter-width : 1em; $grid-padding : 0.5em; $container-style :
上から順番に
- 何カラム使うか。上では12カラム。
- 1カラムあたりの幅はどれだけか。
- カラム間のmargin(幅)はどれだけか。margin-right: 1em みたいに。
- グリッド左右のpaddingはどれだけか。TwitterBootstrapだったら.rowの左右にみたいな感じ。
- 3種類あるグリッド・タイプ名のどれかを入れます。詳しくは次。
$container-style: static
幅固定タイプ。
幅は$grid-padding x 2 + $column-width x 12 + $margin-width x 11 のサイズです。
例えば、要素幅 > ブラウザ幅 となったとしてもサイズが変わりません。
スクロールバーがでちゃうタイプ。
$container-style: fluid
幅がブラウザ幅いっぱいになるタイプ。
ブラウザ幅を変更すると要素の幅も自動で変わります。
中のカラムもそれに比例して幅を変えます。
$container-style: magic
StaticとFluidを合わせた感じのタイプ。
要素幅 < ブラウザ幅 なら $grid-padding x 2 + $column-width x 12 + $margin-width x 11 の幅
要素幅 > ブラウザ幅 ならブラウザ幅いっぱい。
ちなみに、それぞれこんな感じになります。開発者ツールとかを開いて幅サイズを見ると分かるかも。
書いてゆく
こんなHTMLだとして
<div class="grid"> <div class="main"></div> <div class="side"></div> </div>
親要素にcontainerをmixinします。
.grid { @include container; }
子要素にspan-columnsをmixinします。
何カラム使うかを、合計が$total-columnsの値になるように引数を入れます。
最後の要素にはomegaを追加します。(marginが無くなってfloat: rightが追加)
omegaを書かないと溢れます。
.main { @include span-columns(8); } .side { @include span-columns(4 omega); }
の繰り返し。
モバイル・ファーストで書く
at-breakpointをmixinしてその中に記述します。 こんな感じになります。
$container-style: magic; $break : 12; .grid { @include container; } // ブラウザ幅 < $grid-padding x 2 + $column-width x 12 + $margin-width x 11 の時 // 1カラム .main { @include span-columns(12 omega); } .side { @include span-columns(12 omega); } // ブラウザ幅 > $grid-padding x 2 + $column-width x 12 + $margin-width x 11 の時 // 2カラム @include at-breakpoint($break) { .main { @include span-columns(9 omega); } .side { @include span-columns(3); } }
at-breakpointのところはこんな感じに
@media (min-width: 59em) { /* 何か */ }
at-breakpointの引数はhttp://susy.oddbird.net/guides/reference/#ref-prefixのMedia-Layoutsってとこを読むとよいです。
max-widthの指定なんかやカラム数の変更などもできるみたいです。