LESS.css variable depending on class

Question

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

ScottS · Accepted Answer · 2014-03-27 20:32:27Z

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:

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.
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.

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: I've updated my answer to something that may help you.

solarc · Accepted Answer · 2012-07-22 10:49:09Z

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

answered Jul 22, 2012 at 10:49

solarc

5,7582 gold badges42 silver badges52 bronze badges

3 Comments

dozed Over a year ago

well there are many elements depending on the @colorOne. thats the problem, thats why i tried to overwrite the variable

solarc Over a year ago

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.

tfrascaroli Over a year ago

+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.

Nikola K. · Accepted Answer · 2012-07-22 12:22:20Z

0

@blue:#0000FF;
@green:#00FF00;

.theme-blue {
    color:@blue;
}
.theme-green {
    color:@green;
}

edited Jul 22, 2012 at 12:22

Nikola K.

7,15313 gold badges33 silver badges39 bronze badges

answered Jul 22, 2012 at 10:54

Jordizle

2521 silver badge5 bronze badges

1 Comment

ed1nh0 Over a year ago

I guess you misunderstood the issue.

Collectives™ on Stack Overflow

LESS.css variable depending on class

3 Answers 3

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

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

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

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related