Sublime Text 需通过插件配合外部编译器（如 sass、lessc）实现 Sass/Less 自动编译，因其无内置运行时环境，必须手动配置构建系统调用命令；SublimeLinter 等仅校验语法，不生成 CSS。
Sublime Text 本身不支持 Sass/Less 自动编译，必须通过插件 + 外部编译器（如 sass、lessc）协同实现；直接装个插件就“开箱即用”是常见误解。
为什么 SublimeLinter 或 Emmet 不能编译 Sass？
这些插件只负责语法高亮、代码补全或校验，不调用编译器。真正生成 .css 文件需要执行 sass 命令（Dart Sass）或 lessc 命令。Sublime 没有内置运行时环境，必须显式配置构建系统（Build System）来调起终端命令。
-
SublimeLinter-sass只检查语法错误，不输出 CSS - 没装
sassCLI（npm install -g sass）或lessc（npm install -g less），插件会报command not found - Windows 用户若用 Git Bash 或 PowerShell 而非 cmd，默认构建系统可能找不到全局 npm bin 路径
配置 Build System：Sass（Dart Sass）最简可用方案
新建 Tools → Build System → New Build System，粘贴以下内容并保存为 Sass.sublime-build（路径通常是 Packages/User/）：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
{
"cmd": ["sass", "--watch", "$file:${file_path}/${file_base_name}.css", "--style=expanded"],
"selector": "source.sass, source.scss",
"file_regex": "^(...*?):([0-9]+):([0-9]+)",
"windows": {
"cmd": ["sass.cmd", "--watch", "$file:${file_path}/${file_base_name}.css", "--style=expanded"]
}
}
-
$file是当前 .scss/.sass 文件，${file_path}/${file_base_name}.css是输出路径（和源文件同目录） -
--style=expanded避免压缩后难调试；生产可用--style=compressed - Windows 必须用
sass.cmd，否则找不到命令（npm 全局安装的可执行文件在 Windows 下是 .cmd 包装器） - 首次运行会卡住——这是正常行为，
--watch启动了监听进程，状态栏显示Building...即表示已生效
Less 编译要绕开 less-watch-compiler 的坑
官方 lessc 不支持原生 --watch（v4+ 已移除），强行用 lessc --watch 会报错 Unknown option '--watch'。必须换工具：
立即学习“前端免费学习笔记（深入）”；
- 推荐用
less-watch-compiler：npm install -g less-watch-compiler - Build System 中
cmd改为：["less-watch-compiler", "--on-change", "echo compiled", "--output", "${file_path}", "${file}"] - 注意它默认监听整个目录，不是单文件；想精确控制，加
--include参数指定.less文件 - 如果改了变量文件（如
_vars.less）但主入口没变动，它可能不触发重编——这是它的设计限制，不是配置错
真正的难点不在配置路径，而在理解「谁负责监听、谁负责执行、谁决定输出位置」。三个角色（Sublime 构建系统、Node CLI 工具、项目目录结构）稍有错位，就会静默失败——比如输出 CSS 被写到上级目录，浏览器却引用了旧文件，你根本看不出编译发生了什么。
