How to use if statements in LESS

less

Solution

LESS has guard expressions for mixins, not individual attributes.

So you'd create a mixin like this:

.debug(@debug) when (@debug = true) {
    header {
      background-color: yellow;
      #title {
          background-color: orange;
      }
    }

    article {
      background-color: red;
    }
}

And turn it on or off by calling `.debug(true);` or `.debug(false)` (or not calling it at all).

Problem

I'm looking for some kind of if-statement to control the `background-color` of different `div` elements. I have tried the below, but it doesn't compile ``` @debug: true; header { background-color: (yellow) when (@debug = true); #title { background-color: (orange) when (@debug = true); } } article { background-color: (red) when (@debug = true); } ```

Original source