CSS: ¿es posible obtener el "valor" actual y "agregarlo"?

Question

En mi CSS, tengo una mesa con rayas de cebra. p.ej. blanco y azul claro.

Digamos que tengo tres columnas ... lo que me gustaría hacer es poder mantener las líneas de cebra, y dentro de css (sin javascript) agregar sombreado/hacer que los azules sean más oscuros para cada columna.

¿Es esto posible? Algo así como obtener el color de fondo "actual" #AABBCC y luego agregar # 000011 al color actual para darme #AABBDD ...

No tengo idea de si esto es posible, así que me pregunto. Solo estoy siendo flojo, ya que no quiero tener que redefinir mi distribución de cebras para cada grupo de columna/columna que pueda tener.

Gracias

Answer 1

No, esto no es compatible con CSS, a menos que se va a usar algo como expresiones CSS (que se basan en Javascript).

Sin embargo, si está dispuesto a utilizar un preprocesador para sus hojas de estilo, puede utilizar una biblioteca como LESS para introducir variables y realizar una adición como esa. Este ejemplo, en particular, también utiliza Javascript, por lo que tampoco cumple los criterios.

Answer 2

Jaja, en CSS puro, de ninguna manera. Sin embargo, hay varios lenguajes tipo "css" que pueden hacer esto: scss, less, stylus, etc. Lo esencial es escribir código que se compila en CSS "real".

En lápiz:

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

td.foo 
    stripe(teal) 

genera ...

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