Sassでよく使う機能まとめ

CSSのコーディングにSassを使うようになってしばらく。zen-coding同様に手放せないレベルになってきたので、一度整理。ベースを一旦作るとそうそう書き直さないので、結構忘れるんですね… なおここでは、MacのアプリScout v0.7.1に使われているSass 3.2.1の機能をまとめておこうと思います。
と、その前にSass導入の決め手も。
- 多機能
- Compassという便利なヤツの存在
- Sassの方が難しそう=LESS覚えた後の習得は精神的にキツそう
3つ目が結構決め手に。だって後でしんどいのイヤですものー
変数
この機能だけでも神です。
sass
$KeyCol : #000;
.hoge {
color: $KeyCol;
}
css
.hoge {
color: black;
}
ネスト
可読性大幅UP!プロパティもネストできるけど、一括指定する人はさほど使わない?
sass
#hoge {
background: #000;
div {
background: #333;
p {
background: #666;
}
}
}
css
#hoge {
background: #000;
}
#hoge div {
background: #333;
}
#hoge div p {
background: #666;
}
親セレクタの参照
sass
a {
color: blue;
&:hover {
color: red;
}
}
css
a {
color: blue;
}
a:hover {
color: red;
}
@mixin&引数
定型文のようなもの。値を可変にする場合はこちら。
mixinの真価はやっぱり、引数やifなどが使える点。なおデフォルト値を設定する時は、後部にまとめて記述しないとエラーに。
sass
@mixin Border($side, $thick, $style: solid, $col: #000) {
border-#{$side}: $thick $style $col;
}
.hoge {
@include Border(top, 3px, double, #3cf);
}
.fuga {
@include Border(bottom, 1px);
}
css
.hoge {
border-top: 3px double #33ccff;
}
.fuga {
border-bottom: 1px solid black;
}
@extend
こちらも定型文のようなもの。値が固定ならこちら。スタイルを継承し、重複するスタイル指定をひとまとめにしてくれます。
ただ結構複雑で、気を付けないと予想外の結果になりそう。コントロールする自信がない場合はクラスやIDの継承は避けて後述のプレースホルダーを使うようにし、用途もclearfixのような固定スタイルの継承のみに絞るのが安全ぽいです。(もちろん自信無いのでそうします。)
この複雑さは、こちらのサイトが分かりやすかったのでぜひ一読を。
sass
.error {
border: 1px #f00;
background-color: #fdd;
span {
color: red;
}
}
.seriousError {
@extend .error;
border-width: 3px;
}
css
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.error span, .seriousError span {
/* ここにも追加されてしまう */
color: red;
}
.seriousError {
border-width: 3px;
}
プレースホルダー(%)
@extend専用。.や#の代わりに%を使えば、そのセレクタは書き出されなくなります。これで@extendも安全に使える気がします。
sass
%cf {
&:before,&:after {
content:"";
display:table;
}
&:after {
clear:both;
}
zoom:1; /* For IE 6/7 */
}
#header {
@extend %cf;
}
#footer {
@extend %cf;
}
css
#header, #footer {
zoom: 1;
/* For IE 6/7 */
}
#header:before, #footer:before, #header:after, #footer:after {
content: "";
display: table;
}
#header:after, #footer:after {
clear: both;
}
注意点
変数のカラーコード(#000)がカラーネーム(black)に変換されてしまう。
対策
- 文字列型にして管理(ただし、色を扱う関数が使えなくなる)
【例】$KEY_COLOR : #{'#000'}
- 出力設定をcompressedにする
【参考・引用】実践Sass 前編
公式リファレンス
一度は見ておきましょう。たぶん知らない機能が満載です。使わないであろう機能も満載です。
でも使いそうなものをちょっとリストアップ。ifとかeachとか、いつか使うかも?