LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a dynamic style sheet language that increases the working power of CSS. LESS is cross-browser compatible. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that the web browser can use it. This also provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.
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.
Use Cases for Extend:
- Classic Use Case: Classic use case is used to keep away from adding the base class in LESS. The values written in the base class are avoided when the same values are overridden inside the other class.
- Reducing CSS Size: Extend is used to move the selector as far as the properties you want to use, which helps in reducing the CSS-generated code.
- Combining Styles / A More Advanced Mixin: Using Extend, we can combine the same styles of a particular selector into another selector.
Syntax:
&:extend();
Parameter: We can use the LESS extend feature using the: extend keyword.
Syntax:
.world {
&:extend(.hello);
background-color: @bg;
}
Let us see some examples of use cases for extend keyword.
Example 1: The following example demonstrates the use of Less.js Extend Use Cases for Extend.
HTML
<!DOCTYPE html> <head> <title>Merge Space Example</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div class="hello world"> <h1>neveropen</h1> <a>Less.js Extend Use Cases for Extend</a> </div> </body> </html> |
style. less:
CSS
@bg:black; @color:white; @h1:green; @red:red; .hello { background-color: @red; color: @color; text-align: center; } .world { &:extend(.hello); background-color: @bg; } h1 { color: @h1; } |
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
CSS
.hello, .world { background-color: red; color: white; text-align: center; } .world { background-color: black; } h1 { color: green; } |
Output:
Example 2: The following example demonstrates the use of Less.js Extend Use Cases for Extend.
HTML
<!DOCTYPE html> <head> <title>Merge Space Example</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h1>neveropen</h1> <a class="hello world"> Less.js Extend Use Cases for Extend</a> </body> </html> |
style.less:
CSS
.hello { background-color: black; color: white; font-size: large; } .world { background-color: red; font-size: large; } h1 { 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
CSS
.hello { background-color: black; color: white; font-size: large; } .world { background-color: red; font-size: large; } h1 { color: green; } |
Output:
Reference: https://lesscss.org/features/#extend-feature-use-cases-for-extend
