Concatenate strings in Less

CssPathConcatenationLess

Css Problem Overview


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?

Css Solutions


Solution 1 - Css

Use Variable Interpolation:

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

Full code:

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

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

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

Solution 2 - Css

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

Solution 3 - Css

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

Solution 4 - Css

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

Solution 5 - Css

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

Solution 6 - Css

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

@images_path+'bg.png'

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjuminozView Question on Stackoverflow
Solution 1 - CssPaulView Answer on Stackoverflow
Solution 2 - CssStephan HoyerView Answer on Stackoverflow
Solution 3 - Cssuser2725509View Answer on Stackoverflow
Solution 4 - CssjordanbView Answer on Stackoverflow
Solution 5 - CssFelipeAlsView Answer on Stackoverflow
Solution 6 - CssGabaView Answer on Stackoverflow