Sass Media クエリでセレクターを拡張するにはどうすればよいですか?

Sass を使用したメディアクエリのセレクターの拡張

質問:

を埋め込みたいと考えています。画面が縮小すると .item.compact 内の item が拡張されますが、@media を使用して拡張しようとすると Sass がエラーをスローします。スタイルを再現せずにこれを実現するにはどうすればよいでしょうか?

答え:

残念ながら、Sass ではメディア クエリ内から外部セレクターを拡張することを禁止しています。この制限により、次のような代替アプローチが必要になります。

1. Mixin の使用:

必要なスタイルをカプセル化する再利用可能な Mixin を定義します。メディア クエリの内外で、このミックスインを拡張します:

@mixin compact {
    // Styles for compact items
}

%compact {
    @include compact;
}

// Usage
.item {
    @extend %compact;
}

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

2.メディア クエリ内のエクステンダーのネスト:

このアプローチにより、メディア クエリの外部で定義されたセレクターを拡張できます:

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

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

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

.bar {
  @extend %bar;
}

3. Sass アップデートを待っています:

この制限に関する議論は進行中です。ソリューションを実装するには、Sass の構文または機能の変更が必要になる場合があります。

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