Less中直接写filter: grayscale()切换不生效，因grayscale(0)与grayscale(1)是函数调用而非可插值数值，浏览器默认不支持其过渡；须显式声明transition: filter 0.3s ease，并统一用小数或百分比写法（如grayscale(0)→grayscale(1)），避免单位混用、!important覆盖及兼容性问题。
Less中直接写filter: grayscale()为什么切换不生效
因为浏览器对filter的过渡（transition）支持有前提：必须是可插值的数值类型，而grayscale(0)和grayscale(1)虽然看着像数字，但实际是函数调用，CSS引擎默认不认为它们可过渡。直接写transition: filter 0.3s在多数情况下会“卡住”或跳变。
解决思路不是绕开filter，而是让Less生成带中间帧、语义清晰、且能被浏览器平滑插值的CSS规则。关键点：避免在变量里拼接函数字符串，改用参数化混合宏控制数值本身。
封装.grayscale-toggle()混合宏：支持百分比/小数/开关三态
这个宏要覆盖真实使用场景：设计师给的是100%、后端传的是0.8、UI组件需要on/off布尔控制。Less不支持运行时类型判断，所以靠参数重载+默认值兜底：
.grayscale-toggle(@value) when (isnumber(@value)) and (@value >= 0) and (@value =< 1) {
filter: grayscale(@value);
}
.grayscale-toggle(@value) when (isstring(@value)) and (e(@value) = "on") {
filter: grayscale(1);
}
.grayscale-toggle(@value) when (isstring(@value) and e(@value) = "off") {
filter: grayscale(0);
}
.grayscale-toggle(@value) when (ispixel(@value)) {
// 兼容旧设计稿里写的 100px（误用），转成 1
filter: grayscale(1);
}
.grayscale-toggle(@value) when (ispercentage(@value)) {
filter: grayscale(@value * 0.01);
}使用示例：
立即学习“前端免费学习笔记（深入）”；
.icon { .grayscale-toggle(0.6); }
.photo { .grayscale-toggle(75%); }
.avatar { .grayscale-toggle(on); }注意：@value * 0.01把75%转成0.75，才能被grayscale()正确接收——Less的ispercentage()只判类型，不自动归一化。
配合transition实现平滑切换的关键写法
光有宏不够，CSS层必须显式声明可过渡属性。很多人漏掉这点，导致宏生效了但动画不动：
-
filter本身支持过渡，但必须写全称，不能简写成all - 必须同时定义起始态和结束态的
filter值（哪怕其中一个是none） - 推荐加
will-change: filter防低端设备掉帧（仅在频繁切换时启用）
正确组合写法：
.card-img {
.grayscale-toggle(0);
transition: filter 0.25s ease-in-out;
&:hover {
.grayscale-toggle(1);
}
}
// 或用类名控制
.is-disabled {
.grayscale-toggle(0.4);
transition: filter 0.2s;
}IE兼容性 fallback 和灰度失效排查点
IE10+ 支持filter: gray（老式滤镜），但和grayscale()行为不一致：它是二值开关，不支持渐变。如果项目还要兼容IE，得手动加回退：
.grayscale-toggle(@value) {
.grayscale-toggle(@value);
// IE fallback
& when (@value > 0) {
filter: gray;
}
& when (@value = 0) {
filter: none;
}
}但更现实的问题是：某些图片在Chrome里灰度异常偏暗或发绿。这不是Less问题，而是grayscale()基于sRGB色彩空间计算，若原图含ICC配置文件（如Photoshop导出的带色彩配置的PNG），滤镜会失真。解决方案只有两个：前端统一转sRGB导出，或后端用ImageMagick预处理——这个环节Less插不上手，但得知道瓶颈在哪。
