LESS - CSS Guards



Guards are used to match simple values or a number of arguments on expressions. It is applied to the CSS selectors. It is syntax for declaring mixin and calling it immediately. To successfully bring out the if type statement; join this with feature &, which allows you to group multiple guards.


The following example demonstrates the use of css guard in the LESS file −


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

      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>

Next, create the style.less file.


@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   @usedScope: mixin;

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 {
   background-color: blue;
   color: white;


Follow these steps to see how the above code works −

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

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

Less css guard