ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSSはプログラマ向けの言語ではないため、最初は理解しやすいが、複雑な記述が入り交じっていくとメンテナンスが困難になる。Webブラウザはよく出来ていて、何となく書いたものでも動作してしまうからさらにややこしい。


ピクチャ 58.png

コマンドラインオプション

 

そうした問題に対処するメタ言語として注目を集めているのがSassだ。そしてSassを実用的にプロジェクトに組み込めるのがCompassだ。

今回紹介するフリーウェアはCompass、SassをサポートしたCSSフレームワークライブラリだ。ソースコードは開示されているがライセンスは明記されていなかったのでご注意いただきたい。

Compassは単体でCSSフレームワークをなすわけではない。実際にはBlueprintやYUI、960といった有名なCSSフレームワークを利用している。そしてRailsやMerb、StaticMaticといったアプリケーションサーバと連携することができる。そしてCompassを使ってコンパイルをし、CSSファイルに展開する。


ピクチャ 57.png

Sassはネストしたプロパティ、親ルールの設定、定数、値の演算、プロパティの設定名付けなどに対応しており視認性の高いCSSが組めるようになる。そこにCSSフレームワークが組み合わさることで、多彩なブラウザに対して手軽にメンテナンスしやすいCSSが組めるようになる。

継続的な運営を続けていくと既存のデザインに影響を与えないよう、クラス名が複雑になったりしてメンテナンス性がどんどん損なわれていく。そろそろCSSにもこのような視認性の良さを取り入れていくべき時だろう。


ピクチャ 59.png

デフォルトでは上のように表示される

 

Home - compass - GitHub

 http://wiki.github.com/chriseppstein/compass

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2