WindowsにLess環境を作ってless2cssで保存時に自動生成させる


window from Verona
Windows環境でLessを使う時は winless を使ってlessファイルからcssファイルを生成していましたが、Sublime Text2の less2css というパッケージを使えば、lessファイル保存時に自動的にcssファイルを生成してくれるということを知ったのでless2cssを使うのに必要なlesscをWindowsにインストールした。

less.js-windowsをダウンロード

まずはlesscをダウンロード。
lesscはduncan smart氏の less.js-windows を使用します。

ダウンロードしたファイルを解凍すると duncansmart-less.js-windows-xxx という名前のフォルダ(xxxは数字)が出てくるので、ファイル名をless.js-windows等に変更してWindowsのパスが通っている場所に配置する。もし配置したい場所にパスが通っていなければ環境設定でその場所へのパスを指定する。
パスの指定は システムのプロパティ→詳細設定→環境変数 でシステム環境変数の Path に追加。

今回は直接less.js-windowsを指定しました。(例:E\lib\less.js-windows)

パスの確認

パスの確認はコマンドプロンプトで path と入力してエンターキーを押せば設定されているパスが表示されます。

コマンドプロンプトでcssファイルを生成する

パスが確認できればコマンドプロンプトを使ってless ファイルからcssファイルを生成します。

コマンドプロンプトを立ち上げてlessファイルが保存されているディレクトリへ移動する。
下のコマンドでlessファイルからcssファイルをコンパイルできる。

lessc [lessファイル名] [生成する.cssファイル名]

正しくパスが通っていればcssファイルが生成されます。

Sublime Text2にless2cssをインストールする

Package Controlを使ってless2cssをインストールします。Package Controlのインストールはこちらを参考にしてください。
Sublime Text2で楽にパッケージの管理ができるSublime Package Controlを入れてみた

ctl+shift+p でコマンドパレットを表示してPackage Control: Install Packageを選択、less2cssと入力すればインストールが始まります。

インストール完了後にSublime Text2を再起動してlessファイルを保存するとコンパイルされたcssファイルも同時に生成されるようになります。これは便利。