Question

I have a very wierd question, I dont know wether if its possible in css or not

Suppose I have say 3 different css classes as shown below, as you can see I have a common property of all these classes, I want to declare this color somewhere else and pass a reference to it here, so if next time I want to change the color I can simply change at one place rather than changing in all the 5 classes.

I know that you can use body{}, or a wrapper for this but that would affect the colors of the entire site right ? Is there a way to do this ?

Is this even possible ?

.abc {
color:red;
}

.abc2 {
color:red;
}

.abc3 {
color:red;
}

.abc4 {
color:red;
}

.abc5 {
color:red;
}

Answer 1

The bad news: you can’t do it in CSS.

The good news: you can write in a meta-CSS language like LESS, which then processes a LESS file to pure CSS. This is called a “mixin”.

In LESS:

@errorColor: red;

.error-color {
  color: @errorColor;
}

#error-1 {
  .error-color;
}

.all-errors {
  .error-color;
}

More info: http://lesscss.org/#-mixins