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

SCSS 選擇器中的變數用法

在 SCSS 中，利用變數建立動態選擇器可能是有用的技術。但是，語法不支援直接在選擇器中使用變數（例如在您的範例中）。

要在選擇器中有效使用變量，您可以將它們用作選擇器本身的前綴或後綴。這允許您動態產生特定的類別名稱。例如，您可以如下修改程式碼：

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

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

透過此修改，產生的CSS 將包含具有所需背景顏色的類別.grid10：

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

此外，您可以使用字串中的變數來動態建立URL 或其他需要字串插值的元素。例如：

<code class="scss">$gutter: 10;
$filename: 'sans-serif';

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

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