• LESSのlesscをWindows環境で使う話

    2012年06月08日 20時25分
    ある程度大きい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に追加しておくとさらに便利でしょう。
    バッチファイルをもう少し変えてドラッグ & ドロップ出来るようにしても良いかもしれません。

    コメントを書く

    名前
    本文
    編集用パスワード
    管理者のみ閲覧