vscode原生不支持css自定义属性（--foo）自动补全，因其css-language-features服务未将自定义属性建模为符号；需依赖插件如css custom properties或手动全局搜索定位。
CSS变量（--foo）在VSCode里根本不会自动补全
VSCode 内置的 css-language-features 服务不解析自定义属性（Custom Properties），所以 --primary、--spacing-xs 这类变量名不会出现在任何补全列表中——不是你设置错了，是它压根没这能力。连 var(-- 后面按 Ctrl+Space 都只弹出基础 CSS 函数（如 calc()、attr()），不会列项目里已定义的变量名。
常见误操作包括：
- 给
editor.quickSuggestions.strings设为true，指望在var(--里触发补全——结果只是把 JS 字符串里的所有单词都当 CSS 值乱推，干扰更大 - 装了 IntelliSense for CSS class names 或 CSS Peek，以为能“顺带”管变量——它们只索引选择器和类名，对
--开头的符号完全无视 - 在 SCSS 文件里写
$color: red，却期望它在.css文件的var(--中出现——跨预处理器上下文，无引用关系，语言服务器不连通
想让 --foo 出现在 var() 里？只能靠手动注册或插件硬塞
原生 VSCode 不支持，但可通过两种方式“模拟”补全效果：
- 用
AutoHotkey（Windows）或Hammerspoon（macOS）监听var(--输入，然后弹出自定义候选列表（需你自己维护变量清单） - 安装社区插件
CSS Custom Properties（作者：mrmlnc），它会扫描:root和@layer块，提取--变量并注入补全项；但注意：它不支持嵌套作用域（如.theme-dark { --color: blue }）、不识别import链，且无法感知运行时计算值 - 若项目用 PostCSS +
postcss-custom-properties，可配合vscode-postcss-sorting插件做简单关键字补全，但仍是静态字符串匹配，非语义级
F12 跳转定义失败，不是配置问题，是语言服务器没实现
悬停 --primary 显示 any、F12 提示 No definition found、Shift+F12 查不到引用——这些不是你 settings.json 没配对，而是 VSCode 的 CSS LSP 根本没把自定义属性当作“符号（symbol）”建模。它不跟踪变量声明位置、不分析继承链、不处理 var(--x, var(--y)) 这种回退逻辑。
真正可用的替代动作：
- 全局搜索：
Ctrl+Shift+F→ 开正则模式 → 输入:\s*--[\w-]+，能快速定位所有定义处（含:root、组件级style块） - 查使用处：
var\(--[\w-]+\)精准匹配所有调用，比 Shift+F12 更可靠 - 如果变量集中定义在
_variables.css，直接用Ctrl+P搜文件名，再Cmd+F查变量名——比依赖跳转更稳
SCSS/Less 变量补全 ≠ CSS 自定义属性补全
很多人混淆这两者：$primary-color（SCSS）和 --primary-color（CSS）在 VSCode 中由完全不同的机制处理。前者靠 vscode-sass 插件解析 @import 链并索引变量；后者连语言服务器都不认。
关键区别：
-
$变量补全只在.scss文件或<style lang="scss"></style>中生效，且必须显式@import "_variables.scss"才能跨文件提示 -
--变量即使写在同一 SCSS 文件里（如:root { --c: #000; }），也不会被vscode-sass当作变量索引——它只管$和@mixin - 编译后生成的 CSS 文件里，
--依然不可跳转、不可补全，因为输出文件的语言模式是 CSS，不是 SCSS
最易被忽略的一点：CSS 自定义属性的“作用域”是运行时计算的，而 VSCode 的所有补全/跳转都是静态分析。你永远没法靠编辑器知道某个 var(--x) 最终取的是 :root 里的值，还是某个父元素上动态设置的值——这事浏览器 runtime 才清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
