SASS/SCSS变量到CSS是可能的吗?

Question

当我试图在CSS中显示我声明的SASS变量时，我没有在CSS输出文件中得到变量本身，而是得到给变量的值。

为了更清楚，这是我得到的:

SCSS/SASS输入

$gray__background: #2d2d2d;
:root {
--gray__background: #{$gray__background};
}
body{
background-color: $gray__background;
}

CSS"output">

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

这就是我想要得到的:

CSS"output">

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

小故事:我想知道结果是否在CSS中"自动生成"文件background-color: var(--gray__background);，而不是background-color: #2d2d2d;可能实现。

我在VSCode中使用Live Sass Compiler扩展。

如果我的问题有点模糊，我很抱歉。我是新手。

Answer 1

:root变量在SCSS中被声明，但没有被使用，所以它们不会出现在CSS输出上。看起来您将不得不在SCSS中使用--gray__background而不是$gray__background，因此它变成:background-color: var(--gray__background);.

希望对你有帮助。