makurazaki.org
[Sass,Compass,CSS]Sassの醍醐味Compassを使ってもっと楽しちゃおう! | Maku_zin Ver2.1.1
やっぱりSass使い始めたらCompassじゃないっすかねー知らんけど。 世の中そんな流れだし実際すばらしいので記事にしちゃうわけよw Compassってなによ? Sassを元に開発されたフレームワークです。 お気に入りなのはCompassを使うとCSS3のベンダープレフィックスを自動で入力してくれるってとこですねー。 その他、豊富な@mixinとかスプライト自動作成とかもありますね。 Compassを使ってみる Compassがインストール済みとして進めますね。 まずはCompassをインポートする必要があります。 Sassファイルの先頭あたりに↑↑↑を挿入しましょう。 では例として角丸の影付きの.hogeでも作ってみましょう。 ↓↓↓コンパイル後↓↓↓ いかがです!なんてすばらしい! 値を独自に指定したいこきはプロパティ名のあとに()で指定してあげれば指定できます。 ↓↓↓コンパイル後↓↓↓ クロスブラウザも対応 ↓↓↓コンパイル後↓↓↓ こんな感じでクロスブラウザにも対応しています! 他にCSS3は何が対応してる? 公式サイトのほうに一覧がありますので、そちらを参考にどうぞ。 これ豆な! 実はclearfixもComapssに用意されてるんです! ↓↓↓コンパイル後↓↓↓ まとめ 前回までの「Sass初めて2週間のおじさんが基本をまとめてみる」と「@mixinでスタイルを使いまわしてもっと楽しよう」と合わせてマスターすればCSSを書くのが物凄く楽になりそうですね。