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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
