SCSS无法实现height: auto过渡动画，因CSS规范禁止height在0与auto间插值；正确方案是用固定max-height配合overflow: hidden和精准相邻兄弟选择器。
不能用 height: auto 做过渡动画，SCSS 只是预处理器，真正起作用的是编译后 CSS 的属性组合和值选择——关键在 max-height 的取值、overflow 的位置、以及选择器是否精准匹配 DOM 结构。
为什么 SCSS 编译不出平滑动画？
SCSS 本身不控制动画行为，它只是生成 CSS。常见失效原因是：写出了 transition: height 0.3s 却没意识到浏览器根本无法插值 height: auto；或用了 @extend 覆盖了 overflow: hidden，导致内容溢出、裁剪失效。
-
height属性在0 → auto之间无法过渡，这是 CSS 规范限制，跟 SCSS 无关 - SCSS 中若用
@include transition(height, 0.3s)，编译后仍是无效声明 - 嵌套过深（如
.accordion { &__content { ... } }）容易漏掉overflow: hidden或写错层级 - 用
!default定义$accordion-max-height: 500px很方便，但若实际内容超过该值，就会被截断
用 SCSS 正确组织手风琴变量与混合宏
把易变参数抽成变量，用 @mixin 封装可复用逻辑，但必须确保最终输出的 CSS 满足动画前提：固定 max-height + overflow: hidden + 精准兄弟选择器。
- 定义安全的展开高度：
$accordion-content-max-height: 60rem（≈960px，足够高又不过载） - 避免用
100vh：软键盘弹出或缩放时会触发重排抖动 - 用
@mixin accordion-transition统一声明：transition: max-height 0.3s ease-out, padding 0.3s ease-out - 折叠态必须含
max-height: 0和overflow: hidden，两者缺一不可 - 展开态用
max-height: $accordion-content-max-height，别用none或auto
SCSS 中最易踩坑的选择器写法
纯 CSS 手风琴依赖结构化选择器定位内容区域，SCSS 嵌套会让选择器变长、语义变模糊，稍不注意就断链。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.accordion-item { input:checked ~ .content { ... } }——~会匹配所有后续兄弟，若中间插入其他元素就失效 - 正确写法：
input[type="checkbox"]:checked + .accordion-content，+确保只选紧邻下一个兄弟 - 若内容不是紧跟
input，比如中间有label，就得用input:checked + label + .accordion-content - 用
&嵌套时注意作用域：.accordion { &__content { max-height: 0; } }输出的是.accordion__content，需确认 HTML class 名一致 - 不要在 SCSS 里写
el.style.maxHeight = ...—— 那是 JS 行为，破坏纯 CSS 前提
动态高度场景下 SCSS 的边界在哪？
SCSS 无法读取 scrollHeight，所以“自动适配高度”必须交由 JS 完成。SCSS 只能提供 fallback 值和过渡骨架。
- 当内容高度差异极大（2 行 vs 20 行），预设
$accordion-content-max-height: 60rem是最稳方案 - 若真要 JS 动态设高，应在 class 切换后用
getComputedStyle(el).maxHeight验证是否生效，而非依赖 SCSS 变量 - 可配合
transform: scaleY(0) → scaleY(1)做视觉补救，但需额外加overflow: hidden防溢出 - Tailwind 用户注意：
max-h-[60rem]必须用方括号语法，SCSS 里不能直接写max-h-60rem
真正决定手风琴是否平滑的，从来不是 SCSS 写得多漂亮，而是编译后那几行 CSS 是否满足「数值确定 + overflow 生效 + 选择器命中」这三个硬条件。变量和 mixin 只是让维护更省力，改错值、漏属性、选错兄弟节点，照样白搭。
