こんにちは『Less & Sass Advent calendar 2011』4日目。Sig.@sigwygがお送りします。「ハードル下げるよ」と言っていたtacamyが文量ある良記事を上げており、高まるハードルに恐々としている今日この頃。皆さん如何お過ごしでしょうか。まあ僕はマイペースで行きます。久しぶりのBlog記事ですしね！（言い訳）
さて、小狡く予防線を張ったところでLESS紹介です。LESSはCSSに変数やら関数やらネストやらを実装します。Sassと同じようなCSS拡張とかメタ言語とか言われるモノです。この辺りの解説はdebiruくんの記事が詳しいので割愛。
要するにhoge.lessとかファイル作って、変数とか織り交ぜて書いておくと...
// ベンダープレフィックスとか書いておく
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// 呼び出すと1行で終了
#header {
.rounded-corners;
}
// 値も適宜に変更可能
#footer {
.rounded-corners(10px);
}
このファイルを解析して、以下のようなCSSファイルに変換（コンパイル）してくれます。
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
変数を示す記号に@が使われている辺り、@mediaとか@importみたいな@ルールみたいで紛らわしいなとか多少は思ったりしますが、LESSファイルの記述(「LESS記法」って言って良いのかな？)そのものは慣れ親しんだCSSとほとんど同じですし、変数とか関数とかインクルードとか簡単な計算機能とか使ってすっきりと書くことができる。なんだったら、そのまま普通にCSS書いてても良いし。