Wouldn't It Be Cool If CSS Would Have Variables?

[chaseman]

So you can simply insert a color into a variable, and when you want to change the color you simply change the value of the variable which then changes the color for everything else on your whole site, and all that just with one single adjustment?

 

No more changing of the color in all classes one by one just to find out you don't like it and then revert it.

 

 

If there's a feedback system I'd like to see that in CSS4.

 

Just crossed my mind.

[Philip]

They are working on it in the specs, it's just incredibly complicated.

 

You can use other tools/languages that result in CSS such as LESS

[xylex]

Isn't that what CSS inheritance and multiple class assignment is for?  If you have the same value in a bunch of different classes, chances are the problem is in your design rather than the design of CSS itself.

[Philip]

Isn't that what CSS inheritance and multiple class assignment is for?  If you have the same value in a bunch of different classes, chances are the problem is in your design rather than the design of CSS itself.

 

A very good point. However, there are times where variables & calculations will come in handy.

 

A simple example could be creating a color swatch:

@var $color_main #000000;
@var $color_light = #FFFFFF;
@var $color_accent = #00FF00;
...
.this, .that, .foo, .bar { color: $color_main; }
.php, .freak, .google { color: $color_accent; }

You could list all of the classes/ids that are going to use one color (like above) and be as efficient as possible. However, I prefer readability by breaking them into sections such as the following, then minifying it for production.

/* this and that at phpfreaks*/
.this, .that {color: $color_main; }
.php, .freak { color: $color_accent; }

/* foo bar at google's widget */
.foo, .bar { color: $color_main; }
.google { color: $color_accent; }

[chaseman]

Isn't that what CSS inheritance and multiple class assignment is for?  If you have the same value in a bunch of different classes, chances are the problem is in your design rather than the design of CSS itself.

A very good point indeed, I'm in the process of creating a completely CSS driven wordpress template with barely any images, even the logo is in text. It's a bunch of CSS and you just gave me a good suggestion how to clean up all that mess and make the code even more efficient.

 

I could simply do the following, which I haven't done to be honest:

 

.font { color: x; font-family: x; line-height: x; letter-spacing: x; }
.blog_post { margin: x; padding: x; width: x; height: x; }

// AND THEN: 

<div class='blog_post font'>

/* BLOG POST HERE */

</div>

 

In this case I'll admit that the problem is in my design, though as KingPhillipp demonstrated a variable feature would come in handy.

[.josh]

I'm torn on this.

 

On the one hand, separating out classes for readability is very appealing to me, so therefore having to change a common color in one place instead of 20 is appealing to me.

 

But on the other hand... IMO this is some kind of scope creep or something.  In and of itself it doesn't seem so bad, but then what's next? Slippery slope in making CSS to evolve into its own language. 

 

 

[xylex]

I think that the method that chaseman posted is the right way to be doing this.  With KingPhilip's second suggestion, the use of variables would either be far more restrictive in what you could modify or extremely confusing to read and use if everything were variables and you didn't know what classes used what variables. 

 

For example, if you have a few widgets that should all be styled similarly, and they all reference the widget class, if decide you want to add a gradient or rounded corners to those widgets later, you easily could do this in one class.  CSS variables wouldn't help at all with this type of situation, and I don't really advocate adding in a feature to a language to support bad use of the language (I know, this philosophy puts me at odds with PHP, goto() for example....).

[Philip]

CSS variables wouldn't help at all with this type of situation, and I don't really advocate adding in a feature to a language to support bad use of the language (I know, this philosophy puts me at odds with PHP, goto() for example....).

 

Just wait for css-calc to finish in the specs