はじめてのCSSメタ言語はLessがおすすめ！

Tsushima Keiko2011-12-07

LINE Engineer

こんにちは、NAVER UIT つしまです。
Less & Sass Advent calendar 2011の8日目です。

これまでのAdvent calendarの記事で、SassやLessの概要、活用法などが見えてきました。
今回は、「Lessは機能不十分そうだし、Sassオシ多いし、Sassを使いはじめようかな・・」と思っている方に向けてはじめてのCSSメタ言語はLessがおすすめというおはなしです。

Lessって？

既にCSSとフレームワークとメタ言語(2日目記事)やLESS初心者向けのナニカ(4日目記事)でも紹介があったとおり、LessはCSSを記述するためのメタ言語です。

ただ後発であるにも関わらず、SassにあるのにLessにない機能は結構あって、例えば、ifやforなどの制御文、extendが使用できなかったり、cssへの出力形式がSassほど選べなかったり・・
ドキュメントもSassに比べれば少ないし・・もうSassにしよう・・

となりがちです。

Lessがおすすめな理由

それでもSassではなく、Lessをおすすめしたくなる理由があるんです。

Mixinの定義がシンプル

Mixinの定義は「#」あるいは「.」ででき、呼び出す際も特に宣言は不要です。

.MxBorderRadius(@radius: 10px){
    border-radius: @radius;
    -moz-border-radius: @radius;
}

#header { .MxBorderRadius(5px); }

Sassでは「@mixin」や「@include」と宣言しなければいけないのですが、Lessはシンプルですね。
紛らわしく間違えやすいかもなんて思いますが、はじめにMixinの命名規則（Mixin名はMxから始める etc）さえきっちり決めたら問題なさそうです。

Mixinを入れ子にできる

Mixinを入れ子にすることが可能です。

#Mixin{
    .MxBorderRadius(@radius: 10px){
            border-radius: @radius;
            -moz-border-radius: @radius;
    }
}

#header { #Mixin > .MxBorderRadius(5px); }

きっちり設計してifやforなどの制御文を使いこなすことは慣れないと難しいですが、これなら機能ごとやブラウザごとに書くことができるので簡単ですね。

スコープという概念が存在

スコープという、変数の参照できる有効範囲があります。
ちょっとだけ変更したいなどの融通がききます。

@link-color: #333;
#header {
    @link-color: #eee;
    a { color: @link-color; // #eeeとなる }
}
#footer {
    a { color: @link-color; // #333となる }
}

インストールなどが不要ですぐに使える

LessはCSSにいちいち変換せずとも、Less.jsを読みこめばクライアント側（ブラウザ）で変換してくれます。

<link rel="stylesheet/less" type="text/css" href="common.less">
<script type="text/javascript" src="less-1.1.5.min.js"></script>

はじめてCSSのメタ言語を使ってみる時にはとっても魅力的ですよね。
インストールや設定がめんどうでためらっている方はぜひ試してみてください。
ちなみにLess.jsはGoogle Codeで管理されているので、JSのダウンロードすら不要で試せます。

ただ、クライアント側で変換するとなると表示速度が気になります。
実際に300KB程度のLessファイルを用意してLess + less.jsとCSS変換したものとで速度を比較してみたところ、後者のほうが約2.5倍ほど早い結果となりました。
やっぱり実務で使うにはCSSへ変換するのがマストです。

Lessを実務で使うには？

結局必要となる環境構築、Node.jsやらnpmやらインストールするのはちょっと手間だし、Less更新のたびにコマンドを実行するのも煩わしい。
そんな方向けにLessファイルの更新を監視して自動でCSSへ変換・上書き保存してくれる便利なGUIツールのご紹介です。

SimpLESS

Windows・Mac両方対応。
less・cssフォルダを含むプロジェクトフォルダをドラッグしておくだけです。

Lessnium

こちらはWindowsのみ。
Lessファイルをひとつひとつ追加する必要があるのと、エラーとなると再保存繰り返そうとしちゃうのがちょっと難点です。

LESS.app

こちらはMacのみ。
CSSファイルの保存先を選べたり、エラーの詳細が表示されたりとっても使いやすいアプリケーションです。

これらのツールのおかげで億劫だった環境構築の必要もないですね！
便利ツールを作ってくださる開発者様に感謝です。

おわりに

わたしの「はじめてのCSSメタ言語」はSassだったのですが、便利だけど多機能でどうやって使ったらいいのかわからず迷ってしまう事が多々ありました。
その点Lessはシンプルで、最低限必要な機能がぎゅっと詰まっているので把握しやすくとっかかりやすく感じます。ぜひぜひLessをきっかけにCSSメタ言語を極めてください。

最後までお読みいただきありがとうございました。

ところで、NAVERではSassを使っています。

frontend

Blog