VSCode中需启用内置CSS设置、安装Color Highlight和CSS Variables扩展，并配置variablesFiles路径及HTML变量提示，才能实现CSS/SCSS颜色预览、变量识别与色彩选择器功能。
如果您在使用 VSCode 编辑 CSS 或 SCSS 文件时发现颜色值无法实时预览、CSS 自定义属性（变量）未被识别或色彩选择器未触发，则可能是由于相关语言功能未启用或扩展缺失。以下是实现色彩选择器与 CSS 变量支持的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、启用内置 CSS 语言特性
VSCode 自带的 CSS 语言支持包含基础色彩预览和变量引用提示，但需确保对应语言模式正确激活且设置未被禁用。
1、打开任意 .css 或 .scss 文件，确认右下角状态栏显示语言模式为 CSS 或 SCSS；若显示为 Plain Text，点击该区域并选择对应语言。
立即学习“前端免费学习笔记（深入）”；
2、按下 Cmd + ,（Mac）或 Ctrl + ,（Windows/Linux）打开设置，搜索 "css.colorDecorators.enable"，确保其值为 true。
3、继续搜索 "css.suggest.properties.all"，将其设为 true，以启用 CSS 变量名自动补全。
二、安装 Color Highlight 扩展
该扩展可高亮显示十六进制、RGB、HSL 等格式的颜色值，并在编辑器中直接渲染色块，增强可视化反馈。
1、点击左侧活动栏的扩展图标（或按 Cmd+Shift+X），在搜索框中输入 "Color Highlight"。
2、找到作者为 sergeche 的扩展，点击 Install 按钮完成安装。
3、重启 VSCode 后，在 CSS 文件中输入 #3b82f6 或 rgb(59, 130, 246)，即可看到右侧出现对应色块。
在无 root/sudo 权限的环境（云容器、VPS、隔离主机）中安装并配置 OpenClaw 浏览器工具的 headless Chrome。适用场景：...
三、配置 CSS Variables 支持扩展
CSS Variables 扩展专门用于解析 :root 或任意作用域内定义的 --* 变量，并在使用处提供悬停提示与跳转支持。
1、在扩展市场中搜索 "CSS Variables"，安装由 Rasmus Rønlev 发布的同名扩展。
2、在项目根目录下的 .vscode/settings.json 中添加以下配置：
3、在 settings.json 内插入如下内容：
"cssVariables.variablesFiles": ["**/styles.css", "**/variables.css"]
4、保存文件后，将光标悬停在 color: var(--primary-blue); 上，即可查看变量定义位置及当前计算值。
四、使用 IntelliSense for CSS Class Names in HTML
当在 HTML 的 style 属性或内联
1、安装扩展 "IntelliSense for CSS class names in HTML"（作者：Zignd）。
2、在 HTML 文件中编写 <div style="background-color: var(--bg-main);">，光标置于括号内并按下 Ctrl+Space，即可唤出已定义的 CSS 变量列表。
3、确保项目中存在全局变量定义文件（如 :root { --bg-main: #f9fafb; }），否则变量不会出现在建议中。
