Rubyによる構造化CSSライブラリ「Less」

2009/06/21

CSSのメンテナンス性の悪さは言うに及ばないだろう。どうとでも書けてしまう手軽さはあるが、ファイルが分かれていたり、ネストしている場所としていない場所があったりするともう管理ができなくなる。ちょっとした変更がどこに影響するかも分からず、もはや触るのが怖くなる。 0

Lessの記述例 0

そんな訳でCSSは慣れれば慣れるほど使い方が難しい代物だ。そこでLessを使って分かりやすく管理してみよう。 0

今回紹介するオープンソース・ソフトウェアはLess、プログラミング的に記述するCSSライブラリだ。

Lessはコマンドラインのツールで、lesscというコマンドを利用する（lessは別コマンドで既に存在するので）。そして専用ファイルの.lessを変換し、.cssファイルを生成する。デザイナの方はCSSファイルを直接触らないようにする必要がある。 0

変換例

利用できる機能としては変数、階層構造、Mixin、計算がある。変数は例えば色をまとめて変更したりする際に一度変数として定義して後はその変数を使い回す機能だ。階層構造はクラスをネストして定義しておくことで、展開してくれる機能だ。 0

Mixinは別なクラスの定義をまとめて取り込める機能だ。通常のCSSでは横に並べて定義するのだが，こちらの方が分かりやすい。計算は変数と似ているが、数値であれば+1pxのような計算を埋め込めるようになっている。 0

CSSはデザイナの方が使うものではあるが、メンテナンスがしやすければデザインの使い回しもしやすくなるだろう。Lessの書式は通常のCSSとそれほど変わらない、ぜひこれを習得してメンテナンスしやすいCSSの記述をしよう。 0

LESS - Leaner CSS
　http://lesscss.org/

MOONGIFTの関連記事