Open In App

Less.js Extend Attached to Selector

Improve
Improve
Like Article
Like
Save
Share
Report

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is preferable since CSS is a dynamic style sheet language. LESS can be utilized by many different browsers because it is versatile. Web browsers can only use CSS that has been developed and processed using a computer language known as the CSS pre-processor. It is a CSS language extension that also offers features like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while keeping backward compatibility.

In this article, we are going to discuss Extend Attached to Selector, and this means that we can extend the selector’s properties individually for all selectors while even giving them properties together.  

Syntax:

.selector_name1:extend(.selector_name2),
.selector_name3:extend(selector_name4){
    ...
}

Compile LESS code into CSS code.

Example 1: The code below demonstrates the usage and implementation of the Extend Attached to Selector.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css" 
          href="style.css"/>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Extend Attached to Selector</b></h3>
    <div class="box">
        <div class="c1">
            <p>Extend Attached to<br>Selector</p
        </div>
        <div class="c2">
            <p>Extend Attached to<br>Selector</p>  
        </div>
    </div>
</body>
  
</html>


style.less:

CSS




@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
body{
    background-color: @body-bg-color;
}
.box{
    display: flex;
}
.c1 {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: @light;
}
.c2:extend(.c1){
    padding: 1rem;
}
p {
    padding: 50px 0px 0px 45px;
    color: @dark;
}


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




body{
    background-color: #eeeeee;
}
.box {
    display: flex;
}
.c1,
.c2 {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: #fdff92;
}
.c2{
    padding: 1rem;
}
p {
    padding: 50px 0px 0px 45px;
    color: hsl(25, 71%, 8%);
}


Output:

 

Example 2: The code below demonstrates how each Attached Selector’s properties are applied.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css" 
          href="style.css"/>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Extend Attached to Selector</b></h3>
    <div class="box">
        <div class="c1">
            <p>Extend Attached to<br>Selector
            <br>
                1st Box
            </p
        </div>
        <div class="c2">
            <p>Extend Attached to<br>Selector  
            <br>
                2nd Box
            </p>
        </div>
        <div class="c3">
            <p>Extend Attached to<br>Selector 
            <br>
                3rd Box
            </p
        </div>
    </div>
</body>
</html>


style.less: 

CSS




@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@light2: rgb(255, 166, 146);
body{
    background-color: @body-bg-color;
}
.box{
    display: flex;
}
.c {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: @light2;
}
.c1 {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: @light;
}
.c2:extend(.c1),.c3:extend(.c) {
    padding: 1rem;
}
p {
    padding: 40px 0px 0px 45px;
    color: @dark;
}


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




body {
    background-color: #eeeeee;
}
.box {
    display: flex;
}
.c,
.c3 {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: #ffa692;
}
.c1,
.c2 {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: #fdff92;
}
.c2,
.c3 {
    padding: 1rem;
}
p {
    padding: 40px 0px 0px 45px;
    color: hsl(25, 71%, 8%);
}


Output:

 

Reference: https://lesscss.org/features/#extend-feature-extend-attached-to-selector 



Last Updated : 03 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads