, , ,

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

公開日: 2014/07/25
更新日: 2018/11/14

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

調査

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

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

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

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

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

2014-07-25_susy_01

対応

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

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

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

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

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

$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;
}

2014-07-25_susy_02

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

補遺

pad という mixin があるよう。
これを利用して左右の padding だけを指定した方が良いのかもしれない。

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