如何透過 SCSS 在 CSS 選擇器中使用變數？

在SCSS 中使用CSS 選擇器變數

在SCSS 中，變數是儲存動態值並在整個樣式表中重複使用它們的強大工具。然而，直接在 CSS 選擇器中使用變數並不簡單。

假設你有一個變數 $gutter 設定為 10。你可能想在選擇器中使用它來根據$ 的值動態生成類名

問題：

如果您嘗試直接在選擇器中使用變量，如下所示：

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

這將導致無效的CSS 類別。正如預期的那樣，輸出不會是 .grid10。

解決方案：

要在 CSS 選擇器中使用變量，您需要使用 #{$var-name}句法。下面的程式碼示範如何使用 $gutter 變數產生類別名稱：

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

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

這將產生以下 CSS：

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

請注意，# 之前是必要的變數名稱。

附加說明：

#{$var-name} 語法也可用於在字串中包含變量，例如在 URL 中：

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

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