, ,

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

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

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 の文頭に下記の記述を加えて読み込みます。

config.rb
# Require any additional compass plugins here.
require 'susy'

Grunt

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

Gruntfile.js
// 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>

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

src/sass/style.scss
// Screen
// ======
@import "grids";
src/sass/_grids.scss
// Requirements
// ============
@import "susy";
$susy: (
  columns: 12,
  gutters: 1/4,
);

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

補遺

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

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

@import "susyone";