所以我正在尝试制作一个LESS mixin,它需要一个数字(旋转度)并输出正确的css来旋转元素。问题是,我想不出一种方法来为IE编写“ 270deg”和“ 3”(270/90)。这是我尝试过的事情:
.rotate(@rotation: 0) { @deg: deg; -webkit-transform: rotate(@rotation deg); // i can see why this doesn't work -moz-transform: rotate((@rotation)deg); // parens -o-transform: rotate(@rotation+deg); // variable-keyword concatenation transform: rotate(@rotation+@deg); // variable-variable concatenation // this is the reason I need @rotation to be just a number: filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation/90); } .someElement { .rotate(270) }
现在,我刚刚修改了编译器脚本,以便在变量/关键字串联之间不留空格。我希望有更好的解决方案。
一种解决方案(尽管有点难看)将是使用转义的字符串:
@degs: ~"@{rotation}deg" @degs-ie: @rotation / 90; transform: rotate(@degs); filter: ~"DXImageBlahBlah(rotation=@{degs-ie})"
请注意,您需要执行less.jsv1.1.x。