LESS - Passing Rulesets to Mixins

Description

Detached ruleset contains rulesets such as properties, nested rulesets, variables declaration, mixins, etc. It is stored in a variable and included in another structure; all the properties of the ruleset get copied to that structure.

Example

The following example shows how to pass a ruleset to mixin in the LESS file −

passing_ruleset.htm

<!doctype html>
   <head>
      <pnk rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <span class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </span>
   </body>
</html>

Next, create the style.less file.

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

Output

Follow these steps to see how the above code works −

Save the above html code in the passing_ruleset.htm file.

Open this HTML file in a browser, the following output will get displayed.

Scoping

All variables and mixins in detached ruleset are available wherever the ruleset called or defined. Otherwise, both the caller and the definition scopes are available by default. The declaration scope takes the priority when both scopes contain same mixin or variable. Detached ruleset body is defined in the declaration scope. It does not change its scope after the detached ruleset is copied from one variable to another.

The following table psts all the types of scope −

Sr.No.	Types & Description
1	Definition and Caller Scope Visibipty Variables and mixins are defined inside the detached ruleset.
2	Just giving the references, the ruleset does not access to any new scopes.
3	The detached ruleset can access to scope by being imported into it.