WebMatrixでLESSを使ってみた

WebMatrix 2をインストールしてみたので、最近使い出したLESSを使って遊びます。環境は以下の通りです。

Windows 7 SP1(x64)
WebMatrix 2（*インストール済み）

WebMatrix 2 で使えるようになったLESS

WebMatrix 2 では CSS の拡張メタ言語である LESSをサポートしています。LESSって何？と言う方はこちらのエントリをご参照ください。

LESSファイルが標準UIから追加できます。

インテリセンスもサポートされています。自分で定義した変数もきちんとでてくるのでとても記述がしやすいです。

また拡張機能としてLESSファイルのCSSへのコンパイルをサポートするOrangeBits Compilerと言うツールが提供されています。メニューの拡張機能をクリックして

LESSなどで検索すると見つかります。 LESSの他にSASS, SCSS, CoffeeScript をサポートしています。

OrangeBits Compilerがインストールさていると、LESSファイルを右クリックして[compile]を選択することで、LESSファイルをCSSにコンパイルできます。

生成されたCSSファイルです。

LESSの実装方法の一つとして、less.jsを使用してクライアント側で動的にLESSファイルからCSSを生成する方法がありますが（下の画像のコメントアウトされている箇所。この方法はこちらでも紹介しています）、事前にコンパイルしておけばWebページにはCSSファイルへの参照を含めるだけです。

OrangeBits Compilerのオプションでは、LESSファイルが変更された場合に、自動的にCSSファイルを再コンパイルするかなどの設定を行うことができます。

less.jsを使用してクライアント側で動的にLESSファイルからCSSを生成する方法はJavaScriptの利用が前提になるなどの問題がありますが、事前にコンパイルすればその心配もなくなりますし、余計なオーバーヘッドも回避できます。これからはLESSファイルにスタイルを定義してCSSにコンパイルして配布といったWebページの作成フローを試して行きたいです。