Managing different coloured pages (with different coloured elements) in LESS

[grimski]

Hi there,

I have some mixins in LESS set up for example:

@textcolor: blue
@baseheadingfontcolor: blue;

And I use these thoughout my LESS files like this:

h1 {
color: @baseheadingfontcolor;
}

p {
color: @textcolor;
.font-size(13);
}

Now these work throughout the site just great. The ‘problem’ I now have is that some of the pages on the site are blue, some green and some yellow – so the colour of the headings and paragraphs etc will be a different colour on each page.

Normally I’d manage this by a class on the body, for example _class=”green”_, which would allow me to do this:

.green p {
color green;
.font-size(13);
}

Which I’m thinking would be an utter pain to do for every element, p, ul, ol, dl, dt, blockquote, etc, etc. Especially when I have 2 different colour themes to do.

I was thinking I could set up a new mixin for each theme, like _@textcolorgreen_ – but can anyone think of a good way to manage this within LESS? The best I can could up with was basically:

.green {
p {
color @textcolorgreen;
}
}

Which doesn’t seem like any big improvement. I know it might be one of those things where theres not a lot I can do, but it’d be great to get some ideas. I wasn’t sure if there was away within the original declaration, if I could target up and specify if there is a .green class above it, do something else but I don’t think that is doable.

Thanks,
Steve

[TheDoc]

By setting the color on the `body` you should be able to avoid some of that. Most elements (p, ul, ol, dl, dt, blockquote, etc) all look to *inherit* colors.

body {
color: /* insert default */;

&.green {
color: $textColorGreen;
}

&.purple {
color: $textColorPurple;
}
}

Sorry for my use of Scss, it’s just quicker for me.

Having said all that, using words like ‘green’ and ‘purple’ just lead to trouble down the road when you want to change the purple to pink and then need to change all of the variables. Just something to think about.

[grimski]

Hi @TheDoc, thanks for the reply.

That’d work but I think the only problem would be I’d have to put every single element within body{}

So maybe I’d be better off just sticking with:

p,
ol,
ul,
dl,
address {
color: @textcolor;
.font-size(13);
line-height: @baselineheight;
margin-bottom: @baseline;
text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

.green {
p,
ol,
ul,
dl,
address {
color: @textcolorgreen;
}
}

.yellow {
p,
ol,
ul,
dl,
address {
color: @textcoloryellow;
}
}

It all seems like a lot of code (And thats just one bit, I’d have to do it for table colours, form colours, blockquotes, definition lists etc!), but the designs require these different colours, so I really don’t think theres a nice, clean , simple way around it? Other than having a separate .LESS file, where just colours of elements are declared for the other themes. That way it keeps it out of the way of the other CSS – but then again, it would just be the same amount of code.

[TheDoc]

You shouldn’t need to declare those elements all over again. My example of just setting the color on the body should work fine. All of the elements will inherit that color.

[Author]

Posts