69

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);
}
doğukan
  • 23,073
  • 13
  • 57
  • 69
nkint
  • 11,513
  • 31
  • 103
  • 174

4 Answers4

129

There is a way to use guards for individual (or multiple) attributes.

@debug: true;

header {
    /* guard for attribute */
    & when (@debug = true) {
        background-color: yellow;
    }
    /* guard for nested class */
    #title when (@debug = true) {
        background-color: orange;
    }
}

/* guard for class */
article when (@debug = true) {
    background-color: red;
}

/* and when debug is off: */
article when not (@debug = true) {
    background-color: green;
}

...and with Less 1.7; compiles to:

header {
    background-color: yellow;
}
header #title {
    background-color: orange;
}
article {
    background-color: red;
}
Onur Yıldırım
  • 32,327
  • 12
  • 84
  • 98
  • 7
    This is a closer answer to the original question. Topic starter didn't ask for a mixin. – Guido Bouman May 19 '14 at 09:28
  • 1
    I was actually looking for conditional properties and waded through numerous sites and answers that didn't provide much more than bloat. This is direct and to the point, and provides an alternative to writing 3+ lines of code just to conditionally include a single attribute. – Lazerblade Aug 07 '14 at 15:05
  • 2
    I am pretty sure this addresses the question and approach the OP was looking for. Thanks for supplying this. – Daved Oct 21 '14 at 22:33
  • Well, it could not be the answer at Feb 2013 since the feature of ["CSS Guards"](http://lesscss.org/features/#css-guards-feature) introduced in Less v1.5.0 (released Oct 2013) ;) – seven-phases-max Mar 12 '15 at 10:02
  • Well, this answer keeps you up to date. Doesn't it? – Onur Yıldırım Mar 12 '15 at 11:53
  • I did not mean it's something wrong with the answer. It was just a remark for those who wonder why it's not the accepted one. – seven-phases-max Mar 12 '15 at 12:42
57

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

sshow
  • 8,820
  • 4
  • 51
  • 82
freejosh
  • 11,263
  • 4
  • 33
  • 47
23

I stumbled over the same question and I've found a solution.

First make sure you upgrade to LESS 1.6 at least. You can use npm for that case.

Now you can use the following mixin:

.if (@condition, @property, @value) when (@condition = true){
     @{property}: @value;
 }

Since LESS 1.6 you are able to pass PropertyNames to Mixins as well. So for example you could just use:

.myHeadline {
   .if(@include-lineHeight,  line-height, '35px');
}

If @include-lineheight resolves to true LESS will print the line-height: 35px and it will skip the mixin if @include-lineheight is not true.

posixpascal
  • 3,031
  • 3
  • 25
  • 44
  • This is nice, however, watch those quotes. I believe LESS write arguments verbatim. In your example, the 35px get's written with the quotes as '35x'. So HEX colors can break. – bob Dec 08 '17 at 22:07
9

I wrote a mixin for some syntactic sugar ;)
Maybe someone likes this way of writing if-then-else better than using guards

depends on Less 1.7.0

https://github.com/pixelass/more-or-less/blob/master/less/fn/_if.less

Usage:

.if(isnumber(2), {
    .-then(){
        log {
            isnumber: true;
        }
    }
    .-else(){
        log {
            isnumber: false;
        }
    }
});

.if(lightness(#fff) gt (20% * 2), {
    .-then(){
        log {
            is-light: true;
        }
    }
});

using on example from above

.if(@debug, {
    .-then(){
        header {
            background-color: yellow;
            #title {
                background-color: orange;
            }
        }
        article {
            background-color: red;
        }
    }
});
Community
  • 1
  • 1