Sublime Text 本身不内置 SASS 编译能力，必须通过插件 + 外部编译器（如 sass CLI 或 dart-sass）协同工作；直接装个插件就“自动编译”是常见误解，多数失败源于路径、版本或配置项没对齐。
确认本地已安装 dart-sass（推荐）
dart-sass 是官方维护的现代 SASS 实现，Node.js 版本的 node-sass 已废弃，Windows/macOS/Linux 均支持。用 npm 安装后，确保终端能调用：
npm install -g sass sass --version
若报 command not found: sass，说明 PATH 未生效——不是插件问题，而是系统找不到命令。解决方式：
- macOS/Linux：检查
~/.npm-global/bin是否在$PATH中 - Windows：重启 Sublime（它不读取新环境变量），或改用绝对路径配置（见下节）
- 避免用
sudo npm install -g sass，权限混乱易导致后续编译失败
安装并配置 Sass Build System（非 Package Control 里的 “Sass” 插件）
Package Control 中搜 “Sass” 插件（作者 mrmlnc）只是语法高亮和快捷键，**不提供编译功能**。真正需要的是自定义 Build System：
立即学习“前端免费学习笔记（深入）”；
- 菜单栏 → Tools → Build System → New Build System…
- 替换全部内容为以下 JSON（注意
cmd中的路径适配）：
{
"cmd": ["sass", "--update", "$file:$file_path/$file_base_name.css", "--style=expanded", "--sourcemap=none"],
"selector": "source.sass, source.scss",
"path": "/usr/local/bin" // macOS/Linux 示例；Windows 可写 "C:\\Users\\xxx\\AppData\\Roaming\\npm"
}
关键点：
-
--update表示只编译修改过的文件，比--watch更轻量（Watch 需另起终端进程） -
--sourcemap=none关闭 Source Map，避免生成 .css.map 文件干扰调试 -
"path"字段必须填对，否则 Sublime 找不到sass命令（尤其 Windows 用户常漏掉）
保存即编译：绑定 Save 后自动构建
Sublime 默认不监听保存事件，需手动触发 Ctrl+B（Win/Linux）或 Cmd+B（macOS）。要实现“保存即编译”，创建一个简单插件：
- 菜单栏 → Tools → Developer → New Plugin…
- 替换内容为：
import sublime, sublime_plugin
class SassOnSave(sublime_plugin.EventListener):
def on_post_save(self, view):
if view.file_name() and view.file_name().endswith(('.scss', '.sass')):
view.window().run_command('build')
保存为 sass_on_save.py（路径：Packages/User/），之后每次保存 .scss/.sass 文件就会自动执行当前 Build System。
注意：
- 该插件仅触发 build，不校验是否配置了正确的 Build System——如果没设好上一节的 Build 文件，会静默失败
- 若项目含多个 SASS 入口（如
main.scss引入_reset.scss），--update仍只编译被保存的那个文件；依赖关系变更时需手动编译入口文件
最常卡住的地方不是语法或插件，而是 sass 命令在终端能跑、在 Sublime 里跑不了——这几乎 100% 是 path 或环境变量加载时机的问题。先在终端运行 which sass（macOS/Linux）或 where sass（Windows），再把结果路径原样填进 Build System 的 "path" 字段，比猜配置快得多。
