Friday, March 3, 2017

LESS - Parametric Mixins

Description

Parametric mixins uses one or more parameters which extends 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 parametric mixin as .border with three parameters namely width, style and color. Using these parameters, you can customize the mixin output with passed parameters value.
The following table describes different types of parametric mixins along with description.
S.N.Types & Description
1 Mixins with Multiple Parameters
Parameters can be seperated using commas or semicolon.
2 Named Parameters
Mixins provides parameters values instead of positions by using their names.
3 @arguments Variable
When mixin was called, the @arguments includes 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.

No comments:

Post a Comment