Less.js Detached Rulesets
Last Updated :
03 Oct, 2022
LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that it can be used by the web browser. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.
Description of Detached Rulesets: A detached ruleset is a group of CSS properties, nested rulesets, media declarations, or anything else stored in a variable. You can include it into a ruleset or another structure and all its properties are going to be copied there. You can also use it as a mixin argument and pass it around as any other variable.
Syntax:
@detached-ruleset();
Example 1:This example demonstrates the use of Detached Rulesets in less.js.
index.html
<!DOCTYPE html>
<head>
<link rel="stylesheet"
href="style.css" type="text/css" />
</head>
<body>
<div class="style">
<h2>Welcome to GeeksforGeeks</h2>
<h3>Less.js Detached Rulesets</h3>
</div>
</body>
</html>
|
style.less
@detached-ruleset: {
color: blue;
background:green;
text-align: center;
};
.style
{
@detached-ruleset();
}
|
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less style.css
The compiled CSS file comes to be:
style.css
.style {
color: blue;
background: green;
text-align: center;
}
|
Output:
Example 2: This example demonstrates, the use of a detached ruleset in the less.js.
index.html
<!DOCTYPE html>
<head>
<link rel="stylesheet"
href="style.css" type="text/css" />
</head>
<body>
<div class="cont">
<h2>Welcome to GeeksforGeeks</h2>
<h3>Less.js Detached Rulesets</h3>
</div>
</body>
</html>
|
style.less
@primary-color:green;
@back:blue;
@width:10px;
@detached-ruleset: {
.mixin() {
font-family: "Algerian";
color: @primary-color;
border-style: dotted;
outline: @width solid @back;
text-align: center;
}
};
.cont {
@detached-ruleset();
.mixin();
}
|
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
style.css
.cont {
font-family: "Algerian";
color: green;
border-style: dotted;
outline: 10px solid blue;
text-align: center;
}
|
Output:
Reference: https://lesscss.org/features/#detached-rulesets-feature
Share your thoughts in the comments
Please Login to comment...