[Sass,Compass,CSS]Sassの醍醐味Compassを使ってもっと楽しちゃおう！

やっぱりSass使い始めたらCompassじゃないっすかねー知らんけど。
世の中そんな流れだし実際すばらしいので記事にしちゃうわけよw

Compassってなによ？

Sassを元に開発されたフレームワークです。
お気に入りなのはCompassを使うとCSS3のベンダープレフィックスを自動で入力してくれるってとこですねー。
その他、豊富な@mixinとかスプライト自動作成とかもありますね。

Compassを使ってみる

Compassがインストール済みとして進めますね。
まずはCompassをインポートする必要があります。

@import "compass";

Sassファイルの先頭あたりに↑↑↑を挿入しましょう。

では例として角丸の影付きの.hogeでも作ってみましょう。

.hoge {
    @include border-radius;
    @include box-shadow;
}

↓↓↓コンパイル後↓↓↓

.hoge {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #333333;
  -webkit-box-shadow: 0px 0px 5px #333333;
  box-shadow: 0px 0px 5px #333333;
}

いかがです！なんてすばらしい！

値を独自に指定したいこきはプロパティ名のあとに（）で指定してあげれば指定できます。

.huga {
    @include border-radius(10px);
    @include box-shadow(0 0 10px #ccc);
}

↓↓↓コンパイル後↓↓↓

.huga {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}

クロスブラウザも対応

.hogehoge {
    @include opacity(0.8);
}

↓↓↓コンパイル後↓↓↓

.hogehoge {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

こんな感じでクロスブラウザにも対応しています！

他にCSS3は何が対応してる？

公式サイトのほうに一覧がありますので、そちらを参考にどうぞ。
http://compass-style.org/reference/compass/css3/

これ豆な！

実はclearfixもComapssに用意されてるんです！

.clearfix {
  @include pie-clearfix();
}

↓↓↓コンパイル後↓↓↓

.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

まとめ

前回までの「Sass初めて2週間のおじさんが基本をまとめてみる」と「@mixinでスタイルを使いまわしてもっと楽しよう」と合わせてマスターすればCSSを書くのが物凄く楽になりそうですね。