133

I think this is not possible, but I thought I ask in case there is a way. The idea is that I have a variable for path to web resource folder:

@root: "../img/";
@file: "test.css";
@url: @root@file;

.px {
    background-image: url(@url);
}

I get this as a result:

.px { background-image: url("../img/" "test.css"); }

But, I want the strings to combine into one string like this:

.px { background-image: url("../img/test.css"); }

Is it possible to concatenate strings together in Less?

General Grievance
  • 4,555
  • 31
  • 31
  • 45
juminoz
  • 3,168
  • 7
  • 35
  • 52

6 Answers6

237

Use Variable Interpolation:

@url: "@{root}@{file}";

Full code:

@root: "../img/";
@file: "test.css";

@url: "@{root}@{file}";

.px{ background-image: url(@url); }
mikemanger
  • 9
  • 2
Paul
  • 139,544
  • 27
  • 275
  • 264
  • Thanks for the answer! This is perfect. Now I can make sure that even if the context path changes, there won't be a refactoring nightmare. – juminoz Apr 21 '12 at 18:16
  • Thanks, i just came across the same problem and missed that in the docs. – David May 03 '12 at 18:24
  • Thanks @Paulpro! I was having an issue with VS Web Compiler add-on, where it was changing my background-image url, and I wasn't too sure how to do concatenation :) – hatsrumandcode Dec 22 '15 at 16:18
  • 8
    Just a note for people who might land on this answer but are trying to use it e.g. to combine a numeric variable with a string like `px` or `%`: You can un-quote the string by pre-pending it with a tilde `~`, as such: `width: ~"@{w}px";` – AsGoodAsItGets Nov 08 '17 at 09:49
31

As you can see in the documentation, you can use string interpolation also with variable and plain strings together:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
Stephan Hoyer
  • 4,792
  • 2
  • 29
  • 26
12

I was looking for the same trick for handling images. I used a mixin to answer this:

.bg-img(@img-name,@color:"black"){
    @base-path:~"./images/@{color}/";
    background-image: url("@{base-path}@{img-name}");
}

Then you can use :

.px{
    .bg-img("dot.png");
}

or 

.px{
    .bg-img("dot.png","red");
}
user2725509
  • 121
  • 1
  • 3
  • Hello and welcome! why do you think that the accepted answer is no longer valid? is it outdated? have there been a technology improvement? It's wrong? why yours is better? – STT LCU Aug 28 '13 at 13:39
9

For those string-like unit values like 45deg in transform: rotate(45deg) use the unit(value, suffix) function. Example: 

// Mixin
.rotate(@deg) {
  @rotation: unit(@deg, deg);
  -ms-transform: rotate(@rotation);
  transform: rotate(@rotation);
}

// Usage
.rotate(45);

// Output
-ms-transform: rotate(45deg);
transform: rotate(45deg);
jordanb
  • 1,975
  • 17
  • 8
7

Don't know if you're using less.js or lessphp (like in WP-Less plugin for WordPress) but with lessphp you can "unquote" strings with ~ : http://leafo.net/lessphp/docs/#string_unquoting

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • 1
    This works with regular LESS, as well. I do not know if it did in 2012 when this answer was written. – trysis Jul 05 '16 at 20:45
-7

Using Drupal 7. I've used an ordinary plus mark and it's working: 

@images_path+'bg.png'
Gaba
  • 7
  • 6
    Unless he willingly to learn Drupal just for concat strings to use it in LESS/CSS, I think your suggestion is worthless. No offense, I'm just saying. – ozanmuyes Sep 10 '13 at 21:40