真正让css体积失控的是源码级冗余：深层嵌套（≥3层）复制前缀、@extend跨上下文生成爆炸式选择器、@for生成固定规则、@import全量引入大库；--style=compressed仅删空格换行，不减少选择器数量或合并重复声明。
怎么用 grep 快速定位重复声明和爆炸式选择器
直接在编译后的 main.css 上运行命令，比看源码快得多。体积问题不是“写得不够压缩”，而是“生成了太多不该有的规则”。
-
grep -o "margin: 0\.5rem" main.css | wc -l—— 如果结果 >20，基本是@extend %spacing-sm或嵌套中反复@include spacing()导致的复制 -
grep -o "\.card \.header \.title" main.css | wc -l—— 出现即说明嵌套 ≥3 层，且未扁平化命名 -
grep -o "\.btn, \.modal .btn, \.sidebar .btn" main.css—— 这类逗号分隔长列表是@extend跨上下文调用的铁证
哪些 SCSS 写法会在编译后“自动增肥”
不是所有语法都安全。有些写法看似省事，实则每调用一次就往 CSS 里塞一整块逻辑。
-
@extend %flex-center放在.card { }块内 → 编译出.card .btn, .card .modal，而不是.btn, .modal -
@for $i from 1 through 100 { .m-#{$i} { margin: #{$i}px; } }→ 固定产出 100 条规则，PurgeCSS 无法裁剪动态类名 -
@import "bootstrap.scss"（哪怕只用了px2rem()）→ 全量拼接，bootstrap.scss里所有@mixin、%placeholder、嵌套都会参与编译 -
@each $type in (primary, secondary, danger) { .btn--#{$type} { @include btn-variant($type); } }→ 若btn-variant()内含嵌套或&:hover，每轮都展开完整结构
为什么开了 --style=compressed 还看不出问题
因为这个参数只删空格和换行，不改变选择器数量、不合并重复声明、不剔除未用类。你看到的“紧凑 CSS”仍是语义膨胀的原始输出。
- 深层嵌套：
.layout .sidebar .nav .item a压缩后变成.layout .sidebar .nav .item a{}，长度没变，匹配成本也没降 - sourceMap 默认开启时，会在文件末尾追加 base64 字符串，单次增加 100KB+，但
--style=compressed完全不管它 - Webpack/Vite 中若没显式设
sassOptions.outputStyle = 'expanded'，后续cssnano可能解析失败，导致压缩链失效
审查时该盯住哪几行 SCSS 源码
别通读文件，聚焦高危模式。以下写法出现即停，立刻查编译输出是否已失控：
- 嵌套超过 3 层：
.card { .list { .item { &:hover { ... } } } }→ 改用 BEM 命名（.card-list-item:hover） -
@extend出现在@media或&:hover块内 → Sass 会把媒体查询/伪类“提级”，触发组合爆炸 -
@import路径含通配符（如@import "components/*.scss"）→ Webpack/Vite 会静默加载全部，无法按需 -
@use "mixins"后未限定作用域（如mixins.flex-center()），却在循环中无条件调用 → 每次都展开完整逻辑
@extend 复制规则块、@for 复制整段声明。审查时必须跳过格式，直击生成逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
