LESS - Parametric Mixins


Advertisements

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.

Useful Video Courses


Video

LESS Online Training

20 Lectures 1 hours

Anadi Sharma

Video

Serverless Development with AWS Lambda and NodeJS

44 Lectures 7.5 hours

Eduonix Learning Solutions

Video

Delegation Mastery: Learn to Outsource Your Work and Do Less

17 Lectures 2 hours

Zach Miller

Video

Create a WordPress Website in 24 Hours or Less Guaranteed

23 Lectures 1.5 hours

Zach Miller

Video

Become PHP Facebook Developer: Password-Less Authentication

34 Lectures 4 hours

Syed Raza

Video

AWS LAMBDA- Serverless Computing

31 Lectures 3 hours

Harshit Srivastava

Advertisements