less mixin, cannot get backgroung-image's url

Question

here i want to create a less mixin. The parameter is brand and is should be changed into brand@2x.png. The code below did not work.

.bglogo (@brand) {
  @brandurl: @brand + '@2x.png';
  background-image: url(@brandurl);
}

.span{
  .bglogo('brand');
}

error message --

Answer 1

You need to use variable interpolation in order to concatenate the variable and the string.

In your case, you would use the value "@{brand}@2x.png":

.bglogo (@brand) {
  @brandurl: "@{brand}@2x.png";
  background-image: url(@brandurl);
}

.span {
  .bglogo('brand');
}

Result:

.span {
  background-image: url("brand@2x.png");
}