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

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

Compassってなによ?

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

Compassを使ってみる

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

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

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

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

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

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

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

クロスブラウザも対応

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

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

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

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

これ豆な!

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

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

まとめ

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク