Using mixin guards (as an alternative for the if…else statements)

Most programmers are used to and familiar with the if…else statements in their code. Less does not have these if…else statements. Less tries to follow the declarative nature of CSS when possible and for that reason uses guards for matching expressions. In Less, conditional execution has been implemented with guarded mixins. Guarded mixins use the same logical and comparison operators as the @media feature in CSS does.

Getting ready

You can compile the Less code in this recipe with the command-line lessc compiler, as described in the Installing the lessc compiler with npm recipe in Chapter 1, Getting to Grips with the Basics of Less. Also, check the compiler options; you can find them by running the lessc command in the console without any argument. In this recipe, you will have to use the –modify-var option.

How to do it…

1. Create a Less file named guards.less, which contains the following Less code:

   @color: white; 
   .mixin(@color...