sublime text 需配合 dart-sass 和 sublimeonsavebuild 插件实现保存即编译，关键步骤包括：安装 dart-sass、配置自定义 sass.sublime-build 构建系统、确保 path 正确及文件后缀为 .scss。
Sublime Text 本身不内置 Sass 编译能力，必须借助插件 + 外部编译器（如 sass CLI 或 dart-sass）才能实现保存即编译。直接装个插件不配环境，90% 的人会卡在“没反应”或“command not found”上。
确认系统已安装 dart-sass（不是 Ruby Sass）
Ruby 版 sass 已废弃多年，官方推荐且唯一维护的是 Dart 实现的 dart-sass。它不依赖 Ruby，安装快、兼容性好、输出标准 CSS。
-
macOS：用
brew install sass/sass/sass（推荐），或npm install -g sass - Windows：用
npm install -g sass（确保 Node.js ≥ 14） - 验证是否可用：终端运行
sass --version，应输出类似1.77.2 - 如果报
command not found: sass，说明npm全局 bin 路径未加入系统PATH，需手动补全（Windows 尤其常见）
安装 SublimeOnSaveBuild 插件（轻量可靠）
别用老掉牙的 SCSS 插件或 Sass（Ruby 时代遗留），它们只负责语法高亮，不处理编译。真正干活的是构建系统（Build System）+ 保存触发插件。
- 打开 Sublime →
Cmd+Shift+P（macOS）或Ctrl+Shift+P（Win/Linux）→ 输入Package Control: Install Package - 搜索并安装
SublimeOnSaveBuild（不是OnSaveBuild，注意前缀） - 该插件作用很明确：每次保存
.scss或.sass文件时，自动调用当前激活的 Build System - 它不带任何预设规则，完全靠你后续配置的 Build System 驱动，所以灵活、无冲突、不拖慢启动
配置自定义 Build System（关键步骤）
Sublime 默认没有 Sass 构建规则，必须手动写一个 JSON 文件，告诉它怎么调 sass 命令。路径和参数错一个，就编译失败。
立即学习“前端免费学习笔记（深入）”；
- 菜单栏 →
Tools → Build System → New Build System… - 替换全部内容为以下配置（适配 macOS / Linux；Windows 用户把
cmd改成shell_cmd并加引号）：
{
"cmd": ["sass", "--no-source-map", "--style=expanded", "$file", "$file_path/$file_base_name.css"],
"selector": "source.scss, source.sass",
"file_regex": "^(...*?):([0-9]+):([0-9]+)",
"working_dir": "$file_path"
}
-
--no-source-map：禁用 sourcemap（避免生成 .css.map 文件干扰） -
--style=expanded：输出易读格式（可选compressed） -
$file_path/$file_base_name.css：确保 CSS 输出到同目录，文件名一致 - 保存为
Sass.sublime-build（默认位置即可） - 然后在
Tools → Build System中选择刚建的Sass
验证与排错要点
即使配置完成，也常因路径、权限或扩展名问题失败。别急着重装插件，先看这几处：
- 确保文件后缀是
.scss（不是.sass或.css），且文件内有合法 Sass 语法（比如$color: red; body { color: $color; }） - 保存时看窗口右下角状态栏：若显示
Building...然后消失，说明构建被触发但可能静默失败；打开Ctrl+`控制台，查看是否有File not found或command not found - 如果提示
Permission denied（macOS/Linux），说明sass命令不在用户 PATH 中，改用绝对路径：/opt/homebrew/bin/sass（Homebrew 安装位置）或~/.npm-global/bin/sass（npm 全局安装位置） - Windows 用户若用
npm install -g sass，shell_cmd应写成"cmd": ["sass.cmd", ...]，否则找不到命令
最常被跳过的环节是验证 sass 是否真能从终端任意路径调用——这点没搞定，后面所有配置都是白忙。
