CODEWITHSUNDEEP
cssless
Steve
Steve

Reputation: 14912

Passing an empty LESS parameter to use default?

If I have a LESS parametric mixin such as:

.trans (@what: all, @time: 0.2s, @type: ease-in-out) {
-webkit-transition: @arguments;
-moz-transition: @arguments;
-o-transition: @arguments;
-ms-transition: @arguments;
transition: @arguments; 
}

It works as expected:

.myItem {
  .trans;
 }

But if I want to set the @time to 0.4s, I seem to have to pass an argument for the first item as well:

.trans(all, 0.4s);

Is there a syntax for just passing a null argument, so the default ("all") is simply used? This does not work, throws an error on compile:

.trans(,0.4s);

Thanks.

Upvotes: 3

Views: 3481

Answers (2)

bravomartin
bravomartin

Reputation: 371

Probably too late, but the response could be useful to others.

You can also name the variables when you're calling the mixin, without having to follow the order.

Considering your case:

 .trans (@what: all, @time: 0.2s, @type: ease-in-out) {  
   -webkit-transition: @arguments;  
   -moz-transition: @arguments;  
   -o-transition: @arguments;  
   -ms-transition: @arguments;  
   transition: @arguments; 
}

You could do something like .trans(@time:1s); or .trans(@type:linear, @what: opacity);

hope it helps.

Upvotes: 11

anthonyryan1
anthonyryan1

Reputation: 5496

While the language may not support it as you've got in mind, LESS does have overloading, so depending on your use case, you can get away with something like:

.trans (@time) {
    -webkit-transition: all @time ease-in-out;
    -moz-transition: all @time ease-in-out;
    -o-transition: all @time ease-in-out;
    -ms-transition: all @time ease-in-out;
    transition: all @time ease-in-out; 
}

in addition to your existing one, just to allow for that shorter syntax.

Upvotes: 0

Related Questions