Mixin is a collection of CSS properties which facilitates you to add a bunch of properties from one rule-set into another rule-set and includes class names as its properties. These are similar to functions in programming languages. In Less, mixins can be declared as the same way as CSS style using class or id selector. It can store multiple values and can be reused in the code whenever necessary.

Mixin Syntax:

  1. .round-borders {  
  2.   border-radius: 5px;  
  3.   -moz-border-radius: 5px;  
  4.   -webkit-border-radius: 5px;  
  5. }  
  6. #menu {  
  7.   color: gray;  
  8.   .round-borders;  
  9. }  

Mixin Output:

  1. .round-borders {  
  2.   border-radius: 5px;  
  3.   -moz-border-radius: 5px;  
  4.   -webkit-border-radius: 5px;  
  5. }  
  6. #menu {  
  7.   color: gray;  
  8.   border-radius: 5px;  
  9.   -moz-border-radius: 5px;  
  10.   -webkit-border-radius: 5px;  
  11. }  

Usage of Less Mixin

Index

Mixin

Explanation

1)

Not Outputting the Mixin

You can make a Mixin disappear in the output by simply placing the parentheses after it.

2)

Selectors in Mixins

The mixins can contain properties as well as selectors.

3)

Namespaces

Namespaces are used to group the mixins under common name.

4)

Guarded Namespaces

If the applied guard?s condition to namespace returns true then the mixins defined by it are used.

5)

The !important keyword

the !important keyword is used to override the particular property.

Let's take an example to demonstrate the use of mixins in Less file.

Create a HTML file named "simple.html", having the following data.

 

HTML file: simple.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <link rel="stylesheet" href="simple.css" type="text/css" />  
  5.   <title>Less Mixin Example</title>  
  6. </head>  
  7. <body>  
  8. <h1>Welcome to JavaTpoint</h1>  
  9. <h3>MAIN BENEFITS YOU GET FROM OUR COMPANY :</h3>  
  10. <p class="p1"> Life Time Validity.</p>  
  11. <p class="p2">Training by Java Professionals.</p>  
  12. <p class="p3">Small Batches to focus on each student.</p>  
  13. </body>  
  14. </html>  

Now create a file named "simple.less". It is similar to CSS file. The only one difference is that it is saved with ".less" extension.

Less file: simple.less

  1. .p1{  
  2.   color:brown;  
  3. }  
  4. .p2{  
  5.   background : lightgreen;  
  6.   .p1();  
  7. }  
  8. .p3{  
  9.    background : lightgrey;  
  10.   .p1;  
  11. }   

Put the both file "simple.html" and "simple.less" inside the root folder of Node.js

Now, execute the following code: lessc simple.less simple.css

Less Less mixins1

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

Less Less mixins2

The generated CSS "simple.css", has the following code:

  1. .p1 {  
  2.   color: brown;  
  3. }  
  4. .p2 {  
  5.   background: lightgreen;  
  6.   color: brown;  
  7. }  
  8. .p3 {  
  9.   background: lightgrey;  
  10.   color: brown;  
  11. }  

Output:

Less Less mixins3