ある程度大きいCSSを書いていると、変数とか継承とかが欲しくなります。

「CSS3で見た目の派手さもいいけどさ、もっとこの辺の文法を何とかしろよ。お前らもっと出来るはずだろ？」

と、いつも思っていたのですが、こういう物があることを最近知りました。
LESS ≪ The Dynamic Stylesheet language

CSS用のプリプロセッサ的な物です。
Javascriptで作られており、これを使用することでlessファイルをそのままブラウザで読み込むことが出来ます。
正に私の欲しい機能が全て入っていたので、今後CSSを書くときはこれを使おうと思います。



ところで、公式で配っているのは前述の通りJavascriptで動作するインタプリタのようなものです。
これですとJavascript OFFの環境ではCSSが効かなくなってしまいます。

今時Javascriptが動作しない環境を使ってるのは群馬県民くらいだとは思いますが、
昔からJavascript OFFの環境も考慮せよと刷り込まれてきた私には馴染むことが出来ません。

個人的にはlessファイルをcssファイルに変換してくれればそれでよいのです。


そこで、単純な変換プログラムが無いか探してみたのですが、
lesscというnode.jsで動作するものしか見つかりません。

仕方ないのでこれを使おうとしたのですが、使う為に一手間かかったのでメモっておきます。
(Windows上で動かす設定です)


まずこのlesscと依存ライブラリダウンロードします。
これはgithubからtarかzipで落とせばいいでしょう。
GitHubダウンロードページ

gitクライアントがある人はそれで落としてもいいと思います。

ファイルの中で使うのはbinとlibフォルダだけです。
他は消してしまって問題有りません。


次にこれを実行する環境を用意します。
環境といっても、node.jsをWindows上で動かすにはnode.exe一つあれば良いです。
ダウンロードページからOther release filesを開くと置いてあります。
Node.jsダウンロードページ

ダウンロードしたnode.exeを先ほどのbinフォルダに入れます。


ここまで用意すると、lesscを以下のように動かせます。

bin\node.exe bin\less 入力.less 出力.css

さらに使いやすくする為に、以下のようなバッチファイルも用意しました。
lessc.bat

@"%~dp0\bin\node.exe" "%~dp0\bin\lessc" %*

これを使用すると以下のように使えます

lessc 入力.less 出力.css

最終的には以下のようなフォルダ構成になります。

• lessc.bat
• bin
  • node.exe
  • lessc
• lib
  • less
    • tree
    • browser.js
    • 以下省略

このフォルダを環境変数PATHに追加しておくとさらに便利でしょう。
バッチファイルをもう少し変えてドラッグ & ドロップ出来るようにしても良いかもしれません。