CODEWITHSUNDEEP
cssless
kayee
kayee

Reputation: 340

Less CSS mixin arguments

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. e.g. 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?

Upvotes: 0

Views: 282

Answers (2)

ScottS
ScottS

Reputation: 72261

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.

Upvotes: 2

tomaroo
tomaroo

Reputation: 2534

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.

Upvotes: 0

Related Questions