嵌套调用less函数时参数值的变化及提取部分-遁地…

2018-06-24 01:27:39来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

在a.less中导入base.less
a.less中的代码

.animate-ripple-ink{
.animation(ripple .5s linear;{
100%{
opacity: 0;
.transform(scale(2.5));
}
});
}

base.less中的代码

.animation(@value;@content){
-webkit-animation: @value;
-moz-animation: @value;
-o-animation: @value;
-ms-animation: @value;
animation: @value;
.keyframes(~`"@{value}".split(/,\s+/)[0].replace("[","")`,@content);
}

@value的值为[ripple, .5s, linear]
"@{value}"成为字符串"[ripple, .5s, linear]",避免js解析错误。
~避免编译,不加则输出为"ripple"
Tips:

.animate-ripple-ink{
.animation(ripple .5s linear;{
100%{
opacity: 0;
.transform(scale(2.5));
}
});

 

少一个},less竟然不报错,而是调用一个参数的.animation !我觉的这是一个bug。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Grunt压缩HTML和CSS

下一篇:css雪碧技术的用法。