4

I want to create something like a themepicker. I use LESS.css.

LESS.css has a variable which contains the main colors :

@colorOne: #222;
@colorTwo: #fff;
@darkGradientStart: lighten(@colorOne, 10%);
@darkGradientStop: lighten(@colorOne, 5%);
@lightGradientStart: @colorTwo;
@lightradientStop: darken(@colorTwo, 7%);

I want to change them if the tag has the color-class like this:

<body class='theme-blue'>

then I have written this in my less.css (after the default variables)

.theme-blue{
    @colorOne: blue;
}

but it still uses the default #222. It is not overwritten.

How can I solve this problem?

Thanks

dozed
  • 192
  • 4
  • 12

3 Answers3

9

You cannot overwrite variables in LESS (within the same scope). The documentation specifically says:

Note that variables in LESS are actually ‘constants’ in that they can only be defined once.

For what you desire, you need to do a mixin:

Example LESS Code

.colorDefs(@c1: #222, @c2: #fff) {
    @colorOne: @c1;
    @colorTwo: @c2;
    @darkGradientStart: lighten(@colorOne, 10%);
    @darkGradientStop: lighten(@colorOne, 5%);
    @lightGradientStart: @colorTwo;
    @lightGradientStop: darken(@colorTwo, 7%);
}

.theme-blue {
    //import color definitions 
    .colorDefs(blue, yellow);

    // use them 
    color: @colorOne;
    background-color: @colorTwo;

    .gradient1 {
        background-image: linear-gradient(top, @darkGradientStart, @darkGradientStop);
    }

    .gradient1 {
        background-image: linear-gradient(top, @lightGradientStart, @lightGradientStop);
    }
}


.theme-green {
    //import different color definitions
    .colorDefs(green, red);

    // use them 
    color: @colorOne;
    background-color: @colorTwo;

    .gradient1 {
        background-image: linear-gradient(top, @darkGradientStart, @darkGradientStop);
    }

    .gradient1 {
        background-image: linear-gradient(top, @lightGradientStart, @lightGradientStop);
    }
}

Example CSS Output

.theme-blue {
  color: #0000ff;
  background-color: #ffff00;
}
.theme-blue .gradient1 {
  background-image: linear-gradient(top, #3333ff, #1a1aff);
}
.theme-blue .gradient1 {
  background-image: linear-gradient(top, #ffff00, #dbdb00);
}
.theme-green {
  color: #008000;
  background-color: #ff0000;
}
.theme-green .gradient1 {
  background-image: linear-gradient(top, #00b300, #009a00);
}
.theme-green .gradient1 {
  background-image: linear-gradient(top, #ff0000, #db0000);
}

Solving 4K (i.e. a lot of) Lines of Code

ed1nh0 commented about having 4K lines of code using the color variables, and not being able to "put that in a mixin." Let me make a few comments on that:

  1. If 4K lines of code depend upon the body class to define the colors, then it is probably best to split each color into its own css file, and only load that file as needed (i.e. not grouping every code color into one file). This then calls into question whether you really want to be controlling color by body class.
  2. Regardless of whether one does what is recommended in 1., I believe one could still handle this with 4K of lines that use the colors. I believe the issue is not in using a mixin to define the color values themselves (i.e. not 4K lines of color variable definitions), but rather in the 4K lines of properties, classes, etc. that need repeating that are using the colors. But that repetition can be handled just as easily by wrapping it all in a mixin also. So my original answer above could be abstracted further to this (note that .colorDefs is the same as above and not repeated here):

LESS

.themeProperties() { // Imagine inside here the 4K lines of code
    // use them 
    color: @colorOne;
    background-color: @colorTwo;

    .gradient1 {
        background-image: linear-gradient(top, @darkGradientStart, @darkGradientStop);
    }

    .gradient1 {
        background-image: linear-gradient(top, @lightGradientStart, @lightGradientStop);
    }
}

.theme-blue {
    //import color definitions 
    .colorDefs(blue, yellow);
    .themeProperties(); //4K lines repeated here
}

.theme-green {
    //import different color definitions
    .colorDefs(green, red);
    .themeProperties(); //4K lines repeated here
}

The above does assume that there are not differences in how the variables are used by the properties, just what the values of those properties are. If there were any "differences," then some tweaking mixins may need to be done for certain situations, but the concept should still hold.

ScottS
  • 71,703
  • 13
  • 126
  • 146
  • This seems to be the best solution. But if I have more than 4k lines of code using those color variables? I cannot put so much lines of code inside a mixin. This issue is giving me a huge headache. – ed1nh0 Mar 27 '14 at 20:12
  • @ed1nh0: I've updated my answer to something that may help you. – ScottS Mar 27 '14 at 20:32
0

What you are doing would get compiled like this in css:

.theme-blue{
    #222: blue;
}

See why it doesn't work now? :)

If you are trying to override the color style, you should do it the usual css way:

.theme-blue{
    color: blue;
}
solarc
  • 5,638
  • 2
  • 40
  • 51
  • well there are many elements depending on the @colorOne. thats the problem, thats why i tried to overwrite the variable – dozed Jul 22 '12 at 10:55
  • 1
    I think you can override it if you put your default variables in an imported file and your overrides in a second imported file. But it would override them globally, not just for that selector. – solarc Jul 22 '12 at 19:23
  • +1 That's actually a really smart solution to the 'variables as constants' problem. Good job, sir! True, it does _replace_ the 'variable' at all levels, but I think that serves pretty well if you factor all the code that depends on that variable changing in a sepparate file, and then include as needed back to the main file, after doing all the replacing. – tfrascaroli Aug 31 '15 at 14:36
0
@blue:#0000FF;
@green:#00FF00;

.theme-blue {
    color:@blue;
}
.theme-green {
    color:@green;
}
Nikola K.
  • 7,093
  • 13
  • 31
  • 39
Jordizle
  • 252
  • 1
  • 5