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中文網其他相關文章！