Sassっていうのは、ざっくりいうとCSSを生成するスクリプト言語のこと。
最近だとCompassっていうSassの拡張みたいなやつが流行ってますよね。
でも私の現場ではSassも使われてなくて、いまだ地道に生CSSを書いているのです。
というわけでステップアップするためにSassってみるわけです。
（※なお、今回はCompassではなくてSass。あしからず）
インストール
SassはRubyで作られているので、Rubyをインストールします。
Windowsならこちらからインストーラをダウンロードできるのでそれで。
Rubyのインストールが終わったらコマンドプロプトを立ち上げて、
> gem install sass
と打つ。
しばらく待つとインストール完了です。
正常にインストールできていれば
> sass -v
でバージョン情報が出るはず。
できること
できることは http://sass-lang.com/guide に書いてありますが、
だいたい
- 変数が使える
- ネストして書ける
- ファイルを分割して書ける
- 分割して書いたファイルをインポートできる
- Mixin（関数みたいなもの）が使える
- 継承できる
- 値に四則演算を指定できる
が特徴です。
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のほうも触ってみますね。