Sass 无法正确编译变量

Question

我开始编写自己的 SCSS 以及boostrap. 我遵循框架的层次结构，例如：

/* The main file and all partial files are in the same directory */
@import "variables";
@import "mixins";

@import "other-components";

一切都可以完美编译，只是每个变量都variables.scss没有被编译。根据我的理解，CSS 除了 之外没有变量:root，因此 SCSS 变量将直接编译为其在 CSS 中的值。但是编译完成后，CSS 中的变量与 SCSS 中的变量保持不变，只是名称类似，--primary但值不一样#000。

在我的帖子被批评为重复之前，我做了以下事情：

1. 我遵循了 Bootstrap 的做法。你可以在 Github 上查看它们。
2. 我使用 VSCode，我的颜色旁边有方框，所以我写了有效的十六进制值；
3. 我尝试切换到@use并使用 as 命名空间而不是@import.
4. 我尝试过variables使用或不使用下划线来回重命名我的文件_。它无助于解决问题。
5. 编译器没有显示任何错误。
6. 我只使用sass包来编译.scss为.css. 没有额外的库。

主文件

_变量.scss

main.css

任何帮助表示赞赏！

Answer 1

当使用标准CSS变量时，你应该让SASS写出如下内容：

--variable: #{$sass-var};

否则，SASS 将打印该变量，就好像它是 CSS 值中的有效值一样（因为从技术上讲，您可以定义类似的内容--var: $text，然后稍后使用它来content: var(--var)打印该字符串）。无论如何，这是因为 SASS 否则不知道您是否要打印变量的输出，或者只是一个类似于 sass 变量的名称的字符串。