Sass嵌套超3层会加剧CSS维护难度，应限制深度、善用@mixin和%placeholder、规范&用法及url注释等细节。
嵌套层级超过3层时，Sass反而让CSS更难维护
嵌套本身不解决问题，只是把选择器写法从平铺变成缩进。真正起作用的是「语义分组」和「作用域收敛」。一旦嵌套超过 & 三层（比如 .header .nav .item .link:hover 展开成四层嵌套），编译出的CSS选择器权重会飙升，且难以被外部覆盖。
常见错误现象：!important 满天飞、组件样式在父容器里失效、调试时DevTools里找不到对应规则。
- 用
@mixin替代深层嵌套：把重复结构（如按钮状态）抽成可复用块，而不是靠&:hover套娃 - 限制嵌套深度：Sass官方推荐不超过3层；可用
stylelint-config-sass-guidelines配合max-nesting-depth: 3自动拦截 - 子选择器（
>）比后代选择器（空格）更可控——它明确切断了“意外继承”，也避免编译出过长的选择器链
Sass中 & 的实际作用范围经常被误读
& 不是“当前选择器”，而是“父级选择器的完整字符串拼接结果”。比如在 .btn { &--primary { color: blue; } } 中，& 是 .btn；但若写成 .btn { .icon { &--small { ... } } }，& 就变成 .icon，而非 .btn .icon —— 这是很多人改样式时突然失灵的根源。
使用场景：组件化开发中需要 BEM 风格命名（如 .card__title、.card__body），必须依赖 & 精确拼接，不能靠视觉缩进猜。
立即学习“前端免费学习笔记（深入）”；
- 检查
&前有没有空格：有空格就是后代选择器，没空格才是直接拼接 - 嵌套里再嵌套时，
&只认最近一层的父选择器，不会“回溯”到外层 - 想保留外层上下文？用变量暂存：
$block: ".card"; #{$block} { #{$block}__title { ... } }
@extend 和 %placeholder 在复用时的实际差异
@extend 是编译期合并选择器，而 %placeholder 是仅用于 @extend 的“纯抽象规则”，两者都生成冗余选择器，但影响不同。滥用 @extend 会导致 CSS 文件体积暴涨，尤其在多个组件共用同一基础类时。
性能影响：一个 %button-base 被10个组件 @extend，最终CSS里会出现10组重复声明，哪怕它们完全一样。
- 优先用
%placeholder而非.class-name做@extend，避免把占位符样式意外输出到CSS中 - 当复用逻辑涉及计算（如
calc()、var(--x)）或响应式断点时，@mixin比@extend更灵活、更易调试 - 注意
@extend无法跨文件生效——除非用@use显式导入，且目标必须是%开头
从CSS到Sass迁移时最常漏掉的兼容性细节
不是所有CSS都能无脑塞进 .scss 文件。Sass 会把未加引号的 url(assets/logo.png) 当作函数调用报错；也会把 /* comment */ 编译成单行注释（//），导致压缩后消失；更麻烦的是，某些PostCSS插件（如 autoprefixer）默认只处理纯CSS，对Sass输出的CSS可能跳过补全。
参数差异：Sass 4.0+ 默认启用 module system，@import 已被标记为废弃，必须改用 @use，否则变量/混合宏跨文件不可见。
-
url()内路径必须加引号：url("assets/logo.png")，否则 Sass 尝试解析为函数 - 多行注释用
/* */，单行注释用//；后者不会输出到最终CSS，适合写开发说明 - 用
@use "sass:math"替代旧版@import "sass/math"，否则math.div()类函数不可用
嵌套不是银弹，真正的优化来自克制地用 &、清醒地选 @mixin 还是 %placeholder、以及每次保存前看一眼编译后的CSS是否真变短了——而不是缩进看起来更整齐了。
