SASS(SCSS)の@extendは@mediaの中では入れ子に使えない！

SASS(SCSS)の@extendは定義済スタイルを継承しますが、@mediaの中では継承ができません。「You may only @extend selectors within the same directive.」というエラーが出ます。以下、詳しく紹介します。

エラーについて

SASS(SCSS)の@extendは定義済スタイルを継承しますが、@mediaの中では継承ができません。そのため、@mediaを用いた、cssファイル一枚レスポンシブ構築をする際、@extendはけっこう使いにくい記述となります。

※出力されるエラー文

You may only @extend selectors within the same directive.

ソースで言うと、下記のような記述をするとエラーが出力されます。(@include mq()は@mediaのミックスイン記述です。)

@include mq(tablet) {
  display: block;
  @extend %test_code;
}

@mediaの中に、ミックスインだと、問題なく使えます。

@include mq(tablet) {
  display: block;
  @include test_code(test_num);
}

自分の感覚として、extendはスタイルをごそっと引用したい時には確かに使える印象ですが、しかし、継承したセレクタ名がグループ化されて冗長になる点で、イマイチです。一応、「%」のプレイスホルダーセレクタを使えば、グループ化は回避できますが、いちいち面倒です。それに、@mediaの中で使えないとなると、@mediaを使ったcssでは、もはや論外となります。

なので、個人的にはmixinで良いじゃんと感じます。最初の設計の段階で、mixinを準備してきちんと使った方が、最終的にソースが綺麗に仕上がる気がしますので。（一つに統一しておいたほうが、後から読み返しやすいですし。）

まあ、どっちも個人の好き好きになるかと思いますが、両方をごっちゃごちゃに使うと、後から改修する必要が出た時、しっちゃかめっちゃかになりそうなので、あんまりオススメしないです。

参考リンク

・Sass(SCSS)のmixin, extendなどまとめ
https://qiita.com/one-a/items/2758511326c09200fded

・Sassのextendが効かない？
http://webdesign-dackel.com/2014/09/30/sass-extend-notworks/