Eenvoudig thema's maken met CSS-variabelen

Een van de beste use-cases voor CSS-variabelen is het maken van thema's. En daarmee bedoel ik niet alleen het wijzigen van thema's voor je hele app, want dat hoef je waarschijnlijk niet vaak te doen. Wat relevanter is, is de mogelijkheid om eenvoudig componentspecifieke thema's te maken.

Dit kan bijvoorbeeld zijn wanneer u een e-commerceproduct moet markeren als toegevoegd aan uw winkelwagentje. Of misschien heeft uw site een admin-sectie met een donkere zijbalk.

CSS-variabelen stellen u in staat dit op een eenvoudigere en flexibelere manier te doen dan voorheen mogelijk was. In dit artikel leg ik precies uit hoe.

Ik heb ook een screencast gemaakt over het maken van thema's in mijn gratis 8-delige cursus CSS-variabelen. Lees dit artikel als je meer wilt weten over de cursus.

De opzet

We zullen als voorbeeld werken met een portfoliosite. Ons doel is om een ​​van de projecten in onze portefeuille te kunnen opnemen, zodat deze zich onderscheidt van de rest. Technisch gezien doen we dit door een klasse toe te voegen aan het specifieke item dat we willen gebruiken.

Zo ziet de portfoliosite er aanvankelijk uit:

Ik zal niet de moeite nemen om over de HTML voor de site te praten, omdat het vrij ongecompliceerd is, en ik neem aan dat je HTML kent. Als je echter geïnteresseerd bent om met de code te spelen, heb ik hier een Scrimba-speeltuin voor gemaakt.

Laten we nu rechtstreeks naar de CSS springen. Dit is ons stylesheet voordat we CSS-variabelen gingen gebruiken:

html, body { background: #ffeead; color: #ff6f69; } h1, p { color: #ff6f69; } #navbar a { color: #ff6f69; } .item { background: #ffcc5c; } button { background: #ff6f69; color: #ffcc5c; } 

Zoals u kunt zien, zijn we alleen met behulp van drie kleuren hier: #ffeead, #ff9f96en #ffcc5c. We hergebruiken ze echter veel. Dit is dus een perfecte use case voor CSS-variabelen.

Om het te gebruiken, moeten we eerst onze variabelen declareren. We doen dat in de :rootpseudo-klasse:

:root { --red: #ff6f69; --beige: #ffeead; --yellow: #ffcc5c; } 

Vervolgens wisselen we onze hexadecimale waarden uit met de variabelen:

html, body { background: var(--beige); color: var(--red); } h1, p { color: var(--red); } #navbar a { color: var(--red); } .item { background: var(--yellow); } button { background: var(--red); color: var(--yellow); } 

Nu hebben we de kracht van variabelen in onze CSS, wat betekent dat we het eenvoudig kunnen veranderen --redin iets anders, en het zal op onze hele site worden bijgewerkt.

Als je moeite hebt om te begrijpen wat hier aan de hand is, bekijk dan mijn artikel CSS-variabelen leren in 5 minuten of schrijf je in voor de cursus.

Een thema maken

Laten we nu het thema maken. We willen de mogelijkheid hebben om een .featuredklasse toe te voegen aan een van onze vier projectitems, en daardoor dat item te onderscheiden van de rest. Concreet veranderen we rood in #ff5564en geel #ffe55b.

Hier is hoe het eruit zal zien in de opmaak:

project d

learn more

Deze wijziging zou de styling op vier verschillende plaatsen moeten beïnvloeden:

  • achtergrondkleur van de
  • kleur van de

  • achtergrondkleur van de
  • kleur van de

De oude manier

De manier waarop we dit eerder moesten oplossen, was door een aangepaste CSS-selector te maken voor elk element in het .featureditem, als volgt:

.featured { background: #ffe55b; } .featured > h1 { color: #ff5564; } .featured > button { background: #ff5564; color: #ffe55b; } 

Deze aanpak is niet erg flexibel. Als u een ander element aan uw portfolio-items zou toevoegen, zou u er ook specifieke selectors voor moeten schrijven.

De nieuwe manier

Met CSS-variabelen wordt het echter veel eenvoudiger. We zullen de variabelen binnen de .featuredklasse als volgt overschrijven :

.featured { --yellow: #ffe55b; --red: #ff5564; } 

Omdat CSS-variabelen worden overgeërfd, .featuredverwijzen alle elementen waarbinnen naar --redof gebruiken --yellownu de lokale waarden en niet de globale. Dus de of

elementen gebruiken automatisch de lokale waarden voor de variabelen.

Hier is hoe het zich afspeelt op de pagina.

Zoals je kunt zien, ziet het item 'project d' er een beetje anders uit dan de rest.

Zoals je kunt zien, ziet het item 'project d' er een beetje anders uit dan de rest.

Netjes, of wat?

Bedenk eens hoe dit zou zijn als we een complexere component zouden bouwen, bijvoorbeeld een productitem in een e-commerce-app. Het kan titels, ondertitels, alinea's, afbeeldingen, bijschriften, knoppen, beoordelingen en nog veel meer bevatten. Het is veel gemakkelijker en flexibeler om simpelweg de waarde van sommige variabelen om te draaien in plaats van aangepaste selectors te maken voor elk van de nakomelingen.

Als je meer wilt weten over deze technologie, bekijk dan mijn gratis 8-delige interactieve CSS Variables-cursus over Scrimba.

Bedankt voor het lezen! Mijn naam is Per Borgen, ik ben de mede-oprichter van Scrimba - de gemakkelijkste manier om te leren programmeren. Bekijk onze responsive webdesign bootcamp als je wilt leren hoe je een moderne website op professioneel niveau kunt bouwen.