Compassの機能を読み込む

Mixinを読み込む

//個別にインポート
@import "compass/css3"
@import "compass/typography"
@import "compass/utilities

//上3つをまとめてインポートしたい場合
@import "compass"

CSSを読み込む

@import "compass/layout"
@import "compass/reset"

リセットCSSなど独自のものを使いたい場合は
読み込まなくてもよいかと思います。

CSS3を使う

めんどくさいベンダープレフィックスもサクサクつけてくれます。

例えば角丸の指定の場合…

@import "compass/css3";
.sample {
    @include border-radius(5px);
}

と書けば

.sample {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

と勝手に吐き出してくれます。

また、Compassはデフォルトの値を持っています。
border-radius　の場合は5px　の値を既に持っているので

@include border-radius

これだけで角丸5pxの設定がサクっとできます。

ちなみに、デフォルトの値を上書きすることも可能です。

$default-border-radius:10px;

その他のCSS3プロパティについては公式を参考にしてください。

プレフィックスの出力を変更したい場合

クロスブラウザサポートの設定はこんなかんじです。

		変数					初期値
IE6＆7		$legacy-support-for-ie 			true
IE6		$legacy-support-for-ie6 		$legacy-support-for-ie
IE7		$legacy-support-for-ie7 		$legacy-support-for-ie
IE8		$legacy-support-for-ie8 		$legacy-support-for-ie
Mozilla		$experimental-support-for-mozilla 	true
WebKit		$experimental-support-for-webkit 	true
WebKitグラデ	$support-for-original-webkit-gradients	true
opera		$experimental-support-for-opera 	true
microsoft	$experimental-support-for-microsoft 	true
KHTML		$experimental-support-for-khtml 	false
SVG		$experimental-support-for-svg 		false
CSS PIE		$experimental-support-for-pie 		false
Firefox 3.6以前 $legacy-support-for-mozilla 		true

この値をいろいろいじってやることで、
簡単にプレフィックスの出力を変えることが出来ます。

CSS3の記述を更に快適にする

よくありそうなデザインに関してはあらかじめいくつかMixinを作っておくと便利です。
個人的には最近、zurui-designを参考にMixinをいくつか用意してみたところ、ものすごく快適になりました。

SCSS

// いいかんじの線
@mixin line-top($op1:.2,$op2:.3){
  border-top: 1px solid rgba(0, 0, 0, $op1);
  @include box-shadow(rgba(255, 255, 255, $op2) 0 1px 0 inset);
}

// 読み込み
.sample {
  @include line-top(1,.1);
}

CSS

.sample {
  border-top: 1px solid black;
  -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0 inset;
  -moz-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0 inset;
  box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0 inset;
}

こんなかんじで、簡単に色の調節や、ぼかし具合などを変更できます。
便利ですね！Compass!

以上、Compassの使い所～CSS３編～　でした。
もしまたサイコロが当たってしまった場合は、他の使い所についても書いていこうかと思います。。