Vind jij webdevelopment net zo leuk als wij? En schrijf je al je CSS in Sass? Dan hebben we hier een toffe truc voor de échte die-hards!

Uiteraard gebruik je verschillende kleurtjes in je site. Deze kleuren komen op veel plekken terug en natuurlijk heb je dit allemaal netjes geordend in je _colors.scss bestand 🙂

Alle kleuren tegelijk een hover-state:

Wat nou als je, net als wij, al deze kleuren tegelijk een hover-state wilt meegeven. Omdat je bijvoorbeeld, net als wij, de kleurtjes hebt gebruikt voor tag-labels of categorie-labels. Dan zou het heel wat regeltjes CSS schelen wanneer je dit in 1 keer kunt doen. En wanneer je dus willekeurig welk kleurtje aan deze logica toe zou kunnen voegen toch?

Check de @each loop die we hiervoor gebruiken in Sass, zo blijft je ook je css lekker dynamisch, have fun!

See the Pen
SCSS darken all base colors at once in link list a:hover by Vita (@vitavanderlijke)
on CodePen.