安装LiveSassCompiler插件并配置路径后，保存SCSS文件可自动编译为CSS。1. 通过Package Control安装插件；2. 设置输入输出路径；3. 保存文件触发编译，提升开发效率。
Sublime Text 要实现 SASS/SCSS 的自动编译，可以通过安装插件并配置构建系统来完成。最常用的方式是使用 LiveSassCompiler 插件，它支持 SCSS/SASS 文件的实时监听和自动编译为 CSS。
1. 安装 Package Control（如未安装）
如果还没安装 Package Control，可以按以下步骤操作：按下 Ctrl+` 打开控制台，粘贴以下代码并回车：
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ','%20')).read())
2. 安装 LiveSassCompiler 插件
按下 Ctrl+Shift+P 打开命令面板，输入 “Package Control: Install Package”，回车后等待加载完成。接着搜索 “LiveSassCompiler”，点击安装即可。
3. 配置编译选项（可选）
你可以自定义输出的 CSS 格式、文件路径等。在菜单栏选择：
Preferences → Package Settings → LiveSassCompiler → Settings
在右侧用户设置中添加配置，例如：
立即学习“前端免费学习笔记（深入）”；
{
"live_sass_compile": {
"save_after_change": true,
"auto_preview": false,
"format_on_save": true,
"extension_priority": "css",
"exclude_list": ["node_modules"],
"advanced": {
"outputPath": "/css", // 输出到同级目录下的 css 文件夹
"inputPath": "/sass" // 监听 sass 文件夹下的 scss 文件
}
}
}
4. 使用方法
- 打开一个包含 .scss 或 .sass 文件的项目
- 保存文件（Ctrl+S），插件会自动编译生成对应的 .css 文件
- 默认会在同级目录生成 CSS 和 source map 文件
- 也可通过右键菜单选择 “Live Sass: Compile This File” 手动触发编译
注意：确保系统已安装 Node.js 和 Sass 环境（虽然 LiveSassCompiler 内置了编译能力，但部分功能依赖环境）。
基本上就这些。配置完成后，每次保存 SCSS 文件就会自动编译成 CSS，提升开发效率。不复杂但容易忽略的是路径配置和保存触发机制，建议开启 save_after_change 保证即时响应。
