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.
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.