【Node.js】LESSをCCSに変換

lessだと一度less.jsで変換する必要がある。 軽量なlessであれば問題ないが、大きいlessだとパフォーマンスに響く。 そこで、前もってlessをccsへ変換するやり方をメモしておきます。

Node.jsインストール

lessの公式ドキュメントを参照すると、以下が必要。

$ npm install -g less

Node.jsがない方は、以下からダウンロード。

nodejs.org

インストールはそのまま次へ、次へで問題なし。 インストール完了後、dosで以下のコマンドを実施。

$ npm install -g less

ccsへ変換

Lessコンパイラ(lessc)を用いて、Less ファイルをコンパイルします。 下記の例では、style.lessファイルをstyle.cssファイルにコンパイル(変換)しています。

$ lessc style.less style.css

また、minifiedされたCSSファイルを作成することができます。 プラグインが必要なため、以下のコマンドからless-plugin-clean-cssプラグインをインストール。

$ npm install -g less-plugin-clean-css

インストール完了後、以下のコマンドを実施すると、 minifiedされたCSSファイルを作成することができます。

$ lessc --clean-css styles.less styles.min.css