我正在使用{less}并遇到使用括号的问题.我为
CSS3转换属性编写了一个mixin.我无法弄清楚如何在编译的CSS中使用括号. Less将括号视为操作并省略它们.
原始CSS：
.plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg); }
我写的更少mixin：
.transform (@action,@value){
-webkit-transform: @action(@value);
-moz-transform: @action(@value);
-o-transform: @action(@value); }
并且编译的CSS导致：
.plus {
-webkit-transform: rotate 45deg;
-moz-transform: rotate 45deg;
-o-transform: rotate 45deg; }
解决方法
您可以将其保留为一个值,并在调用它时传入您需要的任何值.
.transform(@value) {
-webkit-transform: @arguments;
-moz-transform: @arguments;
transform: @arguments;
}
.plus {
.transform(rotate(45deg));
.transform(scale(1.5,2.0));
}
编译成
.plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform: scale(1.5,2);
-moz-transform: scale(1.5,2);
transform: scale(1.5,2);
}
