Sublime Text需借助外部工具实现LESS/SASS实时预览：1. 安装Less2CSS插件或配置Sass构建系统以编译CSS；2. 使用live-server或Browser Refresh插件实现浏览器自动刷新；3. 高级用户可配置Gulp，结合browser-sync统一管理文件编译与页面刷新，形成自动化工作流。
Sublime Text 本身不带浏览器预览功能，要实时预览 LESS 或 SASS 编译效果，需配合编译工具和浏览器刷新机制。下面介绍实现方法。
1. 安装编译插件：Less2CSS 与 SASS Build System
先让 Sublime 能把 LESS/SASS 编译成 CSS。
- LESS：安装 Package Control 后搜索 Less2CSS，安装后保存 .less 文件会自动生成对应 .css。
- SASS：通过终端安装 Sass（需先装 Ruby），然后在 Sublime 中配置 Build System。菜单栏选择 Tools → Build System → New Build System，输入以下内容：
{
"cmd": ["sass", "--watch", "$file:$file_path/$file_base_name.css"],
"selector": "source.sass, source.scss",
"shell": true
}
保存为 SassWatch.sublime-build。之后用此构建系统运行，Sass 文件保存时会自动编译。
2. 实现浏览器实时预览
编译出 CSS 后，需要浏览器自动刷新才能看到效果。
- 使用 Live Server（推荐）：在 VS Code 中更常见，但 Sublime 可搭配外部工具。建议使用 Node.js 的 live-server：
终端运行npm install -g live-server，进入项目目录执行live-server，打开页面后，CSS 更新时浏览器自动刷新。 - 使用 Browser Refresh 插件：Sublime 安装 Browser Refresh，配合 Gulp 或 Webpack 等工具监听文件变化并触发刷新。
3. 使用 Gulp 自动化工作流（高级用户）
适合需要统一管理多个任务的项目。
创建 gulpfile.js，示例代码：
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const less = require('gulp-less');
const browserSync = require('browser-sync').create();
gulp.task('sass', function() {
return gulp.src('src/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
});
gulp.task('less', function() {
return gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
});
gulp.task('serve', function() {
browserSync.init({
server: './'
});
gulp.watch('src/sass/*.scss', gulp.series('sass'));
gulp.watch('src/less/*.less', gulp.series('less'));
gulp.watch('./*.html').on('change', browserSync.reload);
});
gulp.task('default', gulp.parallel('serve'));
运行 gulp 后，修改 LESS/SASS 文件会自动编译并刷新浏览器。
基本上就这些。Sublime 需依赖外部工具链实现完整预览流程。轻量项目可用 Less2CSS + live-server，复杂项目建议上 Gulp 或 Webpack。关键是文件监听和浏览器刷新联动。
