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

web制作

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/

最後に一言

ミックスインって、なんかサーティワンアイスみたいな美味しい響きある。

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

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


本記事のシェアはこちらから!

  • このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

本ブログ・WebMakeBlog KIYOTATSUを運営しているYoshiと申します。普段はWEB制作をやっています。得意なのは要件定義や構築で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。