Open In App

Less.js Extend

Last Updated : 28 Sep, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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.

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.

The different related concepts of LESS Extend are described below:

  • Extend Syntax: The extend can either be used with a selector or declared into a ruleset. The extend looks similar to the pseudo-class having the selector optional parameter followed by all keyword.
  • Extend attached to selector: Extend is connected to a selector and looks like a pseudo-class with a selector as a parameter.
  • Extend inside ruleset: The &: extend(selector) syntax can be put inside the body of the ruleset.
  • Extending Nested Selectors: Nested selectors are matched using extend selector.
  • Exact Matching with Extend: By default, this is used for the exact match between the selectors.
  • nth Expression: The form of nth expression is used to extend otherwise. Without this expression, it treats the selector as different.
  • Extend “all”: The keyword all is identified at last in extend argument and then Less matches that selector as part of another selector.
  • Selector Interpolation with Extend: It is used to connect to the interpolated selector.
  • Scoping/Extend inside @media: It extends and matches the selector only that is present inside the same media declaration.
  • Duplication Detection: It cannot detect the duplication of selectors.

 

Syntax:

&:extend(.normal); 

Example 1: This example describes the basic usage of the Less extend.

hello.less




body {
    background-color: black;
}
  
h2 {
    &:extend(.normal);
    font-style: normal;
    font-family: "Times New Roman", Times, serif;
    text-align: center;
}
  
.normal {
    color: green;
}


To compile the less file to a CSS file, write the following command:

lessc hello.less hello.css

After executing the above command, it will create the hello.css file automatically with the following code:

hello.css




body {
    background-color: black;
}
  
h2 {
    font-style: normal;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
}
  
.normal,
h2 {
    color: green;
}


Here, we have to link the CSS code to the HTML code:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
          href="hello.css" 
          type="text/css" />
</head>
  
<body>
    <h2>GeeksforGeeks</h2><br>
    <h2>Less.js extend</h2>
</body>
  
</html>


Output:

 

Example 2: The following example demonstrates the use of extend syntax in the LESS.js.

hello2.less




.geeks:extend(.container, .inline) {
    background: aquamarine;
}
  
.container {
    font-style: italic;
    text-align: center;
}
  
.inline {
    font-size: 40px;
    font-style: oblique;
    color: blue;
}


To compile the less file to a CSS file, write the following command:

lessc hello2.less hello2.css

After executing the above command, it will create the hello2.css file automatically with the following code:

hello2.css




.geeks {
    background: aquamarine;
}
  
.container,
.geeks {
    font-style: italic;
    text-align: center;
}
  
.inline,
.geeks {
    font-size: 40px;
    font-style: oblique;
    color: blue;
}


Now link the CSS file to the Html file:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          href="hello2.css" 
          type="text/css" />
</head>
  
<body>
    <div class="geeks">
        <h2>Welcome To GeeksforGeeks</h2>
        <div class="container">
            <p>Less Extend Extend is a feature of Less.</p>
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://lesscss.org/features/#extend-feature



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads