はじめに
Sassと愉快な仲間たち
2年前くらいはまだCSS3のモジュールなどは趣味レベルでしか使えないマニアックなものでしたが、スマホが幅を効かせるようになってからというもの、CSSを使う環境は随分と様変わりしています。
ブラウザがLevel3のモジュールに対応するようになると、CSSで出来ることが増えるのと引き換えに表現するための記述はより複雑になりました。
モノによってはプログラミングと言ってもいいくらいのコード量になるのに、プログラミング言語ではないから素のままでは単純な計算すらできません。
Sassはメタ言語（またはプリプロセッサ）と呼ばれるものです。
素では出来ないことを出来るようにして、とにかく便利に楽ちんにしてくれる、一度使ったら手放せなくなるとても便利な道具です。
これまでにもしCSSを書きながら「計算したいな」とか「変数使えたらな」とか思った事がある人にはまさにうってつけだと思います。
仲間の紹介
今の所ネットでよく名前を見かけるメジャー勢力はこの３つ。
メタ言語としての機能は似たり寄ったりなのですが、要求される必要環境が大きく異なります。
| 言語 | コンパイラ | 拡張子 | 書き方 | 特徴 | 採用例 |
|---|---|---|---|---|---|
| Sass | Ruby | .sass .scss | ２種類 （SASS, SCSS) | 高機能 | スマホ版ピグ、NAVER |
| Less | JavaScript(node.js) | .less | １種類 (LESS) | お手軽 | Twitter、はてな |
| Stylus | JavaScript(node.js) | .styl | ２種類 (STYL, CSS) | 速記 | スマホ版Ameba |
上の表を見ての通りSassだけRuby製です。
Sassが他二つと決定的に違うのは、コンパイルでCSSファイルを生成しなければブラウザで確認することができないということです。
とはいえクライアントサイドでのコンパイルはJavaScriptを使って動的に行うため、JavaScriptが動作しない環境やよりよいパフォーマンスなんかを考えると、最終的にはコンパイルが必須であると言えます。
LessとStylusでコンパイルをする場合、Node.jsが動作する環境が必要になります。
RubyとNode.jsの環境構築はノンプログラマーな人ならどちらも小難しいことだと思いますが、どのメタ言語にも有志が開発しているGUIコンパイラがあるので安心してください。
Sassがおすすめなたった一つの理由
各プロジェクトのGithubでpull requestとissuesを比較するとSassがダントツに少ないのです。
環境とかではなくその質の差で「Sassマジおすすめ」と言い張ります。
手触りを試すには？
公式サイトに用意されているオンラインツールを使えばその場でコンパイル結果が見れます。
Sassに対応しているソーシャルコーディングサービスを使うのもお手軽です。
（ただしバージョンが最新でない場合があります）
