[Susy2] Susy2 でレイアウトする

Video チュートリアルを見ながら確認して行きます。

[markdown]
> * [Susy Tutorials | Level Up Tuts](http://leveluptuts.com/tutorials/susy-tutorials)

## Basic Grid

[前回](/blog/2014/07/24_6520.html)のコードを使うと、こんな形になります。

“`css
.container {
@include container(80%);
@include clearfix;
}
.contents {
@include span(9 at 4 of 12);
}
.aside {
@include span(3 of 12);
}
“`

at を使うことによって、カラムの開始位置を指定してレイアウトします。last オプションを使っていませんね。
[container](http://susydocs.oddbird.net/en/latest/settings/#container) に横幅を指定しています。
これは Shorthand 記法で、$susy で指定する場合は、下記のようになります。

“`css:_grid.scss
$susy: (
container: 960px,
);
.container {
@include container;
“`

## Global Settings

[前回](/blog/2014/07/24_6520.html)使っていた $susy による設定に関してです。
こちらにどんな設定があるかドキュメントがあります。

> * [Settings — Susy 2.1.2 documentation](http://susydocs.oddbird.net/en/latest/settings/)

[columns](http://susydocs.oddbird.net/en/latest/settings/#columns) の指定で、span 設定がシンプルな記述になりました。

“`css
$susy: (
columns: 12,
);
.container {
@include container;
@include clearfix;
}
.contents {
@include span(9 at 4);
}
.aside {
@include span(3);
}
“`

[gutters](http://susydocs.oddbird.net/en/latest/settings/#gutters) で要素と要素のマージンを指定。ディフォルトはカラムの1/4サイズ。
[math](http://susydocs.oddbird.net/en/latest/settings/#math)で fluid | static レイアウトを指定。
[output](http://susydocs.oddbird.net/en/latest/settings/#output)でレイアウトに利用する技術 float | isolate を指定。
[gutter-position](http://susydocs.oddbird.net/en/latest/settings/#gutter-position) でカラムに対して gutter をどう付けるか指定。ディフォルはafter。

“`css
$susy: (
columns: 12,
gutters: 1/4,
math: fluid,
output: float,
gutter-position: after,
);
“`

## Setting Layouts

$susy での [settings](http://susydocs.oddbird.net/en/latest/settings/#settings) がなぜ反映されるのか。

[layout](http://susydocs.oddbird.net/en/latest/settings/#layout) mixin に読み込ませている書式を省略していました。

“`css
$susy: (
columns: 12,
gutters: 1/4,
math: fluid,
output: float,
gutter-position: after,
container: 80%,
global-box-sizing: border-box,
use-custom: (rem: true),
);
@include layout($susy);
“`

このため $susy 以外の設定を定義し、同じ形で読み込ませると、そちらを利用できます。

“`css
$wide: (
columns: 24,
);
@include layout($wide);
“`

また [with-layout](http://susydocs.oddbird.net/en/latest/settings/#with-layout) mixin を利用すれば、指定した部分だけ違うレイアウトに切り替えることもできそうです。

“`css
$wide: (
columns: 24,
);
@include with-layout($wide) {
.container {
@include container;
@include clearfix;
}
.contents {
@include span(9 at 4);
}
.aside {
@include span(3);
}
}
“`

## Shorthand Syntax

[Shorthand](http://susydocs.oddbird.net/en/latest/shorthand/#shorthand) を利用すると、書式を省略して書くことができます。

“`css
$susy: (
columns: 12,
gutters: 1/4,
math: fluid,
output: float,
gutter-position: after,
);
“`

上記は、下記のように書くこともできます。
grid(columns gutters), keywords の順番で書く決まり。

“`css
@include layout(12 1/4 fluid float after);
“`

※ [960 Grid System](/blog/2014/07/25_6538.html)については、別途検証します。

また [Shorthand](http://susydocs.oddbird.net/en/latest/shorthand/#shorthand) を span mixin で利用することもできます。

“`css
$contents: 8 at 5;
$aside: 4;
.container {
@include container;
@include clearfix;
}
.contents {
@include span($contents);
}
.aside {
@include span($contents);
}
“`
[/markdown]