Sass のメディア クエリ内でセレクターを拡張するにはどうすればよいですか?

Sass でメディア クエリを使用してセレクターを拡張する

Sass を使用する場合、メディア クエリ内からセレクターを拡張する必要がよくあります。これは、サイズや方向に基づいて要素にさまざまなスタイルを適用する場合に便利です。ただし、Sass には、メディア クエリ内から外部セレクターを拡張できないという制限があります。

提供されたコード例では:

<code class="scss">.item { ... }
.item.compact { /* styles to make .item smaller */ }

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

Sass は構成できないため、このアプローチではエラーが発生します。あなたのためのセレクター。具体的には、メディア クエリの内部にいて、メディア クエリの外部にあるものを拡張することはできません。

代替アプローチ

この制限により、いくつかの代替方法があります。

ミックスインの使用

ミックスインと拡張クラスを作成して、メディア クエリ内外でコードを再利用します:

<code class="scss">@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

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

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

セレクターの拡張外部から

特定のユースケースには直接適用できませんが、このメソッドを使用すると、メディア クエリ内のセレクターを外部から拡張できます:

<code class="scss">%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

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

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

.bar {
  @extend %bar;
}</code>

進行中の議論

Sass コミュニティでは、この制限に関して活発な議論が行われています。ユーザーはこの機能に対する要望を表明しており、メンテナはそれを効果的に実装する方法を検討しています。しかし、決定的な解決策はまだ見つかっていません。

以上がSass のメディア クエリ内でセレクターを拡張するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。