less中filter多声明会覆盖，因css同名属性取最后值；必须用mixin动态拼接空格分隔字符串，并以e()去引号，否则输出带引号的无效值。
滤镜函数参数不能直接拼接，必须用 e() 去引号 + 条件拼接字符串，否则编译后是带引号的无效值。
为什么 filter 多个声明会互相覆盖
Less 不会自动合并多个 filter 声明。写成：
.box {
filter: blur(2px);
filter: contrast(1.3);
}
最终只生效 contrast(1.3) —— 后者完全覆盖前者。CSS 标准规定同名属性重复时取最后一个，而 Less 编译器不会帮你串起来。
- 必须手动拼成单个空格分隔的字符串：
filter: blur(2px) contrast(1.3) brightness(0.9) - 不能用变量直接相加：
@a: blur(2px); @b: contrast(1.3); filter: @a @b;→ 编译报错Expected ')' - 也不能用
+拼接字符串：~"@{a} @{b}"在旧版 Less 中行为不稳定，且无法做条件过滤
如何用 .filter() Mixin 动态组合参数
核心是：每个参数设默认“无效果”值（如 @contrast: 1），再用 & when () 判断是否需要加入该滤镜，最后用 e(@filter-list) 去引号。
-
@blur: 0表示不模糊；@contrast: 1表示原始对比度；@hue-rotate: 0deg表示不旋转色相 - 条件判断必须严格：
& when (@blur > 0)，而不是& when (@blur)（0 会被当 false，但 px 单位会导致判断失败） -
e(@filter-list)不可省略：没有它，输出的是filter: "blur(2px) contrast(1.3)"，引号让整个值失效 - 参数顺序不影响结果，但建议按浏览器解析习惯排列：blur → brightness → contrast → saturate → hue-rotate → grayscale
灰度切换必须显式加 transition: filter
grayscale(0) 到 grayscale(1) 不会自动过渡，因为浏览器不认为两个函数调用之间可插值。
- 必须在触发元素上写：
transition: filter 0.3s ease;，仅写transition: all不可靠 - 数值单位要统一：全用小数（
grayscale(0.7)）或全用百分比（grayscale(70%)），混用会导致部分浏览器跳变 - 封装
.grayscale-toggle()时，用isnumber()和isstring()分支处理on/off，避免把"75%"当作非法字符串丢弃 - 如果用了
drop-shadow()等含空格/括号的函数，也得进同一个@filter-list字符串，不能单独声明
最容易被忽略的是：e() 函数不是可选语法糖，而是决定滤镜是否生效的开关；还有 transition 必须写在起始状态上，而不是 hover 或 active 里——否则第一次悬停仍无动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
