Clever Geek Handbook

Passing an empty LESS parameter for default use?

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; 
}

Works as expected:

.myItem {
  .trans;
 }

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

.trans(all, 0.4s);

Is there a syntax for just passing a null argument, so the default is ("all")? It doesn't work, throws an error on compilation:

.trans(,0.4s);

Thank.

+3


source to share


2 answers


While the language may not support it as you meant, LESS has an overload, 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 accommodate this shorter syntax.

0


source


It may be too late, but the answer may be helpful to others.

You can also name variables when calling mixin without executing an 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 can do something like .trans(@time:1s);

or.trans(@type:linear, @what: opacity);

hope this helps.

+11


source






More articles:


All Articles