Less中没有filter()滤镜函数，它仅支持变量和mixin封装CSS原生filter值；所有filter函数如blur()、contrast()等均由浏览器运行时解析，Less不校验语法且无法动态生成。
Less里根本没有filter()滤镜函数
Less 本身不提供类似 filter() 的内置函数来生成 CSS filter 值。你看到的所谓“Less滤镜函数”，基本是误传，或是混淆了 CSS 原生 filter 属性与预处理器能力的边界。Less 只能做字符串拼接、颜色运算、数值计算等静态编译期操作，无法动态生成图像处理逻辑。
真正起作用的是 CSS 原生的 filter 属性，它接收如 blur(2px)、contrast(1.4)、drop-shadow() 这类函数值——这些是浏览器运行时解析的，和 Less 编译完全无关。
所以关键不是“怎么用 Less 函数生成滤镜”，而是“怎么在 Less 中安全、可维护地写 CSS filter 值”。
用 Less 变量和混合（mixin）封装常用 filter 组合
虽然不能“生成”滤镜，但可以避免硬编码、提升复用性。比如统一管理毛玻璃效果或图片增强参数：
立即学习“前端免费学习笔记（深入）”；
@glass-blur: 12px;
@glass-backdrop: rgba(255, 255, 255, 0.1);
.glass-effect {
backdrop-filter: blur(@glass-blur);
-webkit-backdrop-filter: blur(@glass-blur); // Safari 兼容
background-color: @glass-backdrop;
}
.img-enhance {
.filter-sharp-contrast() {
filter: contrast(1.2) brightness(1.05) sharpen(0.8); // 注意：sharpen 不是标准 CSS filter，无效
}
.filter-sharp-contrast();
}
注意：sharpen() 等非标准函数不会生效，必须只用 CSS 规范支持的函数（blur()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()、drop-shadow()）。
- 所有 filter 值都在编译后原样输出到 CSS，Less 不校验语法正确性
- 多个 filter 函数用空格连接，不是逗号 —— 写成
filter: blur(1px), contrast(1.2)会直接失效 - Safari 对
backdrop-filter要求严格：父容器需有透明背景或background-clip配合，否则不渲染
动态 filter 值？只能靠 JavaScript 或 CSS 自定义属性
如果需要根据状态切换模糊强度（比如 hover 时从 blur(0) 到 blur(4px)），Less 无能为力——它无法响应运行时变化。此时必须：
- 用 CSS 自定义属性（
--blur-size: 0px）配合filter: blur(var(--blur-size))，再由 JS 修改style.setProperty - 或直接写带 transition 的 class 切换：
.img--blurred { filter: blur(4px); transition: filter 0.3s ease; } - Less 可以帮你批量生成这类状态类，例如用循环 mixin 生成
blur-1到blur-10类，但本质仍是静态规则
别试图用 lighten(@color, 20%) 去“模拟”滤镜效果——颜色函数只作用于颜色值，对图片像素无影响。
兼容性和性能陷阱必须手动兜底
CSS filter 在部分场景会触发合成层（layer），但也可能意外导致重绘开销飙升，尤其在滚动容器中滥用 blur()：
- Android Chrome 旧版本（≤80）对
backdrop-filter支持极差，需用@supports (backdrop-filter: blur(1px))包裹并提供降级 -
filter会让元素脱离普通文档流的绘制优化，复杂动画中建议加will-change: filter（但别滥用） - Less 编译不检查是否写了
-webkit-filter，而 iOS Safari 12–13 仍需前缀，得手动补全
最常被忽略的一点：filter 效果会作用于整个元素及其子树。给一个含文字的卡片加 grayscale(1)，文字也会变灰——这不是 bug，是设计使然。
