Combining Styles/ A More Advanced Mixin



Description

Using Extend, we can combine the same styles of a particular selector into other selector.

Example

The following example describes the use of combining styles mixin in the LESS file −

extend_syntax.htm

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
         <ul class = "nav">
            <li>HTML</li>
            <li>SASS</li>
            <li>LESS</li>
         </ul>
      </div>
   </body>
</html>

Next, create the style.less file.

style.less

ul.nav > li {
   background-color: #6DE6E6;
   color: black;
}

.cont {
   &:extend(ul.nav > li);
}

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

ul.nav > li,
.cont {
   background-color: #6DE6E6;
   color: black;
}

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