css - 更少的 CSS 混合参数

Question

我有这个 Less mixin -

.css3-transitions(@property: color, @duration: 0.3s, @transition: ease-in) {
  -webkit-transition:@property @duration @transition;
      -moz-transition:@property @duration @transition;
           transition:@property @duration @transition;
}    

我要在一个类上使用，但排除缓动并将其应用于不透明度，所以我这样做..

.myClass{
 .css3-transition(opacity);
} 

但也插入了缓和。例如 CSS 结果是这样的......

 -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;

我将如何排除宽松？

Answer 1

假设你的 mixin 代码保持不变，你可以像这样在调用时专门设置 LESS 中的值（这里我通过@transition给它一个转义的空字符串将“nothing”传递给它~''）：

.myClass{
 .css3-transitions(opacity, @transition: ~'');
}

请注意我不需要担心它是第三个参数，因为我明确告诉它我正在设置的参数，所以我不需要传递持续时间，因为它将保持默认值。

Answer 2

默认情况下包含“ease-in”缓动。如果您将其省略，则混入将假定您想要默认的缓动，即混入中定义的“缓入”。如果需要，您必须指定不同的缓动，或者修改混入代码。