ホームページ >ウェブフロントエンド >CSSチュートリアル >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>
補足:
以上がSCSS のセレクターで変数を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。