CSS语言服务默认不补全自定义属性，因其仅识别标准属性，不扫描--*变量；需安装css-var-autocomplete插件，它主动索引本地.css/.scss/.html等文件中的变量声明，并在var(--、env(--等位置触发补全。
为什么 css-language-features 默认不补全自定义属性
VSCode 内置的 CSS 语言服务（由 css-language-features 提供）只识别标准 CSS 属性和已知的伪类/伪元素，对 --* 开头的自定义属性（CSS 变量）不做静态扫描或跨文件索引。它不会主动读取 :root、@layer 或其他作用域里的 var(--xxx) 定义，所以敲 var(-- 时默认没提示。
安装并启用 css-var-autocomplete 插件
目前最轻量、维护活跃、且真正按需工作的插件是 css-var-autocomplete（作者：mrmlnc）。它不依赖构建工具，纯客户端扫描当前工作区中所有 .css、.scss、.less 和 .html 文件，提取 --xxx 形式的声明，然后在 var(--、env(--、theme(-- 等位置触发补全。
- 在 VSCode 扩展市场搜索
css-var-autocomplete，安装并重启窗口 - 插件默认启用，无需额外配置；如被禁用，检查
settings.json中是否含"cssVarAutocomplete.enable": false - 首次打开大项目可能延迟 1–2 秒才出现补全，这是正常缓存构建过程
补全失效的常见原因和应对
不是装了就一定有效——几个关键点卡住就会静默失败：
-
css-var-autocomplete不解析@import或@use的外部文件，变量必须定义在当前工作区可访问的本地文件里（比如variables.css被index.html直接<link>引入，但没放在 VSCode 打开的文件夹内 → 不会扫描） - 变量名含大写字母或特殊符号（如
--Color-Primary）会被识别，但部分旧版插件对连字符后紧跟大写支持不稳定；建议统一用--color-primary风格 - 如果在
.ts或.jsx的模板字符串里写style={{ color: 'var(--xxx)' }}，默认不触发补全；需手动在settings.json中添加："cssVarAutocomplete.languages": ["css", "scss", "less", "html", "typescript", "javascript"]
配合 CSS 预处理器时要注意的作用域
SCSS/Less 的嵌套变量（如 .btn { --btn-color: red; }）会被插件捕获，但它们属于局部作用域，补全列表里会出现，实际使用时能否生效取决于运行时继承链——插件不校验作用域有效性，只做字面匹配。
立即学习“前端免费学习笔记（深入）”；
- 全局变量优先写在
:root或顶层@layer base块里，确保稳定可发现 - 避免在媒体查询内部重复定义同名变量（如
@media (prefers-color-scheme: dark) { :root { --color-text: white; } }），插件会提取两个，但补全时无法区分上下文 - 若用 PostCSS 插件（如
postcss-custom-properties）将变量编译为静态值，开发阶段仍应保留原始--*声明，否则插件无源可查
真正麻烦的不是找不到变量名，而是变量定义散落在多个 HTML 的 <style>、CSS-in-JS 对象、甚至构建时注入的 JS 字符串里——这类场景插件无能为力，得靠团队约定 + 文档同步。
