SCSS のセレクターで変数を使用するにはどうすればよいですか?

セレクターの変数補間

SCSS では、変数はスタイルシート全体で参照できる値を格納します。ただし、変数をセレクターとして直接使用すると、一定の制限が生じます。このシナリオを検討して解決策を見つけてみましょう。

課題: セレクターでの変数の使用

変数 $gutter が 10 に設定されており、それをセレクター .grid $gutter。このコードは、背景が赤いクラス .grid10 を作成しようとします。ただし、コンパイルは失敗します。

解決策: #{$} による補間

セレクターで変数を使用するには、#{$} を使用した補間を採用する必要があります。構文。方法は次のとおりです:

<code class="scss">$gutter: 10;

.grid#{$gutter} {
    background: red;
}</code>

変数 $gutter を #{$} で囲むことにより、その値をセレクター文字列に補間し、結果として .grid10 が生成されます。これにより、目的の CSS が生成されます:

<code class="css">.grid10 {
    background: red;
}</code>

URL などの文字列で使用すると、補間は同様に機能します:

<code class="scss">background: url('/ui/all/fonts/#{$filename}.woff');</code>

補足:

• 補間は、クラス名や ID 名の後など、セレクター内の特定のコンテキストでのみ使用できます。
• より複雑な動的セレクターのシナリオが必要な場合は、コードの再利用性のためにミックスインの使用を検討してください。 .

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