Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

I use a few colors throughout my CSS stylesheet. For example

#testdiv{
  background: #123456;
}

Is it possible to define that color by name so I can reference it in the css sheet like this

#testdiv{
  background: COLORNAME;
}
share|improve this question
1  
If you use a framework such as SASS, you'll get this feature along with other brilliant features. – Coderchu Jul 14 '15 at 4:56
up vote 9 down vote accepted

It is probably a better practice to define a CSS class and re-use it on each element you want to assign the color to rather than coding it to a specific element.

Like so:

.darkBackground {
   background: #123456;
}

.smallText {
   font-size:8pt;
}

It also helps to know that an element can have multiple classes applied so you can break out your "Constant" element values into separate classes and apply more than one as needed.

<div id="myDiv1" class="darkBackground smallText"></div>
<div id="myDiv2" class="darkBackground bigText"></div>
share|improve this answer
15  
I'm not too fond of your example. I believe CSS classes are best used to classify the html document structure. A class called darkBackground doesn't describe the structure of the document, and creates a conceptual coupling of the document to some aspect of the appearance - which is exactly what CSS is supposed to bring us away from. If a future developer needs to switch to light backgrounds, they'll potentially have to edit loads of html to use class "lightBackground" or defy the meaning of their classes by editing the "darkBackground" rule to reference a light colour. – csj Aug 1 '13 at 0:50
5  
Truth be told, your example does address the fundamental issue experienced by the op and others: css does not provide constants (the reasons for that are a whole different debate). Dealing with it seems to boil down to 3 options: 1. (your suggestion) use css classes to identify the style rather than the structure. 2. (probabilityzero's answer) use some form of server side programmatic css generator. 3. Give up, accept the nuisance, and embrace the css paradigm as is. Given that your answer was accepted uncontested and I have a preference for 2 or 3, I figured I'd add my 2 cents. Cheers – csj Aug 2 '13 at 9:45
2  
@Abacus. I didn't submit a separate answer because my own approaches were already represented by other answers. Rather, my goal in providing a comment was to offer a direct challenge to an answer that had been accepted as correct. – csj Oct 23 '13 at 23:26
2  
While I agree with "It is probably a better practice to define a CSS class and re-use it on each element you want to assign the color to ", a problem with this approach is where the colour is to be applied for different attributes - for example I have an SVG rect element that should be the same colour as the background for some li element, the svg rect requires fill:red while the li element requires background:red. Using this approach I would have to define the colour in two separate places. – rom99 Nov 21 '13 at 11:23
1  
This answer doesn't actually answer the question, and as others has stated, the advice is questionable. – Michael Scheper Apr 30 '14 at 23:50

Not with plain CSS, but there are some CSS extensions that you could use, like SASS or less-css.

Here's an example of less css:

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
share|improve this answer
9  
It's unbelievable that constants haven't been added to CSS3 yet. Web development is in the middle ages. – AlikElzin-kilaka May 26 '15 at 5:50
    
@AlikElzin-kilaka I felt that way for years, but after using less-css for a while and experiencing the multitude of features it brings to the table, I stopped caring about the deficits I perceived CSS as having. – csj Mar 3 at 6:57

There are a couple of proposals for this, so it might happen soon, but nothing has yet been standardised as far as I know.

The problem with using CSS classes for this is that they are no help if you want to use the same value for different properties, for example if you want to use a particular color value for a border on one element, and a background-color on another.

share|improve this answer
1  
IMO, this should be the answer marked correct. Further, you cannot make a CSS class like customers-process-step-color-1 and apply it automatically to pseudo elements like :before. You have to set the color to :before directly. – peter_the_oak Apr 19 '15 at 5:24

You can have constants in a CSS file, declaring them like this:

*{
 -my-lightBlue: #99ccff;
 -my-lightGray: #e6e6e6;
}

Then you can use them in the CSS file like this:

.menu-item:focused {
  -fx-background-color: -my-lightBlue;
}

After that you can use them programmatically like this:

progressBar.setStyle("-fx-accent: -my-lightBlue;");
share|improve this answer
    
That only applies to JavaFX css – Caleb Jul 21 '15 at 19:03

Use SASS or less.

Nowadays, using preprocessors like the above is a common practice for a better front-end development workflow.

It helps you being more organized and features like variables or mixins are some of the reasons they worth taking into consideration.

share|improve this answer
8  
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – soldier.moth Aug 16 '12 at 5:47

The standard way to do this is PHP. Add #define statements at the beginning of your CSS file, like

#define COLORNAME: #123456;

Instead of linking to the CSS file in the head of your HTML file, run a PHP script at that location. The script loads the CSS file, replaces all occurrences of COLORNAME by #123456 and streams the patched text to the client using echo or print.

Alternatively, you could upload the source file (also using PHP), use PHP to create a CSS file once where all occurrences of #defines are replaced, and use that file in your HTML. This is more efficient, since you're doing the conversion only once, at the upload, instead of every time you load the HTML file.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.