extendで​Sassから​出力される​CSSを​スッキリさせる

公開

更新

Sassのeachとかforの繰り返しって便利ですよね。色んな方がご紹介されているのですが、繰り返しのソースサンプルって下記のような物が多くて自分も見よう見まねでなんとなくそうしてました。（メニューとかで現在地だけ表示を変えるみたいなスタイル）

SCSS
$gHeaderMenu: index, about, archive; /* メニューのクラス名配列 */
@each $current in $gHeaderMenu {
  body.#{$current} .globalNav li.#{$current} a {
    color: #333333;
    font-weight: 700;
    text-decoration: none;
  }
}

出力されたコードを見てみると

CSS
body.index .globalNav li.index a {
  color: #333333;
  font-weight: 700;
  text-decoration: none;
}
body.about .globalNav li.about a {
  color: #333333;
  font-weight: 700;
  text-decoration: none;
}
body.archive .globalNav li.archive a {
  color: #333333;
  font-weight: 700;
  text-decoration: none;
}

となっててちょっとモヤモヤしました。普通にCSS書くのであれば、下記のように書いてたんですよね。

CSS
body.index .globalNav li.index a,
body.about .globalNav li.about a,
body.archive .globalNav li.archive a {
  color: #333333;
  font-weight: 700;
  text-decoration: none;
}

なので、ここはextend使って

SCSS
%gHeaderMenuItem {
  a {
    color: #333333;
    font-weight: 700;
    text-decoration: none;
  }
}
@each $current in $gHeaderMenu {
  body.#{$current} .globalNav li.#{$current} {
    @extend %gHeaderMenuItem;
  }
}

placeholder selector書いて、順次それを継承する感じにすると、以前書いたようにスッキリした出力に出来ました。いや好みの問題かもしれませんが、CSSプリプロセッサーすごいぞーつよいぞーってなるだけではなくて、出力されるCSSにも気を配らなきゃなーと思いまして。

extendも、あるスタイルを色々な要素で継承させると出力されたCSSではセレクタがダーッと羅列されててうへえってなりますけど、プリプロセッサー前提で構造とスタイルを分離して管理するなら、出力されるコードは割り切る部分もあると思いますし、要件に合わせてって感じでしょうか。