質問

アイテムクラスとコンパクトなモディファイアクラスがあります。

.item { ... }
.item.compact { /* styles to make .item smaller */ }

これでいいんです。しかし @media クエリを追加して、強制的に .item クラスがコンパクトになるように強制するクエリです。

最初に考えたら、こんなことをやってみた。

.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
  .item { @extend .item.compact; }
}

しかし、これでは以下のようなエラーが発生します。

外部セレクタを @media 内から拡張することはできません。できるのは extend selectors within the same directive.

SASSを使用して、スタイルのコピー＆ペーストに頼ることなく、どのようにこれを達成するのでしょうか？

どのように解決するのですか？

簡単な答えは、Sass がそのためのセレクタを構成できない（または構成しない）ので、できません。 メディア クエリの内側にいて、メディア クエリの外側にあるものを拡張することはできません。 確かに、セレクタを合成しようとする代わりに、単にそのコピーを取ってくれればいいのですが。 しかし、それはそうではないので、できません。

ミキシンを使用する

メディアクエリの内部と外部でコードのブロックを再利用するようなケースで、なおかつそれを拡張できるようにしたい場合は、mixinとextendクラスの両方を書きましょう。

@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}

メディアクエリ内のセレクタを外側から拡張する

これはあなたのユースケースにはあまり役立ちませんが、別の選択肢です。

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}

Sass がこの制限を解除するまで待つ (あるいは自分でパッチを当てる)

この問題については多くの議論が進行中です (追加する意味のあることがない限り、これらのスレッドに貢献しないでください: メンテナは、ユーザーがこの機能を望んでいることをすでに認識しており、それをどのように実装するか、どの構文にすべきかが問題なのです)。

• https://github.com/sass/sass/issues/1050
• https://github.com/sass/sass/issues/456