Less.js Extend Exact Matching with Extend
Last Updated :
25 Oct, 2022
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.
Extend: LESS extend is a pseudo-class that helps to merge different selectors, based on putting it with one that matches according to what it is referenced. We can use the LESS extend feature using the : extend keyword.
Exact Matching with Extend: By default, this is used for the exact match between the selector. It does matter whether the selector uses a leading star or not. It does not matter that two nth-expressions have the same meaning, they need to have the same form in order to be matched. The only exception is quoted in the attribute selector, unless know they have the same meaning and match them.
Syntax:
.cont:extend(.style h1){}
Example 1: The following example demonstrates the use of Less.js Extend Exact Matching with Extend in Less file.
HTML
<!doctype html>
< head >
< link rel = "stylesheet" href = "style.css"
type = "text/css" />
</ head >
< body >
< div >< br >< br >
< h1 >< b >GeeksforGeeks</ b ></ h1 >
< h2 class = "cont" >< b >
Learning Exact Matching with Extend</ b ></ h2 >
</ div >
</ body >
</ html >
|
style.less
CSS
.style h 1 ,
h 1 .style,
.cont {
color : blue ;
font-style : italic ;
text-align : center ;
}
h 1 {
color : green ;
text-align : center ;
}
|
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
.style h 1 ,
h 1 .style,
.cont {
color : blue ;
font-style : italic ;
text-align : center ;
}
h 1 {
color : green ;
text-align : center ;
}
|
Output:
Example 2: The following example demonstrates the use of Less.js Extend Exact Matching with Extend in Less file.
HTML
<!doctype html>
< head >
< link rel = "stylesheet" href = "style.css"
type = "text/css" />
</ head >
< body >
< div >< br >< br >
< h1 >< b >GeeksforGeeks</ b ></ h1 >
< h2 class = "selector" >< b >
Learning Exact Matching with Extend....</ b ></ h2 >
< br >< br >< br >
</ div >
</ body >
</ html >
|
style. less: Create the Less file
CSS
link:hover:visited {
color : white ;
text-align : center ;
}
.selector:extend(link:hover:visited) {}
h 1 {
color : green ;
text-align : center ;
}
div {
background-color : black ;
}
|
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
link:hover:visited,
.selector {
color : white ;
text-align : center ;
}
h 1 {
color : green ;
text-align : center ;
}
div {
background-color : black ;
}
|
Output:
Reference: https://lesscss.org/features/#extend-feature-exact-matching-with-extend
Share your thoughts in the comments
Please Login to comment...