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

Answer 3

Thank you cloudhead. Since the escaping for LESS PHP is a little different, this is what worked for me:

.rotation(@rotation:90){
  @degs: e("@{rotation}deg");
  @degs-ie: @rotation / 90;

  -webkit-transform: rotate(@degs);
  -moz-transform: rotate(@degs);
  transform: rotate(@degs);
  filter: e("progid:DXImageTransform.Microsoft.BasicImage(rotation=@{degs-ie})");
}

Answer 4

For anyone that found this old item about concatenation without spaces, there is a bug/feature request in LESS #1375 (Opened in 2013, unfixed as of Jan 2016) that describes the problem.

Problem:

@CharTinySpace: \\2009;
content: "@CharTinySpace@CharTinySpace";

Output:

content: " \2009 \2009 ";

Which adds extra space to the display.

A solution can be to use an embedded JavaScript replacement:

@CharTinySpace: \\2009;
content: `"@{CharTinySpace}@{CharTinySpace}".replace(/ /g,"")`;

Output:

content: "\2009\2009";

Not the best solution, but the only one that worked in my instance where I want readable varables instead of unicode escape values.

---

Update: Thanks to seven-phases-max, the proper solution is MUCH simpler.

@CharTinySpace: \\2009;
content: "@{CharTinySpace}@{CharTinySpace}";

I'm leaving this here in case the JavaScript option is a useful clue to future discoverers.