Question

使用LESS CSS，我想使用Mixins简化我的代码以放置“out”转换声明，但以下语法是错误的。问题出在属性@color-time定义中，它有两个参数：

.links-transition (@color-time:color 1s, border-color 1s)
{
  -webkit-transition:@color-time;
     -moz-transition:@color-time;
      -ms-transition:@color-time;
       -o-transition:@color-time;
          transition:@color-time;
}

a
{
  color:red;
  .links-transition;
}

在官方文档中，我发现最后放置一个;，教会LESS如何考虑参数，考虑用;分隔，所以我的案例中有一个参数是这样的：

.links-transition (@color-time:color 1s, border-color 1s;)

不幸的是，这不会运行。我认为这取决于白色空间...是否有正确的语法来获得正确的CSS而不使用Mixin召回中的2个参数？

谢谢。

Answer 1

您可以像这样使用string escaping and interpolation：

.links-transition (@arg:"color 1s, border-color 1s") {
  @color-time: ~"@{arg}";
  -webkit-transition:@color-time;
     -moz-transition:@color-time;
      -ms-transition:@color-time;
       -o-transition:@color-time;
          transition:@color-time;
}

a {
  color:red;
  .links-transition ("color 2s, border-color 2s");
}

它将返回此 CSS ：

a {
  color: red;
  -webkit-transition: color 2s, border-color 2s;
  -moz-transition: color 2s, border-color 2s;
  -ms-transition: color 2s, border-color 2s;
  -o-transition: color 2s, border-color 2s;
  transition: color 2s, border-color 2s;
}

希望这能做到你想要的。

有关更多想法：您可以在SO上找到一些额外的方法/解决方案，例如这两个：

更新：在LESS 1.4 beta中，它的工作方式与您想要的方式相同：

.links-transition (@color-time: color 1s, border-color 1s;) {
  -webkit-transition:@color-time;
     -moz-transition:@color-time;
      -ms-transition:@color-time;
       -o-transition:@color-time;
          transition:@color-time;
}

a {
  color:red;
  .links-transition (color 2s, border-color 2s;);
}

与上述解决方案具有相同的输出。 从1.3.2开始，逗号分隔的论证是可能的，但它们显然不包括空格。

LESS：Mixin具有唯一的参数来管理css3转换

1 个答案:

更新：在LESS 1.4 beta中，它的工作方式与您想要的方式相同：