Sass セレクターで変数を使用できますか?

変数を使用した動的セレクターの生成

Sass では、変数はスタイルを管理し、一貫性を維持するための貴重なツールです。セレクターを使用する場合、変数に基づいてセレクターを動的に生成するシナリオが発生する場合があります。この質問は、Sass のセレクター内で変数を使用できるかどうかを検討します。

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

提供された例は、Sass セレクター .grid $gutter で変数 $gutter を使用する試みを示しています。 。ただし、これは期待どおりには機能しません。望ましい結果を得るには、ハッシュ構文 # を使用してセレクター文字列内の変数を連結するのが適切な構文です:

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

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

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

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

動的文字列内での変数の使用

変数は動的文字列内でも使用できます。たとえば、url() 宣言内で変数を使用する必要がある場合は、次の構文を使用できます:

<code class="scss">$filename: 'Helvetica';

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

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

<code class="css">background: url('/ui/all/fonts/Helvetica.woff')</code>

By Sass でセレクター内の変数や動的文字列を使用するための適切な構文を理解すると、スタイルシートの柔軟性と保守性を向上させることができます。

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