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

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

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

Examples related to less