Sass(SCSS)のmixin, extendなどまとめ

Sass(SCSS)のややこしそうな機能まとめ。

変数

共通な色や数値などを定義しておける。
他に、文字列や真偽なども定義可能。

style.scss

$baseColor: #1967D3;

h1 {
  background-color: $baseColor;
  color: #fff;
}

style.css

h1 {
  background-color: #1967d3;
  color: #fff;
}

mixin

引数を使うことができる。
初期値を設定しておくことも可能。
定義しても、@includeで呼び出さないと使えない。

style.scss

@mixin border($color:#666) {
  border-bottom: 1px solid $color;
}

#header {
  @include border(#999); 

  #gnav {
    overflow: hidden;
    @include border;
  }
}

style.css

#header {
  border-bottom: 1px solid #999999;
}

#header #gnav {
  overflow: hidden;
  border-bottom: 1px solid #666666;
}

引数の初期値を入れたい場合は、「:」の後に値を入れる。

@mixin border($color: #666) {
  border-bottom: 1px solid $color;
}

引数を複数指定したい場合は、「,」で区切る。

@mixin box($color: #666, $width: 300px, $height: 300px) {
  border: 1px solid $color;
  width: $width;
  height: $height;
}

引数使わないときは以下の書き方でOK。()なくて良い

@mixin border {
  border-bottom: 1px solid #999;
}

extend

定義しているスタイルを継承する。
コンパイルすると、セレクタがグループ化される。
グループ化した状態にしたくない場合は、extendにしない方が良いかも。

style.scss

.box {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;

  p {
    line-height: 1.3;
  }
}

.contentsBox {
  @extend .box;
  background-color: #eee;
}

style.css

.box, .contentsBox {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;
}

.box p, .contentsBox p {
  line-height: 1.3;
}

.contentsBox {
  background-color: #eee;
}

extendする元のスタイルをCSSに出したくないとき、プレイスホルダーセレクタを使う。
「#」や「.」の代わりに「%」で定義する。

定義しても呼び出さないと使えないのは、@mixinと同じ。
（Sass3.2から追加された機能）

style.scss

%box {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;
}

.contenteBox {
  @extend %box;
  p {
    line-height: 1.3;
  }
}

.noteBox {
  @extend %box;
}

style.css

.contenteBox, .noteBox {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;
}

.contenteBox p {
  line-height: 1.3;
}

mixinとextendまとめ

mixin

・何度も使うスタイルを定義できる
・引数を使える
・@includeで呼び出さなければ使えない

extend

・定義したスタイルを継承（入れ子になっているものも全て）
・グループ化される
・プレイスホルダーセレクタ（%hoge）で定義したものを@extendできる

どっちを使った方が良いかは、シーンによって変わりそうです。
適宜、より良い方をセレクトする必要がありますね。