较少的CSS mixin参数

Question

I have this 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;
}    

and I was to use in on a class but exclude the easing and apply it to opacity so I do this..

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

but the easing in inserted as well. eg the CSS outcome is this...

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

How would I exclude the easing?

Answer 1

Assuming your mixin code stays the same, you can specifically set values in LESS at the time of the call like this (here I pass "nothing" to the @transition by giving it an escaped empty string ~'' ):

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

Note how I do not need to worry about it being the third parameter because I am explicitly telling it the parameter I am setting, so I do not need to pass a duration as it will stay the default.

Answer 2

The 'ease-in' easing is included by default. If you leave it out, the mix-in will assume you want the default easing, which is 'ease-in', as defined in the mix-in. You'll have to specify a different easing if that's what you need, or modify the mix-in code.