Concatenate strings in Less

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

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

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

Use Variable Interpolation:

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

Full code:

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

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

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

Related