LESS - Default Function

Description

The Default function returns true only when it is available inside the guard condition and does not match with any other mixin otherwise it returns false. It interprets as regular css when the default function is used outside the mixin guard condition.

Example

The following example demonstrates the use of default function in the LESS file −

Below is the stylesheet file saved with extension .less; this is similar to a CSS file.

style.less

.mixin(1)                   {a: 5}
.mixin(2)                   {b: 10}
.mixin(3)                   {c: 15}
.mixin(@a) when (default()) {d: @a}

div {
   .mixin(12);
}

div.style {
   .mixin(3);
}

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

div {
   d: 12;
}
div.special {
   c: 15;
}