Parametric Mixins

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

Less Parametric Mixins

Less parametric mixin is a special mixin in which one or more parameters are used to extend functionality of Less by taking arguments and its properties and customize the mixin output when mixed into another block.

Let's see an example of parametric mixin:

  1. .border(@width; @style; @color) {  

  2.     border: @width @style @color;  

  3. }  

  4. .myheader {  

  5.     .border(5px; dashed; red);  

  6. }  

Here, the parametric mixin is border which has three parameters named width, style and color. These parameters are used to customize the mixin output according to passed parameter values.

A list of different types of parametric mixins:

Index

Types

Explanation

1)

Mixins with Multiple Parameters

In this type of mixins, parameters can be separated using commas or semicolon.

2)

Named Parameters

In Named Parameters, mixins provides parameters values instead of positions by using their names.

3)

@arguments Variable

@arguments variable includes all the passed arguments when mixin was called.

4)

Advanced Arguments and the @rest Variable

Mixin takes variable number of arguments by using .....

5)

Pattern-matching

Pattern-matching is used change the behavior of mixin by passing parameters to it.