[Susy2] Susy2 で 960 grid system レイアウトをする

960 Grid System のサンプルコードがうまく動いていないよう。

[markdown]

> * [Shorthand — Susy 2.1.2 documentation](http://susydocs.oddbird.net/en/latest/shorthand/#shorthand)
> * [#5 – Shorthand Syntax | Level Up Tuts](http://leveluptuts.com/tutorials/susy-tutorials/5-shorthand-syntax)

## 調査

960 Grid System を実現したい場合は、こんな Shorthand になるそうです。

“`css
@include layout(12 (60px 10px) split static);
.container {
@include container(960px);
“`

Shorthand なしではこんな形でしょうか。

“`css
$susy: (
container: 960px,
columns: 12,
column-width: 60px,
gutters: 1/6,
gutter-position: split,
math: static,
);
@include layout($susy);
“`

が、これでは 960px にならず。

## 対応

調べたところ、ただしくはこのような設定が必要なよう。

“`css
$total-columns : 12;
$column-width : 60px;
$gutter-width : 20px;
$grid-padding : 10px;
“`

> * [susy compass – Grid width is not 960px – Stack Overflow](http://stackoverflow.com/questions/14925897/grid-width-is-not-960px)
> * [Susy](http://susy.oddbird.net/demos/grid-types/)

gutters が 20px になるよう変更します。
grid-padding の設定はなさそうなので、各要素に padding を css で設定します。

“`css
@include layout(12 (60px 20px) split static);
.container {
@include container(960px);
“`

Shorthand なしではこんな形でしょうか。

“`css
$susy: (
container: 960px,
columns: 12,
column-width: 60px,
gutters: 1/3,
gutter-position: split,
math: static,
);
@include layout($susy);
.container {
@include container;
@include clearfix;
}
.contents {
@include span(8 at 5);
padding: 10px;
}
.aside {
@include span(4);
padding: 10px;
}
“`

これで正しい出力になっているはず。

## 補遺

[pad](http://susydocs.oddbird.net/en/latest/toolkit/#padding) という mixin があるよう。
これを利用して左右の padding だけを指定した方が良いのかもしれない。

“`css
.contents {
@include span(8 at 5);
@include pad(10px);
}
.aside {
@include span(4);
@include pad(10px);
}
“`

> * [Toolkit — Susy 2.1.2 documentation](http://susydocs.oddbird.net/en/latest/toolkit/#padding)
[/markdown]