2015.2.13
MacでこれからSass(Compass)を始める!実践編
こんにちは。
遠藤です。
いよいよ実践編です。
ひたすらサンプルを書いていきます!
Sass
入れ子
Sassは入れ子形式で記述できます。
#contents { width: 600px; p { margin: 0 0 1em; em { color: #f00; } } }
コンパイルすると
#contents { width: 600px; } #contents p { margin: 0 0 1em; } #contents p em { color: #f00; }
変数
sassは変数が使えます
$red: #FF0000; .title { color: $red; } #contents { .infomation { border: 1px solid $red; } }
コンパイルすると
.title { color: #ff1122; } #contents .infomation { border: 1px solid #ff1122; }
アンパサンド(&)
疑似クラスや親要素を参照することができます。
.contents{ background: #FFF; &:hover{ background: #000; } &.brother{ background: #333; } .main &{ background: #999; } }
コンパイルすると
.contents { background: #FFF; } .contents:hover { background: #000; } .contents.brother { background: #333; } .main .contents { background: #999; }
演算
sassは演算子だってかけちゃいます。
.contents{ margin: 10px * 10; width: 100px - 10 * 2; height: (100px / 2); }
コンパイルすると
.contents { margin: 10px; width: 80px; height: 50px; }
※除算のばあい、括弧が必要です。
round
sassでは四捨五入の関数も準備されてます。
round()は小数点以下を四捨五入してくれます。
.contents{ width: (51px / 2); height: round(51px / 2); }
コンパイルすると
.contents { width: 25.5px; height: 26px; }
rgba
sassでは16進数で入力したカラーコードをRGBA形式に変換できます。
.contents{ background: rgba(#ff0000,0.8); }
コンパイルすると
.contents { background: rgba(255, 0, 0, 0.8); }
Mixins
sassでは変数より便利なMixinsという複数定義ができます。
@mixin mix-border($value: 5px) { -webkit-border-radius: $value; -moz-border-radius: $value; border-radius: $value; } .contents-a { @include mix-border; } .contents-b { @include mix-border(10px); }
コンパイルすると
.contents-a { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .contents-b { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
コメント
Sassではコメントが2パターンあります。
「//」と「/* */」です!
// css入らないコメント .sample-a{ color: #000; } /* cssに入るコメント */ .sampe-b{ color: #000; }
コンパイルすると
.sample-a{ color: #000; } /* cssに入るコメント */ .sampe-b{ color: #000; }
セレクタの継承
Sassではセレクタの継承ができます。
h1 { border: 4px solid #ff9aa9 } .speaker { @extend h1; border-width: 2px; }
コンパイルすると
h1, .speaker { border: 4px solid #ff9aa9; } .speaker { border-width: 2px; }
compass
さらにコンパスを使うとこんなに便利に!
Clearfix
クリアフィックスをする場合、下記の様に書きます。
@import "compass/utilities/general/clearfix"; .sample { @include clearfix; }
コンパイルすると
.sample { overflow: hidden; *zoom: 1; }
radius
角丸のベンダープレフィックスもcompassなら一行で!!
@import "compass/css3/border-radius"; .sample { @include border-radius(5pc); }
コンパイルすると
.sample { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }
box-shadow
ボックスシャドウのベンダープレフィックスもcompassなら一行で!!
@import "compass/css3/box-shadow" .sample { @include box-shadow(1px 2px 3px #444); }
コンパイルすると
.sample { -webkit-box-shadow: 1px 2px 3px #444444; -moz-box-shadow: 1px 2px 3px #444444; box-shadow: 1px 2px 3px #444444; }
compassには上記以外にヘルパーや、ページレイアウトの支援などここでは紹介しきれないほど高機能です。
ここの記事なんかより、公式http://compass-style.org/を見たほうが・・・