首先安装Node.js和Dart Sass，再在Sublime Text中通过Package Control安装SideBarEnhancements和Sass插件，接着配置自定义Build System实现手动编译，最后通过sass --watch命令实现保存自动编译，完成高效SCSS开发环境搭建。
在Sublime Text中搭建Sass/SCSS开发环境并实现自动编译，主要依赖插件和外部工具配合。整个过程不复杂，关键是配置好Node.js、Sass编译器以及Sublime的监听插件。
安装Node.js与Sass编译器
要编译Sass或SCSS文件，首先需要系统中安装Sass命令行工具。推荐使用Dart Sass（官方推荐版本）：
- 确保已安装Node.js（可通过命令行输入 node -v 验证）
- 全局安装Sass：打开终端或命令提示符，运行 npm install -g sass
- 验证安装成功：输入 sass -v，应显示版本号
在Sublime Text中安装必要插件
通过Package Control安装以下两个关键插件：
- SideBarEnhancements：增强侧边栏右键功能，方便快捷操作文件
- Sass：提供SCSS/Sass语法高亮和代码提示
安装方法：按下 Ctrl+Shift+P 打开命令面板，输入 “Install Package”，搜索上述插件名并安装。
立即学习“前端免费学习笔记（深入）”；
配置自动编译Sass（使用Build System）
Sublime本身支持自定义构建系统，可以快速调用sass命令进行编译。
- 点击菜单栏 Tools → Build System → New Build System…
- 将内容替换为以下配置（根据你的项目结构调整路径）：
{
"cmd": ["sass", "--no-source-map", "$file", "${file_path}/${file_base_name}.css"],
"selector": "source.scss",
"shell": true,
"working_dir": "$file_path"
}
启用保存时自动编译（进阶方案）
如果希望每次保存 .scss 文件时自动编译，可借助外部工具或插件：
- 使用命令行监听模式：sass --watch input.scss:output.css
- 或者监听整个目录：sass --watch scss:css，这样所有 scss 文件修改都会自动编译到 css 目录
- 把这个命令写进项目根目录的启动脚本中，开发时只需运行一次即可
这种方式更稳定，适合长期项目使用。
基本上就这些。配置完成后，你可以在Sublime Text中高效编写SCSS，并通过命令行或内置构建系统实时输出CSS，流程顺畅且无需切换编辑器。关键是把工具链打通，后续开发就很轻松了。
