[Susy2] Susy2 をインストールする

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

Susy（スージー）を使ってみます。

[markdown]
## Susy とは

Compass core team member である Eric Meyer さんが作った Grid System。

> * [Susy](http://susy.oddbird.net/)
> * [Removing Blueprint from Compass in 0.13 | Compass Documentation](http://compass-style.org/blog/2012/05/20/removing-blueprint/)

こちらの記事を以前に見て興味がありました。

> * [Tokyo Middleman Meetup #1でSusyのお話をしてきた](http://camuro.org/blog/2013/11/tmm.html)

ちょっとさわった感想。

* Bootstrap のように Grid 用の class がない。
* HTMLの管理が楽だけど、sass の class 管理が大変になりそう。
* レイアウトデザインをCSSで完結できるというのは、ビューテンプレート（HTML）との分離とか分業の面でよいかもしれない。
* Grid System なので、Bootstrap 等と違って部分的な導入もしやすそう（実際インストールの手間もそれほどないので）。
* プロジェクトの性格に応じてと言うことになると思いますが。

## インストール

今のバージョンは Susy 2 です。

> * [Getting Started — Susy 2.1.2 documentation](http://susydocs.oddbird.net/en/latest/install/)

Susy 1 とは、@mixin の呼び方が変わっているので、ネット上の情報を読む上で注意が必要。

### Sass, Compass, Susy のバージョンと注意点

2014/07/22 現在、Sass, Compass, Susy の組み合わせ利用において、バージョンに注意する必要があります。

以下のバージョンで動作確認が取れています。

* compass 1.0.0.alpha.21
* sass 3.3.10
* susy 2.1.3

また、`compass watch` コマンドが利用できないため、grunt で監視する必要があります。
詳しくは下記にまとめましたのでご参考ください。

> * [Sass + Compass + Susy2 watch & compile error with grunt | deadwood](https://www.d-wood.com/blog/2014/07/22_6504.html)

### gem

`gem install susy` でインストール。

“`prettyprinted
% gem install susy
“`

### config.rb

Compass の設定ファイル config.rb の文頭に下記の記述を加えて読み込みます。

“`ruby:config.rb
# Require any additional compass plugins here.
require ‘susy’
“`

### Grunt

Compass を Grunt でコンパイルとウォッチをしている場合。
config.rb に書かない場合は、Gruntfile の option にこのように書けるよう。

“`javascript:Gruntfile.js
// Gruntfile.js
compass: {
options: {
require: ‘susy’,
…
}
}
}
“`

## Compass コマンドでひな型ファイルを生成する

Compass を使って新規プロジェクトを作る場合は、こうしてと公式に書いてある。

“`prettyprinted
% compass create –using susy “`

途中からも使えそうなので試してみたところこうなりました。
sass ディレクトリはカスタマイズしています。

“`prettyprinted
% compass install susy
create src/sass/_grids.scss
create src/sass/style.scss
remove .sass-cache/
remove src/css/ie.css
remove src/css/print.css
remove src/css/screen.css
remove src/css/style.css
create src/css/ie.css
create src/css/print.css
create src/css/screen.css
create src/css/style.css
unchanged src/sass/style.scss
Welcome to Susy! Check out the full documentation online:
http://susy.oddbird.net/
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:

“`

変更されたり作成されたりしたファイルと内容は下記のとおりでした。

“`css:src/sass/style.scss
// Screen
// ======
@import “grids”;
“`

“`css:src/sass/_grids.scss
// Requirements
// ============
@import “susy”;
$susy: (
columns: 12,
gutters: 1/4,
);
“`

なるほど _grids.scss をさわれば良さそうですね。
手動で設定する場合は、`@import compass`, `@import susy` しておけばよいですね。
[次回](/blog/2014/07/24_6520.html)、サンプルプロジェクトを始めてみます。

## 補遺

Susy 1 の記法も使えるようになっているようです。

> * [Susy One — Susy 2.1.2 documentation](http://susy.readthedocs.org/en/latest/susyone/)

その場合は、`@import susy` ではなくて、下記のようにすればOK。

“`prettyprinted
@import “susyone”;
“`
[/markdown]