css - 具有多个变量的 LESS 参数混合

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 中，我会这样称呼它：.small-thumb(@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 */