What is the use of extend in LESS?

In LESS, "Extend" is a feature that allows us to inherit styles from one selector to another. When we use "extend" in a selector, it merges that selector's styles with any other selector that matches it.

Let us understand it through the following example. This way you can more clearly understand the usage of the "extend" feature in LESS.

grammar

Users can use the "extend" function in LESS according to the following syntax.

.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 style, and ".selector2" is the selector from which it will inherit. When using "extend", we can also use the "&" symbol to create nested selectors.

Different ways to use the "Extend" attribute in Less

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

Extension appended to selector

Extensions are attached to selectors, allowing us to merge the selector it is attached to with another selector. It's like a normal pseudo-class with a selector parameter.

Here are some examples -

• Expand a selector after an existing selector −

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

• Use a space between the existing selector and extend -

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

• We can also use extend for multiple selectors in the same rule set, like this −

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

Extended Internal Rule Set

We can also use "extend" in the rule set to extend the properties of one selector to another selector. For example −

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

Extending nested selectors

When using "extend", we can use the "&" symbol to create nested selectors.

In the following example, use "extend" to extend the nested selector ".selector1.nested" to ".selector2". This allows us to inherit the styles of ".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 extensions, it is important to understand that it looks for an exact match between selectors. In other words, even if they have the same meaning, the selectors need to be of the same form to match.

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) {}

Expand "all"

We can use the all keyword in Less as the last part of the extension parameter, which tells Less to match the selector as part of another selector. This will create a new selector containing the matching part of the original selector and replace it with the extension.

This is an example −

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

Example 1

In the following example, we define a base style for a button with the class name .button, and then use the "extend" function to define specific styles by extending the base style to define the main button and the danger button. style.

The .primary-button and .danger-button classes inherit all styles defined in the .button class, which helps reduce code duplication. Additionally, each class adds its own custom styles to create different 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 category 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 basic style for a card with the class name .card. We then use the "extend" function to define specific styles for large cards, cards with headers, cards with footers, and cards with both headers and footers.

In the output, users can observe that the styles defined for .card are inherited by other classes and customize 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 the syntax of using the "extend" function in LESS and various techniques for using "extend" to simplify and optimize CSS code. 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 CSS code more organized.

The above is the detailed content of What is the use of extend in LESS?. For more information, please follow other related articles on the PHP Chinese website!