Description
Detached ruleset contains an ordinary ruleset such as properties, nested rulesets, variables declaration, mixins etc. It is stored in a variable and included into other structure where all its properties of the ruleset will get copied to that structure.Example
The below example is passing ruleset to mixin in the LESS file:passing_ruleset.htm
<!doctype html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div class="cont"> <h2>Welcome to TutorialsPoint</h2> <p>The largest Tutorials Library on the web.</p> </div> </body> </html>Next, create file style.less
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.cssNext execute the above command, it will create style.css file automatically with the below code:
style.css
.cont { font-family: "Comic Sans MS"; background-color: #AA86EE; }
Output
Let's carry out the following steps to see how above code works:- Save the above html code in passing_ruleset.htm file.
- Open this HTML file in a browser, an output as below gets displayed.
Scoping
All variables and mixins in detached ruleset are available wherever it is called or defined, otherwise both caller and definition scope are available. 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.Following table lists all the types of scope:
| S.N. | Types & Description |
|---|---|
| 1 | Definition and Caller Scope Visibility Variables and mixin are defined inside the detached ruleset. |
| 2 | Referencing Won't Modify Detached Ruleset Scope Just giving the references, the ruleset does not access to any new scopes. |
| 3 | Unlocking Will Modify Detached Ruleset Scope The detached ruleset can access to scope by being imported into it. |
No comments:
Post a Comment