1

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

.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;
}

在官方文档中，我发现把 a;放在最后，教 LESS 如何考虑参数，考虑它们之间用 分隔;，所以在我的例子中，一个参数是这样的：

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

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

谢谢你。

4

1 回答 1

2

您可以像这样使用字符串转义和插值：

.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 开始可以使用逗号分隔的 argunes，但它们显然不能包含空格。

于 2013-05-15T13:55:22.150 回答