可以將 SASS/SCSS 變量轉換為 CSS 嗎？

Question

當試圖在 CSS 中顯示我聲明的 SASS 變量時，我沒有在 CSS 輸出文件中獲得變量本身，而是獲得賦予變量的值。

更清楚地說，這就是我得到的：

SCSS/SASS 輸入

$gray__background: #2d2d2d;

:root {
    --gray__background: #{$gray__background};
}

body{
  background-color: $gray__background;
}

CSS“輸出”

:root {
 --gray__background: #2d2d2d;
}

body{
 background-color: #2d2d2d;
}

這就是我期望得到的：

CSS“輸出”

:root {
  --gray__background: #2d2d2d;
}
body{
  background-color: var(--gray__background);
}

短篇小說：我想知道CSS“自動生成”文件中的結果background-color: var(--gray__background); , 而不是background-color: #2d2d2d; 是有可能實現的。

我使用 VSCode 的Live Sass 編譯器擴展。

對不起，如果我的問題有點含糊。 我是編碼新手。

Answer 1

:root變量在 SCSS 中聲明，但沒有被使用，因此它們不會顯示在 CSS 輸出中。 看起來你必須在 SCSS 中使用--gray__background而不是$gray__background所以它變成： background-color: var(--gray__background); .

希望這可以幫助。