さて、唐突ですが、スタイルシートを書いていて、
「配色とか変数で指定したいなぁ [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/