検索
ホームページウェブフロントエンドCSSチュートリアルSass Media クエリでセレクターを拡張するにはどうすればよいですか?

How to Extend Selectors in Sass Media Queries?

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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
CSSがよくわからない場合、どのCSSが最も理にかなっていますか?CSSがよくわからない場合、どのCSSが最も理にかなっていますか?Apr 19, 2025 am 09:56 AM

ピーター・ポールはこの質問を投稿しました:

クリップパスでアニメーション化しますクリップパスでアニメーション化しますApr 19, 2025 am 09:52 AM

Clip-Pathは、私たちが一般的に知っているCSSプロパティの1つですが、何らかの理由で頻繁に手を伸ばすことはできません。その意味では少し怖いです

GatsbyでGraphQLプレイグラウンドを使用しますGatsbyでGraphQLプレイグラウンドを使用しますApr 19, 2025 am 09:51 AM

私はあなたのほとんどがすでにギャツビーについて聞いていると仮定しており、少なくともそれが基本的に反応サイトの静的サイトジェネレーターであることを大まかに知っています。一般的に

タイプまたはテスト:両方ではないのはなぜですか?タイプまたはテスト:両方ではないのはなぜですか?Apr 19, 2025 am 09:50 AM

時々、議論は型付けされたJavaScriptの価値について燃え上がります。 「もっとテストを書くだけです!」対戦相手を叫ぶ。 「ユニットテストをタイプに置き換えてください!」

GitのグラフィカルユーザーインターフェイスGitのグラフィカルユーザーインターフェイスApr 19, 2025 am 09:46 AM

Lemmeは、最近のGit Guiの主要なプレーヤーのように見えるものをまとめています。

自分の怠zyなロードを転がすためのヒント自分の怠zyなロードを転がすためのヒントApr 19, 2025 am 09:44 AM

「怠zyな読み込みを使用できる」と聞いたことがあるかもしれません(または電話を発行しました!特に重いウェブページをスリムにする方法を探しているとき。

CSS 2019調査の3つの予測CSS 2019調査の3つの予測Apr 19, 2025 am 09:43 AM

CSS状態のような開発者調査を実行することは、マルチステージプロセスです。まず、データを収集する必要があります。次に、使用可能な形状に処理します。

最後に...最終的に約束の投稿最後に...最終的に約束の投稿Apr 19, 2025 am 09:39 AM

「JavaScriptの約束で最終的に発砲するのはいつですか?」これは私が最近のワークショップで尋ねられた質問であり、私は何かをクリアするために少し投稿を書くと思いました

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター