結構前から話題になっているSassを導入してみましたので、その手順をまとめてみました。分かりやすいサイトは複数あるので、私自身の備忘録として 残したいと思います。

Sassとは

CSSをネスト化して記述できたり、変数を使用して汎用性を高めたりなどプログラミングに近いことができるようになります。今まではHTML+CSSの構造をテンプレート化しようとしても、CSSを随所変更する必要がありました。CSSは言語としても構造的に実装できるような仕組みになっていません。CSSの仕組み上の問題点を取りあえず解決できるのがSassとなります。

前述に軽く記載していますが、Sassでできることを以下に列挙します。

・変数、関数が使用できる
・条件分岐が使用できる
・ネストして記述できる

変数が使用できるようになっただけでも、何度もコピー＆ペーストを繰り返す必要がなくなります。値が変動する箇所を変数化し、変数の値を変更するだけでテンプレートのサイトが出来上がる……なんて考えただけでもうれしいですね。大々的に広まることで効率のよい構造化のアイデアが出てくることでしょう。

余談ですが、Sassのサイトデザインはオライリー本に似ている気がします。意図があるのかは不明ですが。

Sassをインストールする

MacOSを使用している方は必要ありませんが、Windowsを使用している方はRubyを導入する必要があります。Rubyの導入はRubyInstaller for Windowsを使用すると簡単にできます。インストール後は環境変数を設定しコマンドプロンプトを再起動して、gemを使用しSassをインストールすれば終了です。インストールのチュートリアルも、Sassに記載がありますので参考にしてください。

注意する点としては、環境変数です。Ruby自体は簡単にインストールできたかと思います。しかし、環境変数PATHにRubyのパス(C:\Ruby193\bin など)を入れ込むと、以前に設定していた環境変数PATHが上書きされてしまいます。私自身、問題なくインストール出来たかと思っていたらJavaをインストールしていたことをすっかり忘れてしまっていてeclipseが起動しなくなりました。eclipseはルートフォルダにjreを直接入れ込むと起動するので、今はRubyのパスを設定しています。

Sassを使用する

sassコマンドをターミナル、もしくはコマンドプロンプトで使用します。

sass “.scssファイル” “.cssファイル”

“”に囲まれているファイルをファイル名に変更してください。ここで注意するのが、.sassファイルでなく.scssファイルであることです。ファイルの拡張子を間違えるとコンパイルエラーが発生しますので注意してください。（こんなところで躓いて1hほど無駄にしてしまいました；；）

jsdo.itを使用すれば、インストール不要で実験ができる

2012/08/09追記
jsdo.itを利用すると、Sassのインストールに悩まされることなく実験を行うことができます。jsdo.itでのコーディング時に、CSSの一行目におまじないの語句を記述しておくと、CSSではなくSassだと認識してくれます。実際に利用したサンプルも載せておきますので、遊んで見ませんか？

/* #! scss */