出た、構造化CSS「CleverCSS」 // MOONGIFT Archived

前にCSSの記述テクニック階層宣言コーディングというエントリーを読んだ。これはエイプリルフールネタではあるが、同じ事を考える人は他にもいるようだ。そして、それをネタとしてではなく、ないなら実現してしまおうと考える。

今回紹介するオープンソース・ソフトウェアはCleverCSS、構造化CSSを実現するソフトウェアだ。

CleverCSSはPythonで提供されるソフトウェアで、元になるCSSをベースに変換したCSSを出力する仕組みになっている。かなり面白い機能が盛り込まれているので順番にご紹介しよう。

まず構造化。Pythonのように階層を意識して書く事で、上の階層の名前を継承しつつ記述されていく。この時、{}をつける必要がなく、YAMLのような感じで書ける。

次は名前の収束だ。a:hover、a:visitedのような同じような定義の場合、a: &:hover: &:visitedのようにまとめてしまう事ができる。aでは文字数の省略にはならないが、他にも使い道があるので、その際にはきっと便利に使えるはずだ。

更に発展させて、font-size/font-styleのような定義をfont->でまとめてしまう事もできる。同様の定義が多い場合は便利だ。

変数の定義もできる。back = #cccと定義すると、$backで呼び出す事ができる。これは便利だ。さらに数値計算の結果を埋め込む事も可能なので、3カラムの計算等に便利そうだ。細かな点だが、1cm + 1mmで11mmと答えが返ってくると言う便利機能や、色の足し算/引き算もできる。

他にもメソッドの定義や、RGBとHexの相互変換等便利な機能が数多く存在する。すぐに情報が散在し、メンテナンスが面倒なCSS、CleverCSSを使って上手な管理をしてみよう。