LESSについて調べた

フロントエンド
date 2012.05.14 tag CSS
こんばんはー。最近LESSについての記事を結構見かけるようになりました。便利だよーということ何となく知っていたのですが、正直その実態が何なのか理解してなかったのでこの機会に調べてみました。

LESS

http://lesscss.org/ (英語)
http://less-ja.studiomohawk.com/ (日本語訳)

僕は最初、UNIXコマンドのlessに関係あるものかなーとか思ったりしました。でも調べてみるとLESSとはCSSを拡張して従来の弱点を改善する言語(メタ言語)のことで、類似のものとしてSassてのがあることが分かりました。LESSで書かれたソースコードはJavaScriptを介して変換され、ブラウザ側にはCSSとして認識できるようになるようです。

できること

LESSを使うことで例えばCSSプロパティに変数を使ったり、入れ子状にしたりできます。これによりメンテナンス性の向上が期待でき、コードの書き方もプログラムっぽくなって見通し良くなります。サンプルを書いて、LESSでの記述がどんなCSSに変換されるのかを見てみましょうかね。ちなみにFirebugなどで変換されたCSSを確認できますよー。

LESSのコード

[css]
@color: #999;
@middle: 10px;

#entry {
padding:@middle;

h3 {
margin-bottom:@middle;
padding:@middle/2 0;
border-top:8px solid @color;
color:@color;
}

p {
border:1px sold @color;
padding:@middle;
}
}
}
[/css]

コンパイルされたコード

[css]
#entry {
padding: 10px;
}
#entry h3 {
border-top: 8px solid #999999;
color: #999999;
margin-bottom: 10px;
padding: 5px 0;
}
#entry p {
padding: 10px;
}
[/css]

変数(@を付けて宣言)を使うことで変数を修正するだけで良くなってマス。また子孫セレクタも直感的に階層が分かって、見やすくなってます!(書き方にもよるかも)そして「@middle/2」の部分では「10/2 = 5」という計算を行っています。・・・これは良いものだ。

サイトに適応するには

Node.jsでサーバ側でLESSをCSSに変換することが可能なようですが、とりあえず簡単な方法はJSファイル(less.js)で読み込み時にブラウザ側で変換する方法。Node.jsについては全然分からないです>< 公式サイトのサンプルぽいのを載せてみます。

ブラウザ側でのLESS変換

[html]
<link rel=”stylesheet/less” type=”text/css” href=”(styles.less)”>
<script src=”(less.js)” type=”text/javascript”></script>
[/html]

変数とか入れ子状で記述したLESSファイルを「rel=”stylesheet/less”」として関連付けして読み込み。そして以降にless.jsを読み込みます。ただ、やっぱりブラウザ側で外部ライブラリによって処理する方法はパフォーマンスの低下やブラウザ側の設定に依存する可能性があるみたいですね。

まとめ

LESSを使うとCSSがすっきりします。きっとメンテナンスとか怖くなくなります。使える条件にあるなら積極的に試してみたいですね!ちなみに本家CSSの方も変数や計算が可能になりつつあります。こっちの方も楽しみですねー。

CSSで変数を利用可能に。W3Cが「CSS Variables Module Level 1」ドラフトを公開 (Publickey)