CSS - possible to get current "value" and "add" to it?

Question

In my css, I have a table with zebra striping. e.g. white and light-blue.

Lets say I have three columns... what I'd like to do is be able to make maintain the zebra striping, and within css (no javascript) add shading/make the blues darker for each column.

Is that possible? Something like getting the "current" background color #AABBCC and then Adding #000011 to the current color to give me #AABBDD...

No idea if this is even possible, so just wondering. I'm just being lazy, as I don't want to have to redefine my zebra striping for every column/column group I may have.

Thanks

Answer 1

No, this is not supported with CSS, unless you were to use something like CSS expressions (which rely on Javascript).

However, if you're willing to use a preprocessor for your style sheets, you can use a library like LESS to introduce variables and perform addition like that. This example in particular uses Javascript as well, so that doesn't really fit the criteria either.

Answer 2

Haha, in pure CSS, no way. There are several "css-like" languages though that can do this: scss, less, stylus, etc. The gist is that you write code that gets compiled down to "real" CSS.

In stylus:

stripe( color )
    &
        background color
    &:nth-child(odd)
        background color + #000011

td.foo
    stripe( teal )

generates...

td.foo {
  background: #008080;
}
td.foo:nth-child(odd) {
  background: #008091;
}