较少的mixin，无法获取背景图片网址

Question

在这里我想创建一个更少的 mixin。参数为brand，应改为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");
}