Concatenate string and var less css

Question

Can anyone please tell me how to concatenate a var and a string in LESS so I don't have the space between them?

I have the following code:

.text(@size) {
    font-size: @size + px;
    line-height: (@size / 10) + em;
}

h1 {
   .text(16)
}

What the LESS outputs is the following:

h1 {
    font-size: 12 px;
    line-height: 1.2 em;
}

I need to find a way to remove the spaces.

Thanks Pete

Answer 1

this is how I recently solved a similar problem.

.text(@size: 10) {
  font-size: e(%("%dpx", @size));
  line-height: e(%("%dem", @size/10));
}

The %("string", value) function simply format a string and so it take the %d inside the string and transform it in whatever is value. an example here: http://cdpn.io/hAbwl

Hope this can help.

Answer 2

U can use something like this:

.text(@size) {
    @lineheight: @size / 10;
    font-size: ~"@{size}px";
    line-height: ~"@{lineheight}em";
}

But on lesscss.org is this: prior to less 1.3.1 a (~"@{name}") type of selector was supported. Support for this will be removed in the near future.

I think another way of solution is not possible.

Answer 3

I think the cleanest way (without string interpolation) is to add 0px to your variable, e.g. @size + 0px.

Answer 4

In case any late-comers find this thread:

There is a built-in function for this:

unit(@dimension, [@unit: ""]);

So font-size: unit(@size, px); should result in font-size: 12px. I tested it.

http://lesscss.org/#reference

Answer 5

In a case you need to use it in combination with CSS function (eg. calc), here is one way:

@width: 12;
width: %(~"calc(33%% - %dpx)", @width);

Outputs:

width: calc(33% - 12px);

Answer 6

Less replaces anything but values with spaces, so to convert units you add 0 of that unit. Just dont pass in a unit value.

.my_mixin(@num) {
 @result: @num / 16; //12 / 16
 font-size: @result + 0em; //0.750em
}

p {
 .my_mixin(12);
}

Hope this helps someone else.