LESS - Scoping/Extend inside @media

Description

Inside the media declaration, extend should be written. The Extend matches the selector only that are present inside the same media declaration. The Extend present in media declaration does not match with the selector present inside the nested declaration.

Example

The following example demonstrates the use of scoping extend inside media in the LESS file −

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example using extend inside media</h2>
      <img src="/less/images/less-extend/nature.jpg" class = "style">
   </body>
</html>

Next, create the style.less file.

style.less

@media screen {
   .style {
      width:500px;
   }
   @media (min-width: 1023px) {
      .style {
         width:500px;
      }
   }
}
.cont:extend(.style) {}

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

@media screen {
   .style,
   .cont {
      width: 500px;
   }
}

@media screen and (min-width: 1023px) {
   .style,
   .cont {
      width: 500px;
   }
}

Output

Follow these steps to see how the above code works −

  • Save the above html code in the extend_syntax.htm file.

  • Open this HTML file in a browser, the following output will get displayed.

Less Extend
less_extend.htm
Advertisements