Weer wat geleerd...

Rene Krewinkel, docent Sittard

TL;DR In de categorie #TechTalk:

Dat je soms over je eigen beperkingen struikelt, oké... that happens. Maar dat je gewoon dingen NIET WEET - terwijl je jezelf toch de absolute expert vindt - da's onverteerbaar...

Tijdens het bouwen van een React-Native appje en de bijbehorende website, had ik design-technisch te maken met een stuk of 6 kleuren (vanuit de huisstijl van de klant) en zoals dat gaat blijkt je grafisch concept wel aardig te kloppen, alleen op een device is dat ineens toch wat minder, of moet de kleur net die andere zijn of zoiets - creatief proces he, valt voor jezelf meestal wat lastig te sturen.

Nou viel dat voor de app wel mee: ik heb de kleuren keurig in een object geduwd en een aantal variabelen in het leven geroepen die vanuit dat object gevoed worden. Schakelen tussen kleuren hoeft alleen maar in de config-file, en hup, de app oogt direct een stuk frisser.

Op de website was dat natuurlijk weer een ander verhaal... Hoewel ik bij elk (html) project denk "Nu wordt het toch wel langzaam tijd voor SASS of LESS" - schiet me dat meestal pas te binnen als ik op regel 500 van mijn stylesheet ben, en dan moet ik alsnog afwegen of ik het wel of niet ga doen - het schiet dan meestal door naar "NIET".

Je kunt in SASS/SCSS een variabele maken, en die vervolgens overal inzetten:

$base-color: #c6538c;
.menu { Background-color: $base-color; }

Zoiets.

Nadeel: je moet dat vervolgens "compileren" (niet helemaal de juiste term, maar zo noemen ze dat) om een CSS bestand te krijgen dat een browser snapt.

Nu heb je gelukkig bij de meeste code-editors (Atom, VSCode, PHPStorm) plugins die dat automatisch voor je doen, maar ik blijf het toch wat "overbodig" vinden om als het ware dubbele files in je applicatie te hebben.
We gingen voor DRY he...

WAT BLIJKT NOU... En daar kwam ik per toeval achter - en dat blijkt al bijna een jaar het geval te zijn: je kunt tegenwoordig dus gewoon variabelen IN CSS gebruiken... Echt waar, kijk maar!

Het gaat niet zover als SASS, dat is toch wat geavanceerder, maar voor het reguliere "kleurtje of fontje vervangen" is dit meer dan voldoende! Op de MDN site staat het redelijk goed uitgelegd, maar hier even een klein voorbeeld:

En dat ziet er dan zo uit:

Weer wat geleerd...