sass编译输出css有四种风格：nested（默认）、expanded、compact、compressed；dart sass已移除compact支持，推荐用--style指定nested/expanded/compressed，配合--source-map实现压缩下调试。
Sass 编译输出的 CSS 样式风格可以直接控制，不需要改源码或动 engine.rb——那只是旧版 Ruby Sass 的野路子，现在早该弃用了。
用 sass CLI 命令指定 --style
命令行是最直接、最通用的方式，适用于所有 Sass 版本（Dart Sass 推荐）：
-
sass默认用nested风格，但你可以随时覆盖 - 四种合法值：
nested、expanded、compact、compressed - 注意：Dart Sass 已移除
compact支持，只保留nested、expanded、compressed
常见用法示例：
sass src/style.scss dist/style.css --style expanded sass --watch src/:dist/ --style compressed
容易踩的坑：
-
compact在 Dart Sass 中会报错Invalid value for option "style"，别再试了 - 使用
--watch时，路径末尾加斜杠表示目录映射，不加是单文件映射 -
compressed模式下不会生成 sourcemap，除非显式加--source-map
在 gulp-sass 中设置 outputStyle
如果你用 Gulp 构建流程，gulp-sass 封装了 Dart Sass，通过 outputStyle 选项传参：
关键点：
- 参数名是
outputStyle（不是style），且值为字符串，如'expanded' - 必须确保
gulp-sass版本 ≥ 5.0.0（对应 Dart Sass），老版本（基于 Node Sass）已停更且不兼容新语法 - 错误写法：
style: 'expanded'或outputStyle: expanded（没引号）都会失效
正确示例：
const sass = require('gulp-sass')(require('sass'));
gulp.task('sass', () => {
return gulp.src('src/**/*.scss')
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
.pipe(gulp.dest('dist/css'));
});
VS Code / Sublime 等编辑器插件怎么配？
这类插件（如 Sublime 的 SublimeOnSaveBuild 或 VS Code 的 Sass 扩展）本质还是调 CLI，所以配置项最终都映射到 --style 参数：
实操建议：
- Sublime：检查构建系统（
.sublime-build文件）里是否含"args": ["--style", "expanded"] - VS Code：在
settings.json中搜sass.style，设为"expanded"（部分扩展支持此配置项） - 不要去改 Ruby Sass 的
engine.rb——你大概率根本没装 Ruby Sass，硬改反而导致command not found: sass
compressed 模式下丢失调试信息怎么办？
compressed 默认关闭 sourcemap 和行号映射，但开发阶段又需要压缩 + 可调试，得手动补全：
必须同时加两个参数：
-
--style compressed控制输出格式 -
--source-map（或--source-map=inline）生成映射文件
例如：
sass src/main.scss dist/main.css --style compressed --source-map
注意：
-
--source-map单独用默认生成.css.map文件；加=inline会把 map 内联进 CSS 注释里 - 浏览器 DevTools 能识别 inline sourcemap，但某些 CDN 会剥离注释，此时应选独立文件模式
- Webpack/Vite 等现代打包工具通常接管了 sourcemap 逻辑，这时不该在 Sass 层重复开启
真正麻烦的从来不是选哪种风格，而是混用不同 Sass 实现（Ruby / Node / Dart）还沿用旧文档参数——先确认 sass -v 输出的是 Dart Sass，再动手配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
