What is the use of Mixins in LESS?

IN LESS, mixins provide a way to group a set of CSS properties and reuse them across different rule sets in our stylesheet. When we include a mixin in a rule set, all of the CSS properties defined in the mixin are added to the rule set where the mixin is included.

By defining a mixin, developers can group related styles together and apply them to multiple selectors, making it easier to maintain consistent styles across a website or application.

Let’s understand it via the examples below. So you can get more clearance about Mixins.

Syntax

Users can follow the syntax below to use the mixins in LESS.

.mixin-name {
} 
.selector {
   .mixin-name();
}

In the above syntax, “.mixin-name” is the name of the mixin, and we can define any CSS properties that we want to include inside the block.

“.selector” is the selector where we want to include the mixin, and we’ve included the mixin by calling its name followed by ().

Features of Mixins

Mixins are a powerful feature of LESS that offer several benefits for developers −

Mixins With Parentheses

We can also pass arguments to mixins to customize their behavior −

.mixin-name(@arg1, @arg2) {
   /* CSS properties using @arg1 and @arg2 */
} 
.selector {
   .mixin-name(value1, value2);
}

Nested Mixins

Nested mixins allow us to use mixins within other mixins. This can help to keep our code organized and more modular.

Here's an example of a nested mixin in LESS −

// Define a mixin for setting font properties
.font-properties(@size: 14px, @weight: normal, @style: normal, @line-height: 1.5) {
   font-size: @size;
   font-weight: @weight;
   font-style: @style;
   line-height: @line-height;
} 
// Define a mixin for setting text properties
.text-properties(@color: #333, @align: left, @decoration: none) {
   color: @color;
   text-align: @align;
   text-decoration: @decoration;  
   // Use the .font-properties mixin to set font properties within the .text-properties mixin
   .font-properties();
} 
// Use the .text-properties mixin within the h1 selector
h1 {
   .text-properties(@color: red, @size: 24px);
}

Selectors in Mixins

Mixins in LESS allow developers to include not only properties but also selectors in a rule set. Here's an example −

.hover-effect() { 
   &:hover {
      background-color: #f7f7f7; color: #333; 
   } 
}
.btn {
   .hover-effect(); 
   background-color: #333; 
   color: #fff; 
}

Example 1

In this example, the “.bordered” mixin defines a set of border styles for an element. We then included this mixin within other selectors, such as #menu a and .post a, to apply these border styles to those elements as well.

In the output, users can see in the result that both #menu a and .post a have the same border styles defined within the .bordered mixin, as well as any additional styles that were defined within those selectors.

.bordered {
   border-top: 1px solid red;
   border-bottom: 2px solid black;
} 
#menu a {
   color: blue;
   .bordered();
} 
.post a {
   color: red;
   .bordered();
}

Output

#menu a {
   color: blue;
   border-top: 1px solid red; 
   border-bottom: 2px solid black;
} 
.post a {
   color: red;
   border-top: 1px solid red; 
   border-bottom: 2px solid black;
}

Example 2

In the example below, we have defined a mixin named .box-shadow that contains a set of properties for a box shadow. This mixin has four parameters: @x, @y, @blur, and @color, which enable us to customize the properties of the box shadow, such as the x and y offset, blur radius, and color.

After that, we used the .box-shadow mixin within other selectors by calling it and passing values for the parameters. We used the .box-shadow mixin in two different selectors, .button and .card. In the .button selector, we passed specific values for all four parameters. In contrast, in the .card selector, we only passed values for the first three parameters and used the default value of #000 for the @color parameter.

In the output, users can see that both the .button and .card selectors have a box shadow with different properties.

.box-shadow (@x: 0, @y: 0, @blur: 5px, @color: #000) {
   -webkit-box-shadow: @x @y @blur @color;
   -moz-box-shadow: @x @y @blur @color;
   box-shadow: @x @y @blur @color;
}
.button {
   background-color: #fff;
   .box-shadow(2px, 2px, 10px, #ccc);
} 
.card {
   background-color: #f5f5f5;
   .box-shadow(4px, 4px, 20px);
}

Output

.button {
   background-color: #fff;
   -webkit-box-shadow: 2px 2px 10px #ccc;
   -moz-box-shadow: 2px 2px 10px #ccc;
   box-shadow: 2px 2px 10px #ccc;
} 
.card {
   background-color: #f5f5f5;
   -webkit-box-shadow: 4px 4px 20px #000;
   -moz-box-shadow: 4px 4px 20px #000;
   box-shadow: 4px 4px 20px #000;
}

Example 3

In this example, we demonstrate the usage of id selectors with mixins. We have defined a mixin called #primary_button() that sets some basic button styles, including a hover state. We then use this mixin within two different selectors: .button and .nav-link. These selectors will have the same button styles, including the hover state.

The #primary_button mixin defines a set of properties for a button element, including background color, font color, border, and padding. It also includes a hover state that changes the background and font colors when the button is hovered over.

Users can notice in the output that both .button and .nav-link selectors have the same button styles, including the hover state because they use the #primary_button mixin.

#primary_button() {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
   &:hover {
      background-color: white;
      color: blue;
   }
} 
.button {
   #primary_button();
} 
.nav-link {
   #primary_button();
   text-decoration: none;
}

Output

.button {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
}
.button:hover {
   background-color: white;
   color: blue;
} 
.nav-link {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
   text-decoration: none;
}
.nav-link:hover {
   background-color: white;
   color: blue;
}

Users learned how to define mixins and how to use them by including them in different selectors and passing arguments to customize their properties.

The examples provided demonstrated how mixins could be used to apply border styles, box shadows, and button styles to different selectors and showed how mixins could be used with id selectors to apply the same button styles to different selectors.

By understanding the examples provided, users can apply mixins in their projects and benefit from their flexibility and reusability.