cssでは背景に画像を指定することが良くあります。普通はbackground-image: url(../images/bg.png); のように書くことでしょう。しかしこの方法ではフォルダレイアウトを変更すると、すべての指定を書き換えなければなりませんし、CMSではこのような相対指定が使えない場合もあります。このような不便を解消するためにcompassでは画像を特別な方法であつかいます。

最近よく言われるデザインパターンに「グリッドレイアウト」というものがあります。その名の通り規則正しい「グリッド」を想定し、それに添ってレイアウトデザインを行うという手法です。別に新しい考え方というわけではなく、エディトリアルデザインでは一般的な考え方なのですが、Webデザインの世界でも良く聞くようになりました。「フラットデザイン」もそうですが、派手なグラフィックでゴテゴテと飾り立てるデザインではなく、「情報を機能的に見せる」デザインパターンにシフトしてきているのかもしれません。さてこのグリッドレイアウトを簡単に実現するために、いくつかのcssフレームワークが開発されています。「960 Grid System」が有名ですが、compassではBlueprintというフレームワークを統合しています。ここではその使い方を説明します。