Less default

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Less default()

The Less default function is available only inside guard condition and returns true only if no other mixin matches otherwise, it returns false. It is interpreted as regular CSS when the default function is used outside the mixin guard condition.

Let's take an example to demonstrate the usage of default function in the Less file.

Create a Less file named "simple.less", having the following data.

Less file: simple.less

  1.    

  2. .mixin(1)                   {x: 11}  

  3. .mixin(2)                   {y: 22}  

  4. .mixin(@x) when (default()) {z: @x}  

  5. div {  

  6.   .mixin(3);  

  7. }  

  8. div.special {  

  9.   .mixin(1);  

  10. }  

Now, execute the following code: lessc simple.less simple.css

Less default-function1

This will compile the "simple.less" file. A CSS file named ?simple.css? will be generated.

For example:

Less default-function2

The generated CSS "simple.css", has the following code:

Output:

  1. div {  

  2.   z: 3;  

  3. }  

  4. div.special {  

  5.   x: 11;  

  6. }