Less中filter属性不支持多值直接拼接，必须用空格连接成单个字符串，否则后声明会覆盖前声明；正确做法是用带参数的Mixin封装并动态拼接，配合e()函数移除引号，兼容旧版需显式添加-webkit-filter。
Less中filter属性不支持多值直接拼接，必须用空格连接字符串
Less编译器不会自动把多个filter声明合并成一个，写成两个filter: blur(2px); filter: contrast(1.3);会导致后者覆盖前者。真正生效的只有最后一个。必须手动拼成单个字符串，比如filter: blur(2px) contrast(1.3) brightness(0.9);。
常见错误是试图用变量逐个叠加：
@blur: blur(2px); @contrast: contrast(1.3); filter: @blur @contrast; // ❌ 编译报错：Expected ')'，因为Less不支持这种变量拼接语法
正确做法是用字符串插值或~""包裹，但更可靠的是用Mixin封装。
用带参数的Mixin统一管理filter组合，避免硬编码字符串
定义一个.filter() Mixin，把常用滤镜抽象为命名参数，既可读又易复用：
.filter(@blur: 0, @contrast: 1, @brightness: 1, @saturate: 1, @hue-rotate: 0deg) {
@filter-list: ~"";
& when (@blur > 0) { @filter-list: ~"@{filter-list} blur(@{blur})"; }
& when (@contrast != 1) { @filter-list: ~"@{filter-list} contrast(@{contrast})"; }
& when (@brightness != 1) { @filter-list: ~"@{filter-list} brightness(@{brightness})"; }
& when (@saturate != 1) { @filter-list: ~"@{filter-list} saturate(@{saturate})"; }
& when (@hue-rotate != 0deg) { @filter-list: ~"@{filter-list} hue-rotate(@{hue-rotate})"; }
filter: e(@filter-list);
}
使用时直接传参，未指定的默认为无效果值（如@contrast: 1）：
.card { .filter(@blur: 4px, @contrast: 1.2, @saturate: 0.8); } → 编译为 filter: blur(4px) contrast(1.2) saturate(0.8);
注意：e()函数用于移除引号，否则@filter-list会被当成带引号字符串而失效。
兼容性兜底：自动添加-webkit-filter前缀需单独处理
虽然现代浏览器已普遍支持标准filter，但iOS Safari 9–12、旧版Android WebView仍依赖-webkit-filter。Less无法用Mixin自动推导前缀，必须显式写出：
- 不能依赖Autoprefixer——它对
filter的前缀支持不稳定，尤其组合值 - 不要用
.filter()同时输出两个属性，容易漏掉某一项（比如只给blur加前缀，忘了contrast） - 推荐方案：定义一个
.filter-legacy()Mixin，仅用于需要兼容老环境的组件，内部重复生成一遍带-webkit-的完整字符串
例如：
.filter-legacy(@blur: 0, @contrast: 1, ...) {
@webkit-filter-list: ~"";
& when (@blur > 0) { @webkit-filter-list: ~"@{webkit-filter-list} blur(@{blur})"; }
// ...其余同上
-webkit-filter: e(@webkit-filter-list);
filter: e(@filter-list); // 同时输出标准版
}
性能与调试陷阱：filter值变更会触发重绘，慎用于高频动画
哪怕只是改blur(0px) → blur(1px)，浏览器也会将元素提升为独立图层并重新合成，CPU/GPU开销明显。在Less里写得再简洁，也改变不了底层渲染行为。
容易被忽略的点：
- 用
.filter()生成的CSS仍受CSS层叠规则约束——如果父级有filter，子元素无法通过filter: none完全清除，必须用filter: unset或重置全部值 - Less变量无法在运行时动态更新filter——它只是编译期字符串拼接，别指望用JS切换Less变量来“实时”调滤镜
- 调试时看DevTools的Computed面板，注意
filter是否显示为单行有效值；若看到多条灰色的filter声明，说明有覆盖未清理
复杂组合滤镜最终还是得回归到“写清楚、测真实、压性能”这三步，Mixin只是让第一部分少出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
