concatenate values in less (css) without a space

Question

So I'm trying to make a LESS mixin which takes a number (degrees to rotate) and output the correct css to rotate the element. The problem is, I can't figure out a way to write both "270deg" and "3" (270/90) for IE. Here are the things i've tried:

.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)
}

For now i've just modified the compiler script so that it doesn't put a space between variable/keyword concatenation. I'd hope theres a better solution.

Answer 1

One solution, although a little ugly, would be to used escaped strings:

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

Note you need less.js v1.1.x for this.

Answer 2

A cleaner approach is to use unit (official documentation):

unit(@rotation, deg)

which in your example becomes:

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

Documentation:

unit(dimension, unit)

• dimension: A number, with or without a dimension
• unit (optional): the unit to change to, or if omitted it will remove the unit