VSCode 默认不支持 CSS 变量智能提示和颜色预览，但可通过规范写法（如 --var: #fff; + var(--var)）启用基础提示，并安装 Color Highlight 插件实现颜色小方块预览；SCSS 用户需将预处理器变量赋值给 CSS 变量才能被识别。
VSCode 默认对 CSS 自定义属性（即 CSS 变量）的支持有限，不会自动提示已定义的变量名，也不显示颜色预览小方块。但通过合理配置和插件，可以轻松实现变量智能提示 + 颜色实时预览。
CSS 变量智能提示（无需插件）
VSCode 本身支持基于当前文件或项目中已出现的 CSS 变量名进行基础补全，前提是变量写法规范且作用域可识别：
- 确保变量定义在
:root或有效选择器内，格式为--color-primary: #007acc;（双短横线开头） - 引用时用
var(--color-primary)，不要漏掉括号和双短横 - 开启 VSCode 设置中的
editor.suggest.showVariables（默认开启），让变量出现在建议列表中 - 如果变量定义在外部 CSS 或 SCSS 文件中，建议使用
@import或构建工具（如 PostCSS）确保语义连通性
颜色预览小方块（推荐插件）
原生 VSCode 不渲染 CSS 变量值的颜色预览，需借助轻量插件增强：
-
Color Highlight：免费、轻量，支持
var(--xxx)中被解析出的颜色值（需变量已在同文件或已导入的文件中定义） - Polacode 或 Auto Rename Tag 不相关，别装错；专注选「Color Highlight」或「Color Info」
- 安装后重启编辑器，把光标停在
var(--color-bg)上，右侧会浮现出对应颜色的小方块
进阶：SCSS/Less 用户注意变量链路
如果你用的是预处理器，CSS 变量和预处理器变量（如 $primary-color）是两套系统：
立即学习“前端免费学习笔记（深入）”；
- SCSS 变量本身不触发 CSS 颜色预览，除非你把它赋值给一个真正的 CSS 变量，例如：
:root { --primary: #{$primary-color}; } - 此时
var(--primary)才能被 Color Highlight 识别并预览 - 想让 SCSS 变量也获得提示？装 SCSS IntelliSense 插件，它专为
$和@function提供补全
调试技巧：快速确认变量是否生效
遇到提示不出现或颜色不预览，按这几步排查：
- 检查变量名拼写是否完全一致（区分大小写、空格、下划线）
- 看变量是否被更早的
var()覆盖（CSS 层叠逻辑影响作用域） - 打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），运行 Developer: Toggle Developer Tools，查看 Console 是否有 CSS 解析错误
- 临时在同文件顶部加一句
:root { --test: red; }，测试提示和预览是否恢复——可快速判断是配置问题还是项目结构问题
基本上就这些。不需要复杂配置，开箱即用的体验靠的是选对插件 + 写对语法。变量提示和颜色预览不是黑科技，只是 VSCode 对标准 CSS 支持的自然延伸。
