1.Compassをインストール

Compassをインストールするには、SASS同様、Rubyがインストールされている必要があります。
Macの方は元々入ってるので、心配無用です。Linux使ってる人なら、自分で入れれるでしょう。
Windowsの方はお近くのAppleStoreで(ry。嘘です。
Ruby Install Guideを参考にすればいいと思うよ。

ターミナルで下記のコマンドでインストール

gem update --system
gem install compass

これでインストールは完了。

2.初期設定

インストールが完了したら、Compassのコマンドが使える様になってるはずなので、コマンドでサクっと初期設定します。
ターミナルで、SASSファイルや、cssを置く予定の場所で、下記のコマンドを実行します。

compass create

実行するとこんな感じのファイルが生成されます。

├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

自分の場合、CSSファイルは”css”ってフォルダ名にしたいので、ちょろっと、オプションを付けます。
あと、画像用のフォルダと、JavaScript用のフォルダも設定しておきます。あとで、config.rbを編集すればいつでも変更はできます。

compass create --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"

SASSシンタックスを使いたい場合

デフォルトではSCSSのシンタックスなので、SASSシンタックスを使いたい場合もオプションで変更できます。
SCSSの方がCSSっぽくて楽だと思いますけど。

compass create --syntax sass

これで初期設定は完了。

他にも色々な設定があるので詳しくは公式のConfiguration Referenceを参考にしてください。

3.Compassの機能をインポート

Compassには様々なMixinやスタイルが用意されています。使い方は簡単で、@importでインポートするだけです。

@import "compass/css3/border-radius"; /* CSS3のborder-radiusのみインポート */
@import "compass/css3/"; /* CSS3関連のMixinを丸っとインポート */
@import "compass/utilities" /* クリアフィックス等のユーティリティ系Mixinをインポート */
@import "compass" /* コンパスの機能を全部インポート 基本的にはこれだけでOKだと思います。　*/

@import "compass/reset/" /* リセット用CSSをインポート */;

上記のresetに関してはMixinではなく、CSSそのものなので、インポートした場所にEric Meyer’s reset 2.0をベースにしたスタイルが書きこまれます。

4.SASSファイルからCSSファイルを生成

SCSSファイルからCSSを生成するには、SASS同様コマンドラインでコンパイル or ウォッチします。

コマンド

compass compile sass/style.scss
compass watch sass/style.scss #変更を監視して、保存の度にコンパイル
compass watch --output-style compressed sass/style.scss #一行に圧縮

たったこれだけです。SASSの場合、出力先のCSSファイル名も指定しなきゃいけなかったけど、Compassは最初に設定しているので、必要ありません。

設定したCSS用フォルダに同じ名前(この場合style.css)のCSSファイルが生成されます。

5.Compassを使って書いてみる。

Clearfix

例えばクリアフィックスをする場合、下記の様に書きます

Compass (SCSS)

@import "compass/utilities/general/clearfix";

.sample {
    @include clearfix;
}

CSS

.sample {
    overflow: hidden;
    *zoom: 1;
}

こんな感じで出来上がり。でも、これぐらいなら、あんまり便利さが実感できませんね。

コンフィグレーション変数とMixinの組み合わせ

Compassにはコンフィグレーション変数という機能があります。
プロパティに対して、デフォルトのバリューが用意されており、デフォルトのバリューを使う場合は、省略することができます。
もちろん、各自変数の中身を上書きすることができます。

Compass (SCSS)

@import "compass/css3/border-radius";

//$default-border-radius:5px; /* compassの初期設定 */
$default-border-radius:10px;  /* 上書き */

.sample1 {
    @include border-radius; /* デフォルトを使用してバリューを省略した場合 */
}

.sample2 {
    @include border-radius(2px); /* 通常の使い方 */
}

CSS

.sample1 {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   -ms-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
}

.sample2 {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   -o-border-radius: 2px;
   -ms-border-radius: 2px;
   -khtml-border-radius: 2px;
   border-radius: 2px;
}