Book Image

Less Web Development Cookbook

Book Image

Less Web Development Cookbook

Overview of this book

Table of Contents (19 chapters)
Less Web Development Cookbook
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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