SCSS 変数は CSS セレクター内で直接使用できますか?

SCSS の動的セレクター構文

変数は、CSS スタイルシートをパラメーター化する便利な方法を提供し、高度に動的で再利用可能なコードを可能にします。ただし、次のような疑問が生じます: CSS セレクター内で変数を活用できますか?

提供された例は、次のようにセレクター内で変数 $gutter を使用する試みを示しています。

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

必要な出力は、背景色が赤のクラス セレクター .grid10 です。ただし、この特定の構文は SCSS では無効です。

必要な機能を実現するために、SCSS は #{} プレースホルダーを含む代替構文を提供します。

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

この場合、変数$gutter は、#{} 構文を使用してセレクターに挿入されます。結果の CSS 出力は次のようになります。

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

さらに、URL などの文字列コンテキスト内で変数を補間できます。

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

これにより、URL やその他の文字列ベースの動的な構築が可能になります。プロパティ。

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