How to use if statements in LESS

Question

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

User · Answer

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

User · Answer

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

User · Answer

There is a way to use guards for individual  or multiple  attributes    debug  true   header          guard for attribute         amp  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

User · 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

[less] How to use if statements in LESS

Usage:

Examples related to less