atom本身不编译sass/less，必须全局安装dart sass（npm install -g sass）和less（npm install -g less），再配合atom-build-sass+build-on-save（sass）或less-build+build（less）插件，并配置--style=expanded --source-map --update（sass）或--source-map --no-js（less）等参数实现保存自动编译。
Atom 本身不编译 Sass/Less，必须装对命令行工具
Atom 是纯编辑器，没有内置编译能力。插件如 atom-build-sass 或 less-build 只是“调度员”，真正干活的是你系统里装的 sass 或 lessc 命令。如果终端里运行 sass --version 或 lessc --version 报错，Atom 就一定编译失败。
务必用 Dart Sass（不是已废弃的 node-sass）：
-
npm install -g sass（Sass/SCSS） -
npm install -g less（Less）
装完后重启 Atom；macOS 用户若用 zsh + Homebrew，可能需手动在插件设置里填 executablePath，比如 /opt/homebrew/bin/sass。
插件选型与安装：别踩 atom-less 这个坑
atom-less 自 2017 年停更，依赖旧版 less，解析嵌套、@import "vars.less" 会报错，且根本不输出 CSS 文件——它只是语法高亮器，不是编译器。
可靠组合只有两个：
- Sass：
atom-build-sass+build-on-save（后者单独安装） - Less：
less-build+build（自带构建系统支持）
安装后，首次触发构建（Ctrl+Shift+B）会自动生成 .atom-build.json，注意检查其中 "cwd" 是否指向项目根目录，否则 @import 相对路径全失效。
保存即编译的关键配置：参数和路径不能省
build-on-save 默认只监听主入口文件（如 main.scss），如果你当前标签页是 _mixins.scss，它就静默不编译——必须确保激活的是被 @import 的顶层文件。
插件的 Arguments 栏必须手动填全：
- Sass 示例：
--style=expanded --source-map --update - Less 示例：
--source-map --no-js（Less v4.2+ 强制要求，漏掉就卡住无提示）
输出路径默认是同目录下同名 .css；想输出到 dist/css/？部分插件版本不支持 outputPath 配置，硬填可能无效——优先用 --update 增量编译，避免大项目全量重刷卡顿。
为什么 CSS 没 source map 或格式混乱
这不是 bug，是插件默认极简调用：sass main.scss 等价于 --style=compressed --no-source-map，生成的 CSS 压缩且无映射文件。
调试时必须显式加 --source-map 和 --style=expanded：
-
--source-map让 Chrome DevTools 点样式能跳回原始.scss行号 -
--style=expanded输出换行缩进，体积大 3–5 倍，但可读性强 -
--update启用增量编译，只处理改动文件，大项目必备
容易被忽略的是：source map 文件（.css.map）必须和 .css 同目录，且 WebStorm 里要填进 Output paths to refresh 字段；Atom 插件虽不显式暴露该字段，但若 .map 不更新，大概率是 --source-map 参数没生效或路径含中文/空格。
