この記事は賞味期限切れです。（更新から1年が経過しています）

この記事の情報は古くなっています。
現在のLessはRubyではなくJavaScriptベースを基本として開発されています。

LESS – Leaner CSS
LESSというのはCSSをより便利でスマートな記法に拡張する為のRubyプロジェクトですが、
そのJavaScript版が開発されている模様です。

LESSってなぁに

LESS – Leaner CSS
まずはLESSについて軽くメモ。
LESSはCSSに様々な機能を提供する為のプロジェクトです。
変数を扱ったり、関数のような記述をしたり、プロパティ内で計算したり…
さらには、無駄のないように最適化を施してくれます。なんという愛。

Ruby版の詳しい導入方法と記法は別記事を見ていただくとして、これは便利ですね。
重複した記述をしなくて済むようになりますし、
スタイルを一元管理し易くなります。
ネストする記法も直感的で大変分かりやすいです。

JavaScriptで動くLESS

そんなLESSをJavaScriptで動かす為のプロジェクトがこちらです。
lesscss – Project Hosting on Google Code
上記のリンクよりdownloadへ進んでスクリプトを取得しましょう。

簡単な使い方。

まずスタイルシートの拡張子を「.less」としてリンク要素で埋め込みます。

<link rel="stylesheet/less" href="style.less" />

次に、less.jsを読み込みます。（順番が逆ではいけません）

<script type="text/javascript" src="less.js"></script>

これであとはless.jsさんがstyle.lessの中身をLESSルールに則って展開してくれます。

※本稿執筆時のバージョンは1.0.22。IEではエラーが発生。
ChromeはローカルでのテストのみXmlHTTPRequestの都合上動きません。

nettuts+でチュートリアル動画が公開されていましたので、こちらもご参考迄。
Quick Tip: You Need to Check out LESS.js | Nettuts+

こんなふうに活用したい

静的なページスタイルを全てJavaScriptに依存してしまうのは、よろしくない。
現状の使い道としては、ローカルテスト用としてJavaScript版を使用して、
本番化の際にはRubyで書き出してリンクを貼りなおす、といった感じでしょうか

ただ、せっかくJavaScriptで開発してくれているので、
JSLintやZen-Codingのようにエディタのプラグインとして導入して、
編集しながら簡単に展開出来る！という形になれば素晴らしいですね。
Zen-Coding + LESSで開発速度が一気に加速しそうです。