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

Solution 1

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

Solution 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.

Solution 3

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

Solution 4

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);

Solution 5

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.

View more solutions

Comments

[Mike]

Interpolation for selectors will be removed, but not inline like in your example.

[Philipp Kyeck]

if you want to use percent as unit, I had to do unit(@size, ~"%");

[Devner]

This is by far, the most valid and working solution. I was able to fix the exact same issue using the above solution. It's a shame that this answer was not accepted as the solution.