Javascript 某些mixin参数在使用多个值调用时保持不变
我有一个Javascript 某些mixin参数在使用多个值调用时保持不变,javascript,css,less,Javascript,Css,Less,我有一个.less样式表,它有一个用于自定义渐变的混音。当我用它创建几个渐变时,所有其他浏览器的规则都很好,但是老IE浏览器的过滤器在第一次调用后不会改变 下面是一个精简的示例,我成功地复制了我的问题: .myGradient(@bg: rbg(255,255,255), @start: #FFFFFF, @end: #E6E6E6) { background: @start; background: -webkit-linear-gradient(top, @s
.less
样式表,它有一个用于自定义渐变的混音。当我用它创建几个渐变时,所有其他浏览器的规则都很好,但是老IE浏览器的过滤器在第一次调用后不会改变
下面是一个精简的示例,我成功地复制了我的问题:
.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));
是的,成功了,谢谢!我会尽快接受你的答复。为什么会发生这种情况,以及e()
函数是什么-看起来像某种printf()
等价物?我在手册中找不到任何相关信息。e()以与~“”相同的方式删除引号。一种更新的方法是~“progid:…StartColorStr='@{start}'”。但老实说,这是less.js中的一个bug,您根本不需要这样做。