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

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

@extendの基本的な使い方

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

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

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

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

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

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

まとめ

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク