Question

在纯CSS中，如果我想为2个选择器声明相同的属性，用以下逗号分隔这些选择器就足够了：

#first_id,
.second_class
{
   color:red;
}

如何为2 LESS Mixins声明做同样的事情？

我想做这样的事情：

.generic_transition (@duration:1s),
.other_transition (@duration:1s)
{
  -webkit-transition:all @duration;
     -moz-transition:all @duration;
      -ms-transition:all @duration;
       -o-transition:all @duration;
          transition:all @duration;
}

但它没有运行....如何达到预期的结果？谢谢。

Answer 1

您可以为每个mixin添加辅助类，如下所示：

.other_transition (@duration:1s){
  .helper(@duration);
}

.generic_transition (@duration:1s){
  .helper(@duration); 
}

.helper(@duration){
  -webkit-transition:all @duration;
     -moz-transition:all @duration;
      -ms-transition:all @duration;
       -o-transition:all @duration;
          transition:all @duration;
}

Answer 2

与Slawa的答案类似，但代码略少。由于mixins的某个名称已经是.generic_transition，因此这很有效，并且.other_transition使用generic转换的代码很明显：

.generic_transition (@duration:1s) {
  -webkit-transition:all @duration;
     -moz-transition:all @duration;
      -ms-transition:all @duration;
       -o-transition:all @duration;
          transition:all @duration;
}

.other_transition (@duration:1s) {
    .generic_transition (@duration);
}

然而，目前还不清楚为什么你会想要两个mixin定义完全一样，就像你原来的问题一样。这对于选择器来说是有意义的，但对于mixins则没那么多。我假设您要设置一些＆＃34; generic＆＃34;转换的代码，然后应用＆＃34;一般＆＃34;任何＆＃34;其他＆＃34;过渡。

此外，虽然您的问题不一定涉及过渡，但由于这是您用作示例的内容，因此this answer may prove useful to you。

LESS：为2个mixin声明相同的属性

2 个答案: