当使用多个值调用时，某些 mixin 参数保持不变

Some mixin parameters remain unchanged when called with several values

本文关键字：参数 mixin 某些 值调用      更新时间：2023-09-26

我有一个.less样式表，其中包含用于自定义渐变的混合。当我用它创建几个渐变时，所有其他浏览器的规则都很好，但旧 IE 浏览器的filter在第一次调用后不会改变。

这是我设法复制我的问题的一个精简示例：

.myGradient(@bg: rbg(255,255,255), @start: #FFFFFF, @end: #E6E6E6) {
        background: @start;
        background: -webkit-linear-gradient(top, @start 0%,@end 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@start, endColorstr=@end,GradientType=0 );
}
.one {
        .myGradient(#ffa201,#ffa201,#ff7301);
}
.two {
        .myGradient(#aaaaaa,#aaaaaa,#cccccc);
}
.three {
        .myGradient(#ffffff,#ffffff,#000000);
}

以下是lessc 1.3.0生成的 CSS：

.one {
  background: #ffa201;
  background: -webkit-linear-gradient(top, #ffa201 0%, #ff7301 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffa201, endColorstr=#ff7301, GradientType=0);
}
.two {
  background: #aaaaaa;
  background: -webkit-linear-gradient(top, #aaaaaa 0%, #cccccc 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffa201, endColorstr=#ff7301, GradientType=0);
}
.three {
  background: #ffffff;
  background: -webkit-linear-gradient(top, #ffffff 0%, #000000 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffa201, endColorstr=#ff7301, GradientType=0);
}

如您所见，webkit 渐变按预期工作，但 IE 渐变始终保持橙色。可能出了什么问题？

尝试：

filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@start,@end));
相关文章：