Passing ruleset to mixin

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

Passing Rulesets to Mixins

You have to define the structure of the mixins where you want to pass the ruleset. A normal detached ruleset contains ordinary rulesets like properties, nested rulesets, variable declaration, mixins etc. It is stored in a variable and included into other structure that copies all the rulesets.

Let's take an example to demonstrate how to pass rulesets to mixins in Less files.

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

HTML file: simple.html

 
  1. <!DOCTYPE html>  
  2. <head>  
  3.  <link rel="stylesheet" href="simple.css" type="text/css" />  
  4. </head>  
  5. <body>  
  6. <div class="cont">  
  7.    <h2>Welcome to JavaTpoint</h2>  
  8.    <p>A solution of all technology.</p>  
  9. </div>  
  10. </body>  
  11. </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. @detached-ruleset: {  

  2.     .mixin() {  

  3.         font-family: "Algerian";  

  4.         background-color: #AA86EE;  

  5.     }  

  6. };  

  7. .cont {  

  8.     @detached-ruleset();  

  9.     .mixin();  

  10. }  

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

passing rulesets to mixins1

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

For example:

passing rulesets to mixins2

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

  1. .cont {  

  2.   font-family: "Algerian";  

  3.   background-color: #AA86EE;  

  4. }  

Output

passing rulesets to mixins3