Conditionally setting one variable’s value based on another

by

See Mixin Guards and Ruleset Guards (aka “CSS Guards”) for when usage examples. Since you need to define a variable you’ll have to use mixin-based condition (rulesets do not expose their variables to an outer scope). E.g.:

.-();
.-() when (@side = right) {
    @sideOpposite: left;
}
.-() when (@side = left) {
    @sideOpposite: right;
}

(Use any suitable mixin name instead of .-, e.g. .define-opposite-side).

And with Argument Pattern Matching it can be further simplified just to:

.-(@side); 
.-(left)  {@sideOpposite: right}
.-(right) {@sideOpposite: left}

More Related Contents:

  1. Multiple properties are getting treated as separate arguments in mixins
  2. Loop over an array of name value pairs in LESS
  3. How do I extend a class/mixin which has dynamically formed selector
  4. Conditional CSS based on background color variable
  5. How to use if statements in LESS
  6. Less CSS: Mixins with Variable Number of Arguments
  7. Arrays with Less
  8. Why I can see Less instead of CSS in a browser [closed]
  9. How to prevent Less from trying to compile CSS calc() properties?
  10. Twitter Bootstrap Customization Best Practices [closed]
  11. Disable LESS-CSS Overwriting calc() [duplicate]
  12. How to namespace Twitter Bootstrap so styles don’t conflict
  13. Loop through array of variable names in Less
  14. less.js not working in chrome
  15. import .css file into .less file
  16. What does an “&” before a pseudo element in CSS mean?
  17. Load less.js rules dynamically
  18. LessCss dynamic variables based on ancestor class
  19. Defining Variable Variables using LESS CSS
  20. Compile a referenced LESS file into CSS with PHP automatically
  21. Build list of selectors with LESS
  22. Less lists as a mixin argument(s)
  23. LESS CSS: abusing the & Operator when nesting?
  24. How to add different CSS style to every nth element, depending on n using LESS
  25. LESS: Unrecognized input error when using Bootstrap
  26. Concatenate strings in Less
  27. Does LESS have an “extend” feature?
  28. Dynamically changing less variables
  29. Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?
  30. “Please try running this command again as Root/Administrator” error when trying to install LESS

Leave a Comment