0

Suppose you want to use multiple color schemes for different sections of a site. Static elements like header & navigation should use a variation of a given color (using less color functions). Each section has the theme name attached as a class on the body. So you could think of something like this:

body {
    &.red {
        @col: #f00;
    }
    &.blue {
        @col: #00f;
    }

    background-color:darken(@col, 5%);
    color:lighten(@col, 20%);

    // & children
}

But @col is not available outside of .red or .blue: NameError: variable @col is undefined

Is it possible to define a variable depending on a css selector? If not, what else could be done?

Edit: Sorry, this is a duplicate of Defining Variable Variables using LESS CSS

Community
  • 1
  • 1
RienNeVaPlu͢s
  • 7,442
  • 6
  • 43
  • 77
  • I don't think variables exist right now, but it looks like they could be coming: http://dev.w3.org/csswg/css-variables/ – JRQ Mar 03 '15 at 22:47
  • I am using [less](http://lesscss.org), should've been more clear about that! – RienNeVaPlu͢s Mar 03 '15 at 22:48
  • To answer the question: no, it's not. You need to do it in reverse. For example see http://stackoverflow.com/a/15368587/2712740, http://stackoverflow.com/q/23551080/2712740 etc. (there're wide variations, more results can be found by searching for "theme" and "theming"). And I can't see how the A you linked above as a duplicate can help you (it very different use-case). – seven-phases-max Mar 03 '15 at 23:14

0 Answers0