69log

大規模なwebアプリケーションを構築する際にCSS自体の管理も煩雑になりがち。ベンダープレフィックスなどの記述自体も面倒になってきたので、それらを解決する一つの方法として『SASS』と『LESS』を検討してみました。

両者の違いはCSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較に細かくまとめたれています。

LESSを使ってみた
LESSはJavaScriptでコンパイルするので、LESSファイルとコンパイラーのJSを読み込めば使用できる。

style.lessに

@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}

としてやると


#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

とコンパイルされる感じ。
Mixinやネストのほか演算、関数も少し使える。

SASSを使ってみた

とりあえず、rubyがインストールしてる条件で

gem install sass

でSASSをインストール。
style.scssファイルに

$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

として、
sass style.scss style.css
でコンパイルすると

.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

でコンパイルされます。
SassでHTML記号や日本語を使う場合は、@charset “UTF-8″ を文頭につけておくとコンパイル後のcssも文字コードが予期しないものにならないっぽい。

毎回、コンパイルすのも面倒なので

sass --watch style.scss:style.css

watch オプションをつけておけばscssファイル編集とともにcssも変更されます。終了する時は Ctrl+c。これは便利です。
ディレクトリを指定すれば、ディレクトリ単位で監視もできます。


sass --style compressed --watch style.scss:style.css

style compressedオプションをつけてやればminifyもしてくれます。これも便利。
SASSの場合、関数で定数の演算を扱える、条件分岐や繰り返しも使えるのでLESSより柔軟です。

あと、Hamlをインストールしておけば
css2sass style.css
とすることで既存のCSSをSASSに変換できるっぽいので、既存環境をSASS化することもできそう。

最近railsを触ってることもあってSASSのほうが気になりました。

個人的な感想では、SASSはrubykのコンパイルが必要だけど、機能が豊富で柔軟に使用できる。環境構築さえしてしまえば、後は非常にやりやすかった。
CompassというSASSフレームワークが便利そう。

LESSは導入が容易。Twitter Bootstrap などにも導入されている。JavaScriptでコンパイルするので、環境などの構築は不要。文法がひと癖あり、SASSにくらべて制限がある。小規模な案件やモバイルウェブアプリ、node.jsを使うときには便利じゃないかな。という感じでした。