CSS拡張言語“LESS”を利用したWeb開発をサポートするツール「WinLess」

「WinLess」v1.8.3

　「WinLess」は、登録したフォルダにあるLESSファイルをCSSファイルへまとめてコンパイルできるソフト。寄付歓迎のフリーソフトで、編集部にてWindows 8.1で動作を確認した。本ソフトの公式サイトからダウンロードできる。

　本ソフトは“less.js”のGUIフロントエンド。“less.js”はCSSを拡張した動的スタイルシート言語“LESS（Leaner CSS）”をJavaScriptで実装したもので、CSSでは扱うことのできない“変数”“ネスト（入れ子）”“ビルトイン関数”“ミックスイン（Mixins）”といった機能が利用できるようになる。

　たとえば変数を利用すると、繰り返し使う値に名前を付けて管理することが可能。ビルトインの演算子や関数を利用して変数を動的に加工することもできるので、“基準幅にマージンを足した値を実際の幅にする”“背景色より少し暗い色でボックスを縁取りする”といったことが簡単に実現できる。

　一方、“ネスト”はセレクタのブロック内に子セレクタのブロックを書けるようにする機能。セレクタ間の親子・継承関係を明らかにしながらわかりやすく記述することが可能。“ミックスイン”はさまざまな要素で繰り返し利用されるスタイルを切り出して、変数・関数のように再利用できるようにする機能で、記述の簡略化やメンテナンス性の向上に役立つ。

　「WinLess」を利用するには、まずLESSファイルのあるフォルダをメイン画面左側のリストへドラッグ＆ドロップして登録する。すると、そのフォルダ以下に含まれるLESSファイルが右側のリストビューに追加される。あとはCSSファイルへコンパイルするLESSファイルにチェックを入れて［Compile］ボタンを押せば、LESSファイルと同じフォルダにコンパイルされたCSSファイルが出力される。

LESSファイルの例

コンパイルしたCSSファイル（Minifyは無効化）

“less.js”を自動でアップデートする機能も搭載。利用には管理者権限が必要

　CSSファイルの出力先は、LESSファイルの右クリックメニューから変更することも可能。CSSファイルを出力する際に不要な改行・空白を削除してファイルサイズを軽量化する“Minify”を行ったり、LESSファイルが保存された際に自動でコンパイルするよう指定することもできる。

　なお、本ソフトには“less.js”を自動でアップデートする機能が搭載されているが、この機能を利用するには「WinLess」を管理者権限で起動する必要があるので注意。