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.
<!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:
@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
.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.
<!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.
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
h1 { font-family: "Comic Sans MS";
} .style, h1 { color: green;
} |
Output:
Reference: https://lesscss.org/features/#extend-feature-extend-syntax