如何在 SCSS 中的選擇器中使用變數？

選擇器中的變數內插

在 SCSS 中，變數儲存可以在整個樣式表中引用的值。然而，直接使用變數作為選擇器會帶來一定的限制。讓我們探索這個場景並找到解決方案。

挑戰：在選擇器中使用變數

您將變數 $gutter 設定為 10 並希望在選擇器 .grid $gutter。此程式碼嘗試建立一個具有紅色背景的類別 .grid10。但是編譯失敗。

解決方案：使用 #{$} 進行插值

要在選擇器中使用變量，我們需要使用 #{$} 進行插值句法。方法如下：

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

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

透過將變數 $gutter 括在 #{$} 內，我們將其值插入到選擇器字串中，從而產生 .grid10。這將產生所需的CSS：

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

在字串中使用時，例如URL，插值的工作方式類似：

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

附加說明：

• 插值只能在選擇器內的某些上下文中使用，例如類別或ID 名稱之後。
• 如果您需要更複雜的動態選擇器場景，請考慮使用 mixins 來實作程式碼可重複使用性.

以上是如何在 SCSS 中的選擇器中使用變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！