Less.js Extend “all”

Last Updated : 26 Sep, 2022

In this article, you will learn about less.js extend all which helps us to merge different selectors. We can use the LESS extend feature using the extend keyword.

The less.js extend “all”: The keyword all is indicated at last in extend argument and then less matches that selector as part of another selector.

Syntax:

.container:extend(.geeks all) {}

Example: The following example demonstrates the use of all keywords in the LESS file:

index.html

<!doctype html> 
  
<head> 
    <link rel="stylesheet" href="style.css"
          type="text/css" /> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>Welcome to GeeksforGeeks</h1> 
        <div class="hello"> 
            <ul class="geeks"> 
                <li> 
                    <h2>Computer Science</h2> 
                </li> 
                <li> 
                    <h2>Javascripts</h2> 
                </li> 
                <li> 
                    <h2>Python</h2> 
                </li> 
                <li> 
                    <h2>HTML</h2> 
                </li> 
            </ul> 
        </div> 
    </div> 
</body> 
  
</html>

style.less

.hello.geeks, 
.geeks h1 { 
    color: green; 
    background-color: aquamarine; 
    text-align: center; 
} 
.geeks { 
    &:hover { 
        color: blue; 
    } 
} 
.container:extend(.geeks all) { 
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

The compiled CSS file comes to be:

style.css

.hello.geeks, 
.geeks h1, 
.hello.container, 
.container h1 { 
    color: green; 
    background-color: aquamarine; 
    text-align: center; 
} 
.geeks:hover, 
.container:hover { 
    color: blue; 
}

Output:

Example 2: The following example demonstrates the use of all keywords in the LESS file:

index.html

<!doctype html> 
  
<head> 
    <link rel="stylesheet" href="style.css" 
          type="text/css" /> 
</head> 
  
<body> 
  
    <div class="one"> 
        <div class="replacement"> 
            <h1>Welcome to GeeksforGeeks</h1> 
            <div class="hello"> 
                <ul class="class"> 
                    <li> 
                        <h2>Raipur</h2> 
                    </li> 
                    <li> 
                        <h2>Bilaspur</h2> 
                    </li> 
                    <li> 
                        <h2>Durg</h2> 
                    </li> 
                    <li> 
                        <h2>Baikunthpur</h2> 
                    </li> 
                </ul> 
            </div> 
        </div> 
    </div> 
  
</body> 
  
</html>

style.less

.hello.class, 
.class h1 { 
    color: green; 
    text-align: center; 
} 
  
.class { 
    &:active { 
        color: rgb(239, 9, 9); 
        background-color: yellow; 
    } 
} 
.one { 
    border-color: lightgray; 
  
    border: 15px solid green; 
    outline: 20px dashed aquamarine; 
    padding: 30px; 
    margin: 40px; 
} 
.replacement:extend(.class all) { 
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

The compiled CSS file comes to be:

style.css

.hello.class, 
.class h1, 
.hello.replacement, 
.replacement h1 { 
    color: green; 
    text-align: center; 
} 
.class:active, 
.replacement:active { 
    color: #ef0909; 
    background-color: yellow; 
} 
.one { 
    border-color: lightgray; 
    border: 15px solid green; 
    outline: 20px dashed aquamarine; 
    padding: 30px; 
    margin: 40px; 
}