[Sass,@extend]Sassの@extendの使い方。セレクタの継承ってことだけども・・・

今回はSass行くよ！@extend行くよ！
@mixinとどう区別したらいいのか分からない！って人もヒントになればいいと思うよ！てか答えはまとめに書いたよ！

@extendの基本的な使い方

そもそも@extendっていうのはセレクタの継承が目的で、なんども同じことを書くのは止めようねってことだと思います。
実例をあげるとこんな感じ↓

.hoge {
    border: 1px solid #777;
    margin: 0 auto;
}

.fuga01 {
    @extend .hoge;
}
.fuga02 {
    @extend .hoge;
    background: #ccc;
}

↓コンパイル後

.hoge, .fuga01, .fuga02 {
  border: 1px solid #777;
  margin: 0 auto;
}

.fuga02 {
  background: #ccc;
}

のようになり、.hogeのborderとmarginを何度も書かなくて済むわけですね。

そこでちょっとレベルアップしてみましょう。

@extendをPlaceHolderクラスにしてみる

先ほどの例で言うと.hogeはCSSに出力しなくていい場合も出てきます。
要するに.hogeを変数っぽく使うわけです。

%hoge {
    border: 1px solid #777;
    margin: 0 auto;
}

.fuga01 {
    @extend %hoge;
}
.fuga02 {
    @extend %hoge;
    background: #ccc;
}

↓コンパイル後

.fuga01, .fuga02 {
  border: 1px solid #777;
  margin: 0 auto;
}

.fuga02 {
  background: #ccc;
}

%hogeのように頭に「％」を付けるのをPlaceHolderクラスと言い、hogeは出力されなくなります。
@extendも「％」を付けるのを忘れずに。

まとめ

実はこの使い方、@mixinの使い方その物だとお思いでしょうが、@mixinでのPlaceHolderクラスのような使い方はNGらしく、@mixinは変数を備えた使い方をしなければならないようです。
「[Sass]@mixinでスタイルを使いまわしてもっと楽しよう」の後半部分が正解。
Sassって奥が深いですね。