4週連続ブログ当番の松井です。
サイコロ恐怖症になりそうです。
前回はCompassの初期設定だったので、
Compassの使い所~CSS3編~について書いていきます。
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の使い所~CSS3編~ でした。
もしまたサイコロが当たってしまった場合は、他の使い所についても書いていこうかと思います。。