Sublime Text通过插件与外部工具实现实时预览：1. 安装Sass/Less命令行工具及EasySASS等插件，保存时自动编译为CSS；2. 配置输出路径将CSS生成至指定目录；3. 使用Browser Sync或Live Server监听文件变化，浏览器自动刷新；4. 可创建启动脚本一键开启本地服务器，形成保存→编译→刷新闭环。
Sublime Text 本身不带浏览器实时预览功能，但通过插件配合外部工具，可以实现 Less 或 Sass 编译后自动刷新浏览器，达到“实时预览”效果。关键是将代码保存时自动编译为 CSS，并让浏览器自动加载最新样式。
1. 安装编译插件（Sass/Less 自动转 CSS）
先确保系统已安装 Ruby（Sass 需要）或 Node.js（Less/Sass 都可用），然后安装对应的命令行工具：
-
Sass：终端运行
gem install sass -
Less：运行
npm install -g less
接着在 Sublime 中安装编译插件：
- EasySASS：保存 .scss/.sass 文件时自动编译成 .css
- LESS-build 或 LessThanAwesome：支持 .less 实时编译
安装方法：打开 Sublime → Ctrl+Shift+P → 输入 “Install Package” → 搜索并安装对应插件。
立即学习“前端免费学习笔记（深入）”；
2. 配置自动编译输出路径
以 EasySASS 为例，进入 Preferences → Package Settings → EasySASS → Settings - User，设置输出目录和格式：
{
"css_dir": "css",
"output_style": "nested",
"precision": 3
}这会把 scss 编译后的 CSS 输出到项目下的 css 目录中。
3. 实现浏览器实时刷新（关键步骤）
编译出 CSS 还不够，要看到效果需浏览器自动刷新。推荐使用 Live Server 或 Browser Sync。
方法一：使用 Live Server（简单）
- VS Code 插件更常见，但 Sublime 可搭配外部 Live Server 工具
- 在项目根目录打开终端，运行：
npx live-server - 保存 Sass/Less 后，页面自动刷新
方法二：使用 Browser Sync（推荐）
- 全局安装：
npm install -g browser-sync - 在项目目录运行：
browser-sync start --server --files "css/*.css, *.html"
这样当 CSS 文件变化时，所有连接的浏览器会自动刷新。
4. 简化流程：一键启动开发环境
创建一个启动脚本，比如 start.bat（Windows）或 start.sh（Mac/Linux）：
browser-sync start --server --files "css/*.css, *.html"
双击运行即可启动本地服务器并监听文件变化。
基本上就这些。Sublime 不像前端 IDE 那样集成度高，但搭配命令行工具 + Browser Sync，完全可以实现 Sass/Less 的实时预览效果。重点是保存 → 自动编译 → 浏览器刷新，形成闭环。
