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

SCSS での CSS セレクターの変数の使用

SCSS では、変数は動的な値を保存し、スタイルシート全体で再利用するための強力なツールです。ただし、CSS セレクターで変数を直接使用するのは簡単ではありません。

変数 $gutter が 10 に設定されているとします。これをセレクターで使用して、$ の値に基づいてクラス名を動的に生成するとよいでしょう。 gutter.

問題:

次のようにセレクターで変数を直接使用しようとすると、次のようになります:

<code class="scss">.grid+$gutter {
    background: red;
}</code>

無効な CSS クラスです。出力は予想どおり .grid10 ではありません。

解決策:

CSS セレクターで変数を使用するには、#{$var-name} を使用する必要があります。構文。以下のコードは、$gutter 変数を使用してクラス名を生成する方法を示しています。

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

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

これにより、次の CSS が生成されます。

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

# の前に # が必要であることに注意してください。変数名。

補足:

#{$var-name} 構文を使用して、URL などの文字列に変数を含めることもできます。

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

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