应封装带参数的Mixin（如.filter-blur()和.backdrop-blur()），支持多单位、自动前缀、will-change优化及@media条件控制，避免硬编码blur值导致维护困难、主题失效与响应式断裂。
直接用 blur() 函数就能实现高斯模糊，但硬写在每个选择器里会导致维护困难、主题切换失效、响应式适配断裂。真正可控的做法是封装成带参数的 Mixin，并把单位、断点、降级逻辑都收口进去。
如何定义可配置的 blur Mixin
不能只写 .blur(@radius) 这种裸参数，得考虑单位兼容性、浏览器前缀、以及是否要配合 backdrop-filter 做背景虚化。实际项目中更常用的是两个分离的 Mixin：.filter-blur() 用于内容模糊（如头像），.backdrop-blur() 用于毛玻璃效果（如弹窗遮罩）。
-
@radius必须支持多种单位：数值（自动补px）、带单位字符串（如"2px"或"0.5rem"），用isnumber()和isstring()判断后统一处理 - 旧版 Safari 需要
-webkit-backdrop-filter，但新版已原生支持，Mixin 内部用.backdrop-blur()自动 fallback，不暴露前缀细节 - 别忘了加
will-change: filter提升动画性能，尤其在 hover 或 transition 场景下
为什么不能直接在 class 里写 blur() 而要封装
常见错误是这样写：.card--blurred { filter: blur(4px); }。问题在于：
- 换主题时所有
blur()值要全局搜索替换，容易漏掉或误改 - 响应式场景下无法按断点动态缩放模糊强度（比如移动端减半）
- 和
transform或opacity动画混用时，没加will-change会导致卡顿 - 当需要禁用模糊（如打印样式表或低性能设备）时，没法通过一个开关统一关掉
正确做法是用变量控制开关：@enable-blur: true;，再在 Mixin 里加 when (@enable-blur = true) 条件包裹生成逻辑。
如何让 blur 效果适配深色模式与打印媒体
blur 本身不感知颜色模式，但它的视觉影响在深色/浅色背景下差异很大——同样 4px 在白色背景上显得“脏”，在深灰背景上可能根本看不出来。解决方案不是调参数，而是分层控制：
- 用 CSS 自定义属性
--blur-radius接入主题系统，Less 编译时注入对应值，避免 JS runtime 操作 - 打印媒体查询内直接覆盖 Mixin 输出：
@media print { .filter-blur() { filter: none; } } - 对低性能设备（
@media (prefers-reduced-motion: reduce)）也做关闭处理，防止动画卡顿
注意：不要在 Mixin 里写 @media 嵌套，应把媒体查询提一层，让调用方决定是否包裹——否则会污染下游组件的输出结构。
blur Mixin 的典型调用与陷阱
最简调用是 .filter-blur(6px)，但真实项目中常踩这些坑：
- 传参写成
.filter-blur(6)却忘记单位，Less 不报错但编译结果是blur(6)—— 浏览器不识别，直接失效 - 在伪类里调用（如
&:hover）没重置will-change，导致 hover 结束后仍触发合成层，内存泄漏 - 用
backdrop-filter时父容器没设background-color: transparent，虚化区域被底色“吃掉” - 和
clip-path同时使用时，blur 会溢出裁剪区域，需额外加overflow: hidden
复杂点在于 blur 是唯一一个在渲染管线中既影响绘制又影响合成的滤镜，它不像 color 或 margin 那样线性可控。所以 Mixin 不是“写完就扔”，每次升级浏览器版本后都得验证 Safari/iOS 是否还支持当前写法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
