プログラマー向けのCSS:LESS The dynamic stylesheet language

今週もまた登場してしまいました、チーフエンジニアの菊池です。みなさんこんにちは。

さて、唐突ですが、スタイルシートを書いていて、
「配色とか変数で指定したいなぁ [1]」って思ったことありませんか？
僕の妄想だと、こんな感じです:

@color = #000000;

#header {
  background-color: @color;
}

それと、しょっちゅう思うのが、
「宣言ブロックの中に、入れ子でセレクターと宣言ブロックを書けないものか？、さらに入れ子で...」
これも僕の妄想だと、こんな感じです:

#header {
  background-color: #000000;

  .title {
    color: #ffffff;
    font-weight: bold;
  }
}

僕はCSSを書いている最中、たびたびこういう思いに駆られ、いくぶん悶々としていました。
おかげで少し痩せた気がします。

さて、これから紹介する「LESS」を使うと、そんな僕の妄想が全て実現してしまうのです。僕が「あればいいのにー」と思っていた機能は網羅していていて、さらに「たしかに、こうなっていると便利かも」といった機能もありました。そんなわけで、僕と同じように悶々としていたあなた！チェックしてみてください！

LESS - The dynamic stylesheet language
http://lesscss.org/

詳しい使い方は次回！
(･ω･)ノ

菊池

[1] W3CではCSS内で変数を使えるように仕様が検討されているようです
CSS Variables Module Level 1
http://www.w3.org/TR/2012/WD-css-variables-20120410/