Sassっていうのは、ざっくりいうとCSSを生成するスクリプト言語のこと。
最近だとCompassっていうSassの拡張みたいなやつが流行ってますよね。
でも私の現場ではSassも使われてなくて、いまだ地道に生CSSを書いているのです。

というわけでステップアップするためにSassってみるわけです。
(※なお、今回はCompassではなくてSass。あしからず)

インストール

SassはRubyで作られているので、Rubyをインストールします。
Windowsならこちらからインストーラをダウンロードできるのでそれで。

Rubyのインストールが終わったらコマンドプロプトを立ち上げて、

$ gem install sass

と打つ。

しばらく待つとインストール完了です。

正常にインストールできていれば

$ sass -v

でバージョン情報が出るはず。

できること

できることは http://sass-lang.com/guide に書いてありますが、

だいたい

が特徴です。

Sassではscssファイルとして書くのですが一般的なようですが、
この書式(※上記URL参照)であれば、cssとさほど変わらないので導入もイケそうですね。

使ってみる

たとえば、

app/
	index.html
	css/
	js/
	sass/

みたいなディレクトリ構成のWEBアプリだとして、
sassディレクトリ配下にscssファイルを書いていきます。

コマンドプロンプトでappディレクトリまで移動して、

$ sass --watch sass:css

と打つと、sassがsassディレクトリ配下のscssファイルの更新を監視してくれます。
scssが更新されると、自動でcssディレクトリ配下にcssファイルを生成していってくれるのです。
試しにsass配下にstyle.scssを作ってみると、css配下にstyle.cssが生成されていることがわかります。

うーむ、便利な世の中だ。

Sassにある程度なれたらCompassのほうも触ってみますね。

参考: