Question

我设置了以下变量：

@live:background:url('/cmn/static/images/live_placeholder.png');
@online:background:url('/cmn/static/images/online_placeholder.png');
@external:background:url('/cmn/static/images/external_placeholder.png');

我想创建一个mixin，我会插入适当的参数来设置背景图像，就像这样，但我知道我在设置mixin时错过了一步，因为我猜我需要放东西在（）中不同。

.small-thumb(@live){
  background-repeat:no-repeat;
  height:50px;
  width:50px;
  float:left;
  margin-right:5px;
}

但最终，在我的LESS中，我会这样称呼它：。小拇指（@live）;

我是否需要为每个人制作单独的mixin？

由于

Answer 1

您只能为变量赋值，而不能为属性和值赋值。所以正确的代码是：

@live:url('/cmn/static/images/live_placeholder.png');
@online:url('/cmn/static/images/online_placeholder.png');
@external:url('/cmn/static/images/external_placeholder.png');

然后您可以在.small-thumb函数中传递变量，如下所示：

.small-thumb(@var){
  background-image: @var;
}

然后使用您设置的变量调用函数：

.small-thumb(@live);  /* the value of @live is passed to .small-thumb */

少参数mixin与多个变量

1 个答案: