首先确认已安装SASS编译器，推荐使用npm全局安装Dart Sass；接着在Sublime Text中创建自定义Build System，通过Tools → Build System → New Build System…新建JSON配置文件，填入调用sass命令的cmd、指定作用文件类型的selector、启用shell执行环境及工作目录working_dir；保存为Sass.sublime-build至Packages/User/目录；然后打开.scss文件，选择对应Build System并按Ctrl+Cmd+B编译生成.css文件；可选配置包括添加--sourcemap生成源映射或--style=compressed输出压缩代码，确保终端能执行sass命令且环境变量配置正确。
Sublime Text 中配置 SASS 编译环境，需要设置自定义的 Build System，让编辑器调用本地安装的 SASS 编译器（如 Dart Sass 或 Ruby Sass）将 .scss 文件编译为 .css 文件。以下是详细配置步骤。
1. 确保已安装 SASS 编译器
在配置前，先确认你的系统中已正确安装 SASS：
- 推荐使用 Dart Sass（官方推荐）
- 通过 npm 安装：npm install -g sass
- 安装完成后，在终端运行 sass --version 查看是否正常输出版本号
2. 创建 SASS Build System 配置文件
打开 Sublime Text，依次操作：
- 点击菜单栏 Tools → Build System → New Build System…
- 会打开一个 JSON 格式的空白配置文件
- 将以下内容粘贴进去（适用于全局安装的 Dart Sass）：
"cmd": ["sass", "$file:$file_path/$file_base_name.css"],
"selector": "source.scss",
"shell": true,
"working_dir": "$file_path"
}
说明：
- cmd：执行的命令，把当前文件编译成同名 .css 文件
- selector：指定该构建系统作用于 .scss 文件
- shell：设为 true 可确保在系统 shell 中执行命令，能找到 sass 命令
- working_dir：编译时的工作目录，避免路径问题
保存文件，命名为 Sass.sublime-build，建议保存在默认的 Packages/User/ 目录下。
3. 使用 SASS Build System
- 打开一个 .scss 文件
- 在菜单栏选择 Tools → Build System → Sass（或你命名的名字）
- 按下 Ctrl+B（Windows/Linux）或 Cmd+B（Mac）进行编译
- 如果一切正常，会在相同目录生成对应的 .css 文件
4. 可选配置：添加 source map 或压缩输出
如果你希望生成 source map 或压缩代码，可以修改 cmd 参数：
- 开发模式（带 source map）：
"cmd": ["sass", "--sourcemap", "$file:$file_path/$file_base_name.css"] - 生产模式（压缩）：
"cmd": ["sass", "--style=compressed", "$file:$file_path/$file_base_name.min.css"]
