Guardを使ってSassに変更があった時に、CSSに自動でコンパイルし、保存する

Guard-Sassを入れる

gemでguardとguard-sassをインストール

参考: hawx / guard-sass

hoge@foo.local[sass_guard_bootstrap]$ gem install guard-sass

設置する

任意のディレクトリに移動

Guardを設置したいディレクトリに移動します。今回はホームディレクトリにsass_guard_bootstrapを作ってそこに入れてみました。

hoge@foo.local[~]$ mkdir sass_guard_bootstrap
hoge@foo.local[~]$ cd sass_guard_bootstrap

Guardfile設置

さっき作ったsass_guard_bootstrapに入れます。

hoge@foo.local[sass_guard_bootstrap]$ guard init sass

ディレクトリの中にGuardfileが作成されます。
中身はこんな感じです。

# A sample Guardfile
# More info at https://github.com/guard/guard#readme

guard 'sass', :input => 'sass', :output => 'css'

sassディレクトリとcssディレクトリを設置

hoge@foo.local[sass_guard_bootstrap]$ mkdir sass
hoge@foo.local[sass_guard_bootstrap]$ mkdir css

起動させて使う

guardを起動、ディレクトリ内の監視を開始

hoge@foo.local[sass_guard_bootstrap]$ guard

こんな感じになる。

6:04:56 - INFO - Guard uses TerminalTitle to send notifications.
16:04:56 - INFO - Guard is now watching at '/Users/hoge/sass_guard_bootstrap/'
[1] guard(main)>

別タブで編集する

Guardを上記の状態で開いてるタブはそのままにして、別タブでsassファイルを編集します。
sassを上書きするとcssも自動で上書きされます。