Defining Variable Variables using LESS CSS

by

Use interpolation and escaping, parentheses in the selector and parametric mixins to get the desired effect:

  • Dynamic variables by interpolation: In a string, "@{variable}" is replaced with the value of the variable. They can also be nested: Given @{@{var}-foo} and @var: bar;, the result is "barfoo".
    The resulting value is quoted. To remove these quotes, prefix ~.
  • Dynamic selectors by Selector interpolation: body.@{var} turns into body.bar.

Example:

@red-md:   #232;
@red-dk:   #343;

.setColor(@color) {
    body.@{color} { background-color: ~"@{@{color}-dk}";
        #container { background-color: ~"@{@{color}-md}";
         p { color: ~"@{@{color}-md}"; }
      }
    }
}
.setColor(~"red"); // Escape to prevent "red" turning "#FF0000"
//.setColor(~"blue"); etc..

Turns into:

body.red {
  background-color: #334433;
}
body.red #container {
  background-color: #223322;
}
body.red #container p {
  color: #223322;
}

Note: When the answer was originally written, selector interpolation did not exist. See the previous revision for the solution if you’re working with an old LESS compiler (before LESS 1.3.1a). Support for the old method will be dropped in LESS 1.4.0.

More Related Contents:

  1. Why I can see Less instead of CSS in a browser [closed]
  2. How to prevent Less from trying to compile CSS calc() properties?
  3. Disable LESS-CSS Overwriting calc() [duplicate]
  4. Is there a SASS.js? Something like LESS.js?
  5. Using variables in property names in LESS (dynamic properties / property name interpolation)
  6. How to thematize in lesscss
  7. less.js not working in chrome
  8. Double border with different color [duplicate]
  9. import .css file into .less file
  10. What does an “&” before a pseudo element in CSS mean?
  11. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  12. Build list of selectors with LESS
  13. Less lists as a mixin argument(s)
  14. LESS CSS: abusing the & Operator when nesting?
  15. How to add different CSS style to every nth element, depending on n using LESS
  16. How do I extend a class/mixin which has dynamically formed selector
  17. LESS: Unrecognized input error when using Bootstrap
  18. LESS mixin a variable class name
  19. Concatenate strings in Less
  20. LESS CSS nesting classes
  21. Does LESS have an “extend” feature?
  22. Less CSS: Mixins with Variable Number of Arguments
  23. Media Query grouping instead of multiple scattered media queries that match
  24. Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?
  25. How to create equal height columns in pure CSS [duplicate]
  26. Removing display:flex adds spaces around a link. Why?
  27. How does the CSS specificity work? [duplicate]
  28. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  29. CSS transition fade in
  30. How to change Bootstrap navbar collapse breakpoint

Leave a Comment