What is the use of extend in LESS?

IN LESS, "Extend" is a feature that allows us to inherit the styles from one selector to another. When we use "extend" in a selector, it merges the styles of that selector with any other selectors that match the one being referenced.

Let’s understand it via the examples below. So that you can get more clearance about the use of "extend" feature in LESS.

Syntax

Users can follow the syntax below to use the “extend" feature in LESS.

.selector1:extend(.selector2) {}
//The above block does the same thing as the below
.selector1{
   &:extend(.selector2);
}

In the above syntax, ".selector1" is the selector that will inherit the styles, and ".selector2" is the selector that it will inherit from. We can also use the "&" symbol to create nested selectors when using "extend".

Different Ways to use the "Extend" Feature in Less

Here are some different techniques we can use with the "extend" feature in LESS to simplify and optimize our CSS code −

Extend Attached to Selector

Extend attached to a selector allows us to merge the selector it's attached to with another selector. It is like an ordinary pseudo-class with a selector as a parameter.

Here are some examples −

• To extend a selector after the existing one −

pre:hover:extend(div pre) {
   // styles
}

• To use a space between the existing selector and the extend −

pre:hover :extend(div pre) {
   // styles
}

• We can also use extend on multiple selectors within the same ruleset, like this −

h1,
h2:extend(.title),
h3:extend(.title) {
}

Extend Inside Ruleset

We can also use "extend" inside a ruleset to extend the properties of one selector to another. For example −

.selector1 {
   color: red;
} 
.selector2 {
   &:extend(.selector1);
   background-color: yellow;
}

Extending Nested Selectors

We can use the "&" symbol to create nested selectors when using "extend".

Here, in this example below, the nested selector ".selector1.nested" is being extended to ".selector2" using "extend". This allows us to inherit the styles of both ".selector1" and ".nested" on ".selector2".

.selector1 {
   color: red;  
   &.nested {
      background-color: yellow;
   }
} 
.selector2:extend(.selector1.nested) {
   font-size: 16px;
}

Exact Matching With Extend

When using CSS extend, it's important to understand that it looks for exact matches between selectors. In other words, the selectors need to have the same form to be matched, even if they have the same meaning.

For example, in the following CSS code −

.first.second,
.second.first,
.second > .first { 
   color: blue; 
}
// this will NOT match any of the selectors above
.my-test:extend(.second) {} *.second { color: blue; }
// this will NOT match the *.second selector
.no-star:extend(.second) {}a:hover:visited { color: blue; }
.my-selector:extend(a:visited:hover) {}

Extend "all"

We can use the all keyword as the last part of an extend argument in Less, it tells Less to match the selector as part of another selector. This creates a new selector that includes the matched part of the original selector, and replaces it with the extend.

Here’s an Example −

.selector1.selector2.test,
.test.selector1.selector3 {
   color: orange;
} 
.selector2.test {
   &:hover {
      color: green;
   }
} 
.selector4:extend(.test all) {}

Example 1

In the example below, we define a base style for a button with the class .button, and then use the "extend" feature to define specific styles for primary and danger buttons by extending the base style.

The .primary-button and .danger-button classes inherit all of the styles defined in the .button class, which helps to reduce code duplication. Additionally, each class adds its own custom styles to create distinct button styles.

In the output, users can observe that the styles defined for .button are inherited by .primary-button and .danger-button, and the custom styles defined for each class are applied.

// base style for a button
.button {
   background-color: blue;
   border: none;
   color: white;
   padding: 10px;
} 
//  specific style for a primary button by extending the base style
.primary-button:extend(.button) {
   background-color: green;
} 
//  specific style for a danger button by extending the base style
.danger-button:extend(.button) {
   background-color: red;
}

Output

.button {
   background-color: blue;
   border: none;
   color: white;
   padding: 10px;
} 
.primary-button {
   background-color: green;
} 
.danger-button {
   background-color: red;
}

Example 2

In the example below, we define a base style for a card with the class .card. We then use the "extend" feature to define specific styles for a large card, a card with a header, a card with a footer, and a card with both a header and footer.

In the output, users can observe that the styles defined for .card are inherited by the other classes and customized as needed.

//style for a card
.card {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
} 
//  style for a large card by extending the base style
.large-card:extend(.card) {
   width: 500px;
} 
//style for a card with a header by extending the base style
.card-with-header:extend(.card) {
   border-top: 2px solid black;
   padding-top: 30px;
} 
// style for a card with a footer by extending the base style
.card-with-footer:extend(.card) {
   border-bottom: 2px solid black;
   padding-bottom: 30px;
} 
// style for a card with both a header and footer by extending the appropriate classes
.card-with-header-and-footer:extend(.card-with-header, .card-with-footer) {
}

Output

.card {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
} 
.large-card {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
   width: 500px;
} 
.card-with-header {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
   border-top: 2px solid black;
   padding-top: 30px;
} 
.card-with-footer {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
   border-bottom: 2px solid black;
   padding-bottom: 30px;
} 
.card-with-header-and-footer {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
   border-top: 2px solid black;
   padding-top: 30px;
   border-bottom: 2px solid black;
   padding-bottom: 30px;
}

Users learned about the syntax for using the "extend" feature in LESS and various techniques for simplifying and optimizing CSS code using "extend". By taking advantage of this feature and using best practices for optimizing CSS code, users can avoid writing duplicate code for similar styles and keep the CSS code more organized.