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