Extend is a feature of Less. The extend feature acts as a pseudo class which extends other selector's styles in one selector by using: extend selector.

Let's take an example to see the use of extend in Less file.

Create a HTML file named "simple.html", having the following data.

HTML file: simple.html

  1. <!DOCTYPE html>  
  2. <head>  
  3.  <link rel="stylesheet" href="simple.css" type="text/css" />  
  4. </head>  
  5. <body>  
  6.  <h2>Less Extend Example</h2>  
  7.  <h3>Welcome to JavaTpoint</h3>  
  8. </body>  
  9. </html>  

Now create a file named "simple.less". It is similar to CSS file. The only one difference is that it is saved with ".less" extension.

Less file: simple.less

  1. h2 {  
  2.   &:extend(.style);  
  3.   font-style: italic;  
  4. }  
  5. .style {  
  6.   background: lightgreen;  
  7. }  

Put the both file "simple.html" and "simple.less" inside the root folder of Node.js

Now, execute the following code: lessc simple.less simple.css

Less extend1

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

Less extend2

The generated CSS "simple.css", has the following code:

  1. h2 {  
  2.   font-style: italic;  
  3. }  
  4. .style,  
  5. h2 {  
  6.   background: lightgreen;  
  7. }   

Output:

Less extend3

Extend Syntax

It is used to add more than one class. Extend is placed into ruleset or attached to a selector. Like pseudo class, it contains one or more classes, which are separated by comma. Each selector can be followed by using the optional keyword all.

Let's take an example:

HTML file: simple.html

  1. <!DOCTYPE html>  
  2. <!doctype html>  
  3. <head>  
  4.    <link rel="stylesheet" href="simple.css" type="text/css" />  
  5. </head>  
  6. <body>  
  7.    <div class="style">  
  8.     <h2>Welcome to JavaTpoint</h2>  
  9.     <div class="container">  
  10.       <p> A solution of all technology.</p>  
  11.     </div>  
  12.    </div>  
  13. </body>  
  14. </html>  

Less file: simple.Less

  1. .style:extend(.container, .img)  
  2. {  
  3.   background: violet;  
  4. }  
  5. .container {  
  6.   font-style: italic;  
  7. }  
  8. .img{  
  9.    font-size: 30px;  
  10.  }  

Put the both file "simple.html" and "simple.less" inside the root folder of Node.js

Now, execute the following code: lessc simple.Less simple.css

Less extend4

This will compile the "simple.Less" file. A CSS file named "simple.css" will be generated.

For example:

Less extend5

The generated CSS "simple.css", has the following code:

  1. .style {  
  2.   background: violet;  
  3. }  
  4. .container,  
  5. .style {  
  6.   font-style: italic;  
  7. }  
  8. .img,  
  9. .style {  
  10.   font-size: 30px;  
  11. }  

Output:

Less extend6

A list of extend syntax used in Less

Index

Type

Description

1)

Extend Attached to Selector

Extend is connected to a selector, looks like a pseudo class with selector as parameter.

2)

Extend Inside Ruleset

The &:extend(selector) syntax can be put inside the body of ruleset.

3)

Extending Nested Selectors

Nested selectors are matched using extend selector.

4)

Exact Matching with Extend

By default , this is used for the exact match between the selectors.

5)

nth Expression

The form of nth expression is used in extend otherwise. Without this expression, it treats selector as different.

6)

Extend "all"

The keyword all is identified at last in extend argument and then Less matches that selector as part of another selector.

7)

Selector Interpolation with Extend

It is used to connect to interpolated selector.

8)

Scoping/Extend inside @media

It extends matches the selector only that is present inside the same media declaration.

9)

Duplication Detection

It cannot detect the duplication of selectors.

Use cases for Extend

Index

Type

Description

1)

Classic Use Case

Classic Use Case is used to keep away adding the base class in Less.

2)

Reducing CSS Size

The extend syntax moves the selector away from the properties you want to use, which helps in reducing the CSS generated code.

3)

Combining Styles/ A More Advanced Mixin

It is used to combine the same styles of a particular selectors into other selector.