Sass記法を用いたCSSフレームワーク「Compass」
CSSはプログラマ向けの言語ではないため、最初は理解しやすいが、複雑な記述が入り交じっていくとメンテナンスが困難になる。Webブラウザはよく出来ていて、何となく書いたものでも動作してしまうからさらにややこしい。
コマンドラインオプション
そうした問題に対処するメタ言語として注目を集めているのがSassだ。そしてSassを実用的にプロジェクトに組み込めるのがCompassだ。
今回紹介するフリーウェアはCompass、SassをサポートしたCSSフレームワークライブラリだ。ソースコードは開示されているがライセンスは明記されていなかったのでご注意いただきたい。
Compassは単体でCSSフレームワークをなすわけではない。実際にはBlueprintやYUI、960といった有名なCSSフレームワークを利用している。そしてRailsやMerb、StaticMaticといったアプリケーションサーバと連携することができる。そしてCompassを使ってコンパイルをし、CSSファイルに展開する。
Sassはネストしたプロパティ、親ルールの設定、定数、値の演算、プロパティの設定名付けなどに対応しており視認性の高いCSSが組めるようになる。そこにCSSフレームワークが組み合わさることで、多彩なブラウザに対して手軽にメンテナンスしやすいCSSが組めるようになる。
継続的な運営を続けていくと既存のデザインに影響を与えないよう、クラス名が複雑になったりしてメンテナンス性がどんどん損なわれていく。そろそろCSSにもこのような視認性の良さを取り入れていくべき時だろう。
デフォルトでは上のように表示される
**Home - compass - GitHub