在没有空格的情况下以较小(css)连接值

Question

所以我试图制作一个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)
}

现在我刚刚修改了编译器脚本,以便它不会在变量/关键字连接之间放置空格.我希望有更好的解决方案.

Answer 1

一个解决方案,虽然有点难看,但将使用转义字符串:

@degs: ~"@{rotation}deg"
@degs-ie: @rotation / 90;
transform: rotate(@degs);
filter: ~"DXImageBlahBlah(rotation=@{degs-ie})"

请注意,您需要less.js v1.1.x.

Answer 2

更简洁的方法是使用unit(官方文件):

unit(@rotation, deg)

在你的例子中变成:

transform: rotate(unit(@transition, deg));

文档:

单位(维度,单位)

• dimension:一个数字,有或没有维度
• unit(可选):要更改的单位,或者如果省略它将删除该单位