CODEWITHSUNDEEP
css
user550738
user550738

Reputation:

is there a way to define constants for colors in CSS?

All of my colors in my CSS file(s) are scattered all over the place.

I'd like all of my colors in CSS to be in one place so they are easy to tweak. Something like constants would be useful.

What would be a good approach to help? I'm imagining something like the following, but I'd appreciate any suggestions:

BODY_BACKGROUND_COLOR = #A8A8A8;
HEADER_BACKGROUND_COLOR = BLUE;
HEADER_TEXT = BLACK;
BODY_TEXT = #eee;

/* ... tonnes of CSS ... */

body {
  background-color: BODY_BACKGROUND_COLOR;

/* ... tonnes of CSS ... */

.header {
  /* ... tonnes of CSS ... */
  background-color: HEADER_BACKGROUND_COLOR;
  /* ... tonnes of CSS ... */
}

Upvotes: 2

Views: 1221

Answers (2)

viky
viky

Reputation: 542

LESS is definitely an apt choice for this. It takes nothing to get started, other than adding a js file to your HTML. Remember it will add up to the load on your client. Once you like it, you can use start using it on server side, thus avoiding the client-side load.

It also gives you options to perform operations on colors - like adding two colors, lightening and darkening a color by given percentage, etc.

Btw, I think using server-side language to process CSS files for every request will add unwanted burden to the server. And AFAIK, including the CSS code inline in your HTML file is the only way to this, which is not the optimal way of serving CSS files (as they can't be cached).

Upvotes: 0

alex
alex

Reputation: 490133

You can use a CSS processor such as LESS.

However, if you only want to use colours as constants, you could probably process your files with your server side language.

Upvotes: 6

Related Questions