Visual Studio Code 无法识别 CSS 文件中的变量

Question

我正在使用 Visual Studio Code 并且我在 CSS 文件中遇到了问题 vith 变量，当我输入美元符号时，css 文件报告错误并且浏览器不会看到文件中的更改。

Answer 1

似乎您想使用 SCSS ( Sass )，但您似乎根本没有安装 Sass 或者 Visual Studio 代码需要一个插件。 可能你现在知道该怎么做了。

Answer 2

这就是定义 CSS 变量的方式。 您正在查看的变量用于 SCSS。 要使用 SCSS，你需要像node-sass这样的东西

 :root { --primary-color: red; } div { background: var(--primary-color); width: 200px; height: 200px; } body { color: var(--primary-color); }

 <div></div> <p> Lorem ipsum </p>

要使 VSCode 了解 SCSS，请确保文件按原样存储 ( .scss )。 如果这仍然不起作用，请将语言模式设置为 SCSS。 语言模式可以在右下角找到。

Answer 3

您正在编写 sass 语法，因此您需要使用 (.scss) 扩展名保存文件，并且由于Sass是一种预处理器脚本语言，因此您还需要一个编译器来获取已编译的 css 版本，例如vscode 中的 live sass 编译器扩展能够将 .css 文件与您的 index.html 文件连接起来