Question

I’m just getting into LESS and am trying to figure out how I can make conditional css statements without mixins. I find that I have a lot of single line css statements that only occur once but are dependent on some variable or condition and that using mixins is a bit pointless since it will never be reused.

Example.

@add-margin: true;

body {
    margin-top: 20px;  //I only want this if add-margin is true
}

So ideally I want this:

body when (@add-margin) {
     margin-top: 20px;
}

But that doesn’t work. Using a mixin works but seems silly to make one just for a one liner. Is there some alternative way I can do this?

Thanks

Answer 1

no, it is not possible in that form.

you could use a variable equal to 0 or 1 and multiply by 20 and then always output a rule, or use JavaScript (i would advise you to avoid this) to convert true to 0 or 20 and always output a rule, but if you want the property added conditionally, you need guards.