ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。