Sass のインストールメモ

CSSメタ言語としてLessとともに有名なSass。マックにインストールメモです。

インストール

SassはRubyで動いているものなので、Windowsの場合にはRubyのインストールから行わないといけません。
Macの場合には、元々Rubyがインストールされているので、Sassをパッケージマネージャーから入れるだけということになります。
とりあえずRubyのバージョン確認

$ ruby -v
ruby 2.0.0p451 (2014-02-24 revision 45167) [universal.x86_64-darwin13]

大丈夫そうなので、Sass をインストールします。

$ sudo gem install sass
Fetching: sass-3.3.7.gem (100%)
Successfully installed sass-3.3.7
Parsing documentation for sass-3.3.7
Installing ri documentation for sass-3.3.7
1 gem installed

動作確認も兼ねてバージョン確認しておきます。

$ sass -v
Sass 3.3.7 (Maptastic Maple)

簡単な使い方

$ sass [元のscssファイル]:[変換するCSSファイル名] [オプション][スタイル]

ちなみに[オプション][スタイル]は任意項目なのでなくてもいい
[オプション][スタイル]は、
–style nested (defoult)
–style expanded
–style compact
–style compressed

自動更新させる(watch)

$ sass --watch [オプション][スタイル] [元のscssフォルダ]:[変換するCSSフォルダ]

ここで私の環境では、エラーが出ました。

$ sass --watch --style expanded scss:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
directory css
write css/test.css
[Listen warning]:
Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback.

Listen機能が働いていない模様です。

$ sudo gem install listen

再び動作確認

$  sass --watch --style expanded scss:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: scss/test.scss
      write css/test.css
^C

うまく動作するようになったようです。めでたしめでたし