LESS - Parametric Mixins

Advertisements

Previous Page
Next Page  

Description

Parametric mixins use one or more parameters that extend functionality of LESS by taking arguments and its properties to customize the mixin output when mixed into another block.

For instance, consider a simple LESS code snippet −

.border(@width; @style; @color) {
   border: @width @style @color;
}

.myheader {
   .border(2px; dashed; green);
}

Here we are using the parametric mixin as .border with three parameters - width, style and color. Using these parameters, you can customize the mixin output with the passed parameters value.

The following table describes the different types of parametric mixins along with description.

Sr.No. Types & Description
1 Mixins with Multiple Parameters

Parameters can be separated using commas or semicolon.
2 Named Parameters

Mixins provide parameter values instead of positions by using their names.
3 @arguments Variable

When a mixin is called, the @arguments include all the passed arguments.
4 Advanced Arguments and the @rest Variable

Mixin takes variable number of arguments by using .....
5 Pattern-matching

Change the behavior of mixin by passing parameters to it.
Advertisements