Applying guards to the CSS selectors

Since Version 1.5 of Less, guards can be applied not only on mixins, but also on the CSS selectors. This recipe will show you how to apply guards on the CSS selectors directly to create conditional rulesets for these selectors.

Getting ready

The easiest way to inspect the effect of the guarded selector in this recipe will be using the command-line lessc compiler. How to use the command-line lessc compiler has been described in the Installing the lessc compiler with npm recipe in Chapter 1, Getting to Grips with the Basics of Less.

How to do it…

1. Create a Less file named darkbutton.less that contains the following code:

   @dark: true;
   button when (@dark){
     background-color: black;
     color: white;
   }

2. Compile the darkbutton.less file with the command-line lessc compiler by entering the following command into the console:

   lessc darkbutton.less
   

3. Inspect the CSS code output on the console, which will look like the following code:

   button { 
     background-color: black; ...