nkint nkint - 3 months ago 11
CSS Question

How to use if statements in LESS

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);
}

Answer

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

Comments