Susy2 でレイアウトする

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

Susy Tutorials | Level Up Tuts

Contents

Basic Grid

前回のコードを使うと、こんな形になります。

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

at を使うことによって、カラムの開始位置を指定してレイアウトします。last オプションを使っていませんね。
container に横幅を指定しています。
これは Shorthand 記法で、$susy で指定する場合は、下記のようになります。

_grid.scss

$susy: (
  container: 960px,
);
.container {
  @include container;

Global Settings

前回使っていた $susy による設定に関してです。
こちらにどんな設定があるかドキュメントがあります。

Settings — Susy 2.1.2 documentation

columns の指定で、span 設定がシンプルな記述になりました。

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

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

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

Setting Layouts

$susy での settings がなぜ反映されるのか。

layout mixin に読み込ませている書式を省略していました。

$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 以外の設定を定義し、同じ形で読み込ませると、そちらを利用できます。

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

また with-layout mixin を利用すれば、指定した部分だけ違うレイアウトに切り替えることもできそうです。

$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 を利用すると、書式を省略して書くことができます。

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

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

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

※ 960 Grid Systemについては、別途検証します。

また Shorthand を span mixin で利用することもできます。

$contents: 8 at 5;
$aside: 4;
.container {
  @include container;
  @include clearfix;
}
.contents {
  @include span($contents);
}
.aside {
  @include span($contents);
}