SCSS变量智能提示必须依赖LSP(如scss-language-server),而非普通插件;需通过SublimeLSP配置正确路径、includePaths和selector,且仅在$后手动触发补全,严格受限于@use导入链。

Sublime Text 本身不解析 SCSS 变量作用域,所谓“变量智能提示”,本质是靠语言服务器(LSP)读取 @use / @forward 关系并构建符号表——没配 LSP,光装插件或改语法高亮,$color-primary 永远不会在输入 $ 后自动列出来。
SCSS 变量提示必须用 LSP,不是靠 SCSS 插件
很多人装了 SCSS 插件(mrmartineau 版)就以为能提示变量,结果只看到语法高亮和基础补全。那只是文本匹配,不是语义理解。真正识别 @use "src/variables" as var; 并把 var.$text-color 推给编辑器的,只有 scss-language-server 这类 LSP 实现。
-
SCSS插件只负责调用sass命令编译,不提供任何符号索引能力 -
SublimeLSP是唯一稳定接入 LSP 的桥接插件,必须配合scss-language-server使用 - 别试
SublimeCodeIntel:它依赖老旧的 CodeIntel 引擎,不支持 Dart Sass 的模块系统,对@use完全无感知
安装 scss-language-server 并验证可用
终端执行以下命令,确保能拿到版本号:
sass --version
然后安装语言服务器(注意不是 sass CLI,而是专为编辑器设计的 LSP 实现):
立即学习“前端免费学习笔记(深入)”;
- macOS/Linux:
npm install -g scss-language-server,再运行scss-language-server --version确认输出 - Windows:用管理员权限打开 PowerShell,运行
npm install -g scss-language-server,检查是否加入 PATH(若报 command not found,用where scss-language-server找路径) - 如果项目已用
yarn,可全局安装:yarn global add scss-language-server
失败常见原因:node 版本低于 18、npm 权限被限制、或安装后未重启终端导致 PATH 未刷新。
SublimeLSP 配置 SCSS 服务的关键参数
打开 Preferences → Package Settings → LSP → Settings,在用户配置中添加:
{
"clients": {
"scss": {
"command": ["scss-language-server", "--stdio"],
"enabled": true,
"languageId": "scss",
"initializationOptions": {
"includePaths": ["node_modules"]
},
"selector": "source.scss"
}
}
}
关键点:
-
"command"必须是完整可执行路径(如["/opt/homebrew/bin/scss-language-server", "--stdio"]),不能只写["scss-language-server"]—— Sublime 不继承 shell 的 PATH -
"includePaths"要填项目里@use引入变量的实际路径,比如src/styles或./styles,否则跨文件变量找不到 -
"selector": "source.scss"必须严格匹配,不能写成source.sass或漏掉s - 保存后重启 Sublime,打开一个 .scss 文件,底部状态栏应显示
LSP-SCSS active
变量提示生效的触发条件与限制
即使 LSP 配好了,变量也不会“随时弹出”。它只在明确上下文里响应:
- 输入
$后按Ctrl+Space(Windows/Linux)或Cmd+Space(macOS),才会列出当前作用域可见的变量 - 在
@use "xxx" as ns;后,输入ns.$再触发补全,才能看到命名空间下的变量 - 不支持
@import:Dart Sass 已废弃该语法,LSP 默认忽略;必须迁移到@use+@forward - 首次打开大项目会卡顿几秒——这是 LSP 在扫描所有
.scss文件构建符号图,之后就快了
最易被忽略的一点:scss-language-server 不读 tailwind.config.js 或自定义函数,它只处理标准 SCSS 模块导入链。变量提示范围,严格受限于你实际 @use 的路径和别名。


















