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.
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.
Create a Less file named
darkbutton.less
that contains the following code:@dark: true; button when (@dark){ background-color: black; color: white; }
Compile the
darkbutton.less
file with the command-linelessc
compiler by entering the following command into the console:lessc darkbutton.less
Inspect the CSS code output on the console, which will look like the following code:
button { background-color: black; ...