CSSプリプロセッサについて～Sass、LESS、Stylus

すいません、『わたしの作業環境』シリーズでつなげようと思ったんですが急遽気になるネタを見つけてしまって。

CSSプリプロセッサ（CSS拡張メタ言語）広まってきて久しい？ですが、有名どころはSass、LESS、Stylusだと思います。
サーバサイドがどうとか、環境が必要とか、インストールに関する内容はなんとなく知ってはいるのですが、
具体的な機能や文法の違いを明確に知らなかったので、ふと検索してみると私にぴったりのスライドが見つかりましたので抜粋して紹介したいと思います。

毎度のお断りで恐縮ですが、超意訳です。
詳細はぜひ、本家のスライドをご覧くださいませ。英語わからなくても、コードが書いてあるので読みやすいスライドだと思います。
CSS PreprocessorsSass, Less and StylusPatrick Arlt - @patrickarlt

---

で、結局どれがいいの？

という問いに、@patrickarltさんは
『端的に言えばSassかStylus』。丁寧に言うと
『Ruby使ってんならSass。Node使ってんならStylus。コマンドライン（いわゆる「黒い画面」）が嫌いなやつはLESSな。』
とのこと。

どう違うの？

Sassの特徴

• @extend　→　クラス名は違うけど、ベースのスタイルが同じときに、2回同じコードを書くのはめんどくさい。それを簡単にするのが@extend。
• @media　→　mediaqueryをセレクタの中に書ける！
• @content　→　自分が使いこなせてない機能なので説明が難しいですが、ある条件ではこのスタイルをあてたいけど、という条件分岐に容易に対応できるものだと思います。
• Compass　→　言わずもがな。

LESSの特徴

• Mixins　→　CSSのプロパティを記述する場所に、CSSのクラス名を指定するだけで、そのクラスのスタイルが読み込まれる。（変数として格納する必要なし）
• Namespacing Mixins　→　CSSとLESSのクラス名のかぶりを防ぐのに使える機能みたいなのですが、使える場面がぱっと場面が浮かびませんでした･･･。
• Scoped Variables　→　CSSのセレクタ内で変数の上書きができる。
• クライアントサイドでコンパイルができる。（使用時にRubyやNodeのインストールが不要）

Stylusの特徴

• CSSの記述に必要なコロン「：」、セミコロン「；」を半角スペースで代用できる
• forループやif文などを用いた条件分岐をプログラミング言語に近い感じで行える。
• CSS3のキーフレームの実装がとっても楽
• APIでいろいろできるらしい（すみません、曖昧で。。。）
• Nib　→　SassでいうCompassみたいなもの。

---

自分はSassしか使ったことがなかったのですが、
Nodeをインストールしてるので、Stylusはありかもなぁと思いました。
日常的にCompassやNibの機能を使いこなしてるような人だと、たぶんLESSに戻るのはつらいのかなぁと。
LESSでもCompassやNibにあたるものはないという認識なんですが、存在するんですかね。。。

MacユーザーはデフォルトでRubyが入ってるので、Sassへの敷居は低いかもしれないですね。
自分は会社でも家でもWinユーザですが、周りでもやっぱりRubyのインストールにてこずる人は多いので。

LESSとStylusの特長をほぼ知らなかったので、勉強になりました。