Less.js Extend Syntax & Inside Ruleset
Last Updated :
28 Apr, 2025
LESS.js is one of the most popular CSS preprocessor languages because of its many features like mixins, imports, variables, and, so on, which help to reduce the complexity of CSS code. One such important and useful feature of LESS is the @extend directive.
In this article, we will see the basic usage of the extend feature in LESS.js, along with knowing their implementation through the illustrations.
Extend: LESS Extend is a pseudo-class that helps to merge different selectors, on the basis of putting it with one that matches according to what it is referenced. We can use the LESS extend feature using the : extend keyword.
Extend Syntax & Inside Ruleset:
- Extend Syntax: The extend is either attached to a selector or placed into a ruleset. It looks like a pseudo-class with a selector parameter optionally followed by the keyword all. It can contain one or more classes to extend, separated by commas.
- Extend Inside Ruleset: The syntax can be used inside the body of the ruleset.
Syntax:
&:extend(selector)
Example 1: The following example demonstrates the use of Less.js Extend Syntax in Less file.
HTML
<!DOCTYPE html>
<!doctype html>
<head>
<link rel="stylesheet" href="style.css"
type="text/css" />
</head>
<body>
<div class="selector">
<h2>Welcome to GeeksforGeeks</h2>
<div class="container">
<p>Example of Less.js Extend Syntax...</p>
</div>
</div>
</body>
</html>
style. less:
CSS
@black:violet;
.selector:extend(.container, .hello)
{
background: @black;
}
.container
{
font-family: "Comic Sans MS";
color:black;
}
.hello
{
font-size: 35px;
color:green;
}
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
CSS
.selector
{
background: violet;
}
.container,
.selector
{
font-family: "Comic Sans MS";
color: black;
}
.hello,
.selector
{
font-size: 35px;
color: green;
}
Output:
Example 2: The following example demonstrates the use of Less.js Extend Syntax in Less file.
HTML
<!doctype html>
<head>
<link rel="stylesheet" href="style.css"
type="text/css" />
</head>
<body>
<div><br><br>
<h1><b>GeeksforGeeks</b></h1>
<h2><b>Example ofmExtend Inside Ruleset....</b></h2>
<br><br><br>
</div>
</body>
</html>
style. less: Create the Less file.
CSS
h1
{
&:extend(.style);
font-family: "Comic Sans MS";
}
.style
{
color: green;
}
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
CSS
h1
{
font-family: "Comic Sans MS";
}
.style,
h1
{
color: green;
}
Output:
Reference: https://lesscss.org/features/#extend-feature-extend-syntax
Similar Reads
Less.js Detached Rulesets 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 s
2 min read
Less.js Detached Rulesets Scoping 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 s
3 min read
Less.js Extend Scoping / Extend Inside @media LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a dynamic style sheet language that increases the working power of CSS. LESS is cross-browser compatible. CSS pre-processor is a scripting language that impro
3 min read
Less.js Extending Nested Selectors LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a dynamic style sheet language that increases the working power of CSS. LESS is cross-browser compatible. CSS pre-processor is a scripting language that impro
2 min read
Less.js @import At-Rules File Extensions Less.js (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
3 min read
Less.js @import At-Rules Inline Less.js (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
3 min read
Less.js Extend Use Cases for Extend LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a dynamic style sheet language that increases the working power of CSS. LESS is cross-browser compatible. CSS pre-processor is a scripting language that impro
3 min read
Less.js @import At-Rules Less.js @import At-Rules is basically used to import the file which is in the source code. And we can put the @import statement anywhere in the source code. And @import At-Rules allow us to spread the less code over to different files. Using the @import keyword we can separate and maintain our code
3 min read
Less.js @import At-Rules css Less.js 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 makes CSS more powerful. LESS provides cross-browser compatibility. A programming language called CSS pre-processor is us
3 min read
Less.js Extend LESS.js is one of the most popular CSS preprocessor languages because of its many features like mixins, imports, variables and, so on, which help to reduce the complexity of CSS code. One such important and useful feature of LESS is the @extend directive. In this article, we will see the basic usage
3 min read