css - 用更少的(css)串联值，不带空格

所以我正在尝试制作一个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。

关于css - 用更少的(css)串联值，不带空格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6027232/