CSS: è possibile ottenere "valore" e "aggiunta" correnti?

Question

Nel mio css, ho un tavolo con strisce zebrate. per esempio. bianco e azzurro.

Diciamo che ho tre colonne ... quello che mi piacerebbe fare è essere in grado di mantenere lo zebra striping, e all'interno di css (senza javascript) aggiungere ombreggiature/rendere il blues più scuro per ogni colonna.

È possibile? Qualcosa come ottenere il colore di sfondo "attuale" #ABBCC e poi aggiungere # 000011 al colore corrente per darmi #AABBDD ...

Non ho idea se questo sia possibile, quindi mi chiedo solo. Sono solo pigro, perché non voglio dover ridefinire il mio striping zebra per ogni colonna/gruppo di colonne che potrei avere.

Grazie

Answer 1

No, questo non è supportato con i CSS, a meno che non si sceglie di usare qualcosa come espressioni CSS (che si basano su JavaScript).

Tuttavia, se si è disposti a utilizzare un preprocessore per i fogli di stile, è possibile utilizzare una libreria come LESS per introdurre variabili ed eseguire un'aggiunta del genere. Questo esempio, in particolare, utilizza anche Javascript, quindi non corrisponde nemmeno ai criteri.

Answer 2

Haha, in puro CSS, in nessun modo. Esistono diversi linguaggi "css-like" che possono farlo: scss, less, stylus, ecc. L'essenza è che si scrive codice che viene compilato in CSS "reale".

In stilo:

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; 
}