可以将 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); .

希望这可以帮助。