読者です 読者をやめる 読者になる 読者になる

Milk+ea

Weblog Is My Hobby.

【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の指定なんかやカラム数の変更などもできるみたいです。