How to use if statements in LESS

by

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

More Related Contents:

  1. Loop over an array of name value pairs in LESS
  2. Conditional CSS based on background color variable
  3. Multiple properties are getting treated as separate arguments in mixins
  4. Arrays with Less
  5. Conditionally setting one variable’s value based on another
  6. Why I can see Less instead of CSS in a browser [closed]
  7. How to prevent Less from trying to compile CSS calc() properties?
  8. How to namespace Twitter Bootstrap so styles don’t conflict
  9. Is there a SASS.js? Something like LESS.js?
  10. Using variables in property names in LESS (dynamic properties / property name interpolation)
  11. How to thematize in lesscss
  12. Double border with different color [duplicate]
  13. import .css file into .less file
  14. Load less.js rules dynamically
  15. How to use bootstrap with 16 or 24 columns
  16. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  17. Build list of selectors with LESS
  18. Less lists as a mixin argument(s)
  19. How do I extend a class/mixin which has dynamically formed selector
  20. LESS: Unrecognized input error when using Bootstrap
  21. LESS mixin a variable class name
  22. Concatenate strings in Less
  23. LESS CSS nesting classes
  24. Does LESS have an “extend” feature?
  25. Less CSS: Mixins with Variable Number of Arguments
  26. Dynamically changing less variables
  27. Prefixing all selectors for twitter bootstrap in less
  28. Media Query grouping instead of multiple scattered media queries that match
  29. Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?
  30. Font awesome not working in Firefox

Leave a Comment