少混合，无法获得背景图像的网址

Question

这里我想创建一个less mixin。参数为品牌，应更改为brand@2x.png。下面的代码不起作用。

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

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

错误消息 -

Answer 1

您需要使用variable interpolation来连接变量和字符串。

在您的情况下，您将使用值"@{brand}@2x.png"：

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

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

结果：

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