CSS拡張言語SASSとLESSを触ってみる

tec

大規模な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を使うときには便利じゃないかな。という感じでした。

Comments