Sassでよく使う機能まとめ

CSSのコーディングにSassを使うようになってしばらく。zen-coding同様に手放せないレベルになってきたので、一度整理。ベースを一旦作るとそうそう書き直さないので、結構忘れるんですね…　なおここでは、MacのアプリScout v0.7.1に使われているSass 3.2.1の機能をまとめておこうと思います。

と、その前にSass導入の決め手も。

多機能
Compassという便利なヤツの存在
Sassの方が難しそう＝LESS覚えた後の習得は精神的にキツそう

3つ目が結構決め手に。だって後でしんどいのイヤですものー

1 変数
2 ネスト
3 親セレクタの参照
4 @mixin＆引数
5 @extend
6 プレースホルダー（％）
7 注意点
8 公式リファレンス

変数

この機能だけでも神です。

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とか、いつか使うかも？

公式リファレンス

2017-09-25
Code