[Susy2] Susy2 をインストールする
Susy（スージー）を使ってみます。
Contents
Susy とは
Compass core team member である Eric Meyer さんが作った Grid System。
こちらの記事を以前に見て興味がありました。
ちょっとさわった感想。
- Bootstrap のように Grid 用の class がない。
- HTMLの管理が楽だけど、sass の class 管理が大変になりそう。
- レイアウトデザインをCSSで完結できるというのは、ビューテンプレート（HTML）との分離とか分業の面でよいかもしれない。
- Grid System なので、Bootstrap 等と違って部分的な導入もしやすそう（実際インストールの手間もそれほどないので）。
- プロジェクトの性格に応じてと言うことになると思いますが。
インストール
今のバージョンは Susy 2 です。
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 で監視する必要があります。
詳しくは下記にまとめましたのでご参考ください。
gem
gem install susy でインストール。
% gem install susy
config.rb
Compass の設定ファイル config.rb の文頭に下記の記述を加えて読み込みます。
# Require any additional compass plugins here.
require 'susy'
Grunt
Compass を Grunt でコンパイルとウォッチをしている場合。
config.rb に書かない場合は、Gruntfile の option にこのように書けるよう。
// Gruntfile.js
compass: {
options: {
require: 'susy',
...
}
}
}
Compass コマンドでひな型ファイルを生成する
Compass を使って新規プロジェクトを作る場合は、こうしてと公式に書いてある。
% compass create --using susy <project name>
途中からも使えそうなので試してみたところこうなりました。
sass ディレクトリはカスタマイズしています。
% 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:
<head>
<link href="/src/css/style.css" rel="stylesheet" type="text/css" />
</head>
変更されたり作成されたりしたファイルと内容は下記のとおりでした。
// Screen
// ======
@import "grids";
// Requirements
// ============
@import "susy";
$susy: (
columns: 12,
gutters: 1/4,
);
なるほど _grids.scss をさわれば良さそうですね。
手動で設定する場合は、@import compass, @import susy しておけばよいですね。
次回、サンプルプロジェクトを始めてみます。
補遺
Susy 1 の記法も使えるようになっているようです。
その場合は、@import susy ではなくて、下記のようにすればOK。
@import "susyone";