纯CSS的:active在iOS Safari中常失效，需Sass mixin封装+JS控制is-pressed类实现可靠反馈；必须用transform:scale()而非opacity以避免重排、增强物理反馈感，并注意will-change、backface-visibility等兼容处理。
点击反馈为什么不能只靠 :active
纯 CSS 的 :active 伪类在移动端经常失效或延迟响应，尤其在 iOS Safari 中——触摸开始时触发，但松开手指后不保证重绘，导致视觉反馈“卡住”或完全没反应。Sass 本身不增强交互能力，但通过 @mixin 封装一套可复用、带降级和平台适配的点击状态类，能统一管理样式逻辑，避免每个按钮都手写重复代码。
用 click-feedback Mixin 统一处理触摸与鼠标
核心是区分输入方式：对 pointer: coarse（触屏设备）启用 :active + JS 触发的临时类；对 pointer: fine（鼠标）仅用 :hover 和 :active。Mixin 不直接绑定事件，而是生成对应的选择器组合：
@mixin click-feedback($bg-color: rgba(black, 0.1), $scale: 0.98) {
&.is-pressed {
background-color: $bg-color;
transform: scale($scale);
}
@media (hover: hover) and (pointer: fine) {
&:hover {
background-color: $bg-color;
}
&:active {
background-color: darken($bg-color, 15%);
transform: scale($scale);
}
}
@media (pointer: coarse) {
&:active,
&.is-pressed {
background-color: $bg-color;
transform: scale($scale);
}
}
}
使用时只需在按钮类中调用：@include click-feedback(#007bff);，再由 JS 在 touchstart/mousedown 时添加 is-pressed 类，touchend/mouseup 时移除——这样既兼容老浏览器，又绕过 iOS :active 的渲染 bug。
为什么必须加 transform: scale() 而不是改 opacity
单纯用 opacity 变化做点击反馈，在部分 Android WebView 和旧版 Chrome 中会触发重排（reflow），造成卡顿；而 transform 属于合成层操作，性能更稳。更重要的是：scale 提供明确的空间压缩感，比透明度变化更能传达“被按下的物理反馈”。但要注意两点：
- 元素需有
will-change: transform或父容器设transform: translateZ(0)，否则某些安卓机型仍可能闪屏 - 若按钮含文字，
scale会导致字体模糊，建议配合backface-visibility: hidden - 不要对
inline元素直接用transform，先确保它是inline-block或block
JS 绑定时容易漏掉的三个边界情况
Mixin 只管样式，JS 才决定何时加类。常见疏漏包括：
- 未阻止
touchmove后的误触发：用户滑动页面时手指经过按钮，touchstart已触发但不该算点击，需在touchmove中标记并跳过touchend - 未处理
blur或mouseleave清理is-pressed：鼠标拖出按钮后松开，类还挂着，视觉残留 - 未兼容
click事件的detail === 0场景：某些自动化测试或屏幕阅读器触发的 click 不带真实按下动作，不应触发反馈
真正可靠的点击反馈，永远是 Sass + 带判断的轻量 JS + 合理的媒体查询三层咬合。缺一层，移动端就大概率失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
