Less.js Extend Scoping / Extend Inside @media

Last Updated : 23 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, 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.

Scoping / Extend Inside @media: Scoping / Extend inside @mediaextends matches the selector only that is present inside the same media declaration.

Syntax:

@media print {
    .screenClass:extend(.selector) {} 
    .selector {
        color: green;
    }
}

Example 1: The following example demonstrates the use of Less.js Extend Scoping / Extend Inside @media in the Less file.

HTML

<!doctype html> 
<head> 
    <link rel="stylesheet" href="style.css" 
          type="text/css" /> 
</head> 
  
<body> 
    <div> 
        <h1>GeeksforGeeks</h1> 
        <div class="selector"> 
            <ul> 
               <li><b>Javascript</b></li> 
               <li><b>LESS</b></li> 
               <li><b>CSS</b></li> 
               <li><b>SASS</b></li>                
            </ul> 
        </div> 
    </div> 
</body> 
</html>

style. less: Create the less file.

CSS

@bg:blue; 
@rd:red; 
@color:green; 
@media print { 
    .screenClass:extend(.selector) {}  
    .selector { 
        color: green; 
    } 
} 
.selector {  
    color: @bg; 
} 
@media screen { 
    .selector {  
        color: @rd; 
    } 
} 
h1 { 
    color: @color; 
}

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

@media print { 
    .selector, 
    .screenClass { 
        color: green; 
    } 
} 
.selector { 
    color: blue; 
} 
@media screen { 
    .selector { 
        color: red; 
    } 
} 
h1 { 
    color: green; 
} 

Output:

Example 2: The following example demonstrates the use of Less.js Extend Scoping / Extend Inside @media in the Less file.

HTML

<!DOCTYPE html>   
<head>   
   <title>Merge Space Example</title>   
   <link rel="stylesheet" href="style.css" 
         type="text/css" />   
</head>   
<body>   
    <div> 
        <h1>GeeksforGeeks</h1>  
        <a class="selector"> 
            <b>Scoping / Extend Inside @media</b> 
        </a> 
    </div> 
</body>   
</html>

style. less:

CSS

@media screen { 
    .selector { 
        color: blue; 
        text-align: center; 
    } 
    @media (min-width: 1023px) { 
        .selector { 
            color: red; 
        } 
    } 
} 
h1 { 
    color: green; 
} 
div { 
    background-color: black; 
    text-align: center; 
} 
.topLevel:extend(.selector) { 
} 

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

@media screen { 
    .selector, 
    .topLevel { 
        color: blue; 
        text-align: center; 
    } 
} 
@media screen and (min-width: 1023px) { 
    .selector, 
    .topLevel { 
        color: red; 
    } 
} 
h1 { 
    color: green; 
} 
div { 
    background-color: black; 
    text-align: center; 
} 