Variabelen geven structuur aan je Sass-bestanden. Dat geldt ook voor kleurvariabelen. Op deze manier hoef je je kleuren slechts één keer te definiëren en weet je zeker dat je niet allerlei verschillende kleuren gebruikt. Welke naam geef je echter deze variabelen? Dat is nog niet zo eenvoudig. Je wilt een naamgeving die duidelijk, generiek en schaalbaar is. In deze blog deel ik mijn voorkeur.
Kleurnamen in je variabelen
Misschien wel de meest voordehandliggende oplossing, het gebruik van kleurnamen in je variabelen. Denk hierbij aan $red-color, $blue-color en $green-color. In de basis een prima oplossing. Het is echter ook direct de minst schaalbare oplossing.
Wat als de rode kleur in een later stadium toch oranje moet worden? De variabele naam $red-color is dan onhandig gekozen. Het zou betekenen dat je de gerelateerde declaraties in alle Sass-bestanden moet aanpassen. Om het ontwikkelproces te versnellen werken we met een eigen starter thema. Dat zou betekenen dat we bij elk project de variabelen namen en declaraties in de Sass-bestanden moeten aanpassen. Onhandig en inefficiënt.
Een betere naamgeving…
Oké, geen kleurnamen in je variabelen. Maar wat dan wel? Een beschrijvende variabele naam zou een goede oplossing kunnen zijn. Dat betekent dat je specifieke kleurvariabelen maakt voor elementen en secties in je thema. Denk hierbij aan:
$input-border-color;$body-text-color;$header-background-color;$footer-background-color;
Een mooie oplossing. Bij grote projecten resulteert dit echter gauw in een overload aan variabelen. Dit komt de beheersbaarheid en schaalbaarheid niet te goede. De kracht van variabelen gaat verloren. Gezien deze naamgeving wel erg handig is, gebruiken we het wel in onze thema’s. Daarover later meer.
Voor onze basiskleuren gebruiken we echter een andere naamgeving. Een naamgeving die niet zozeer beschrijft voor welke element de variabele bedoeld is maar wel generiek ingezet kan worden. Voorheen gebruikten we variabelen namen als $primary-color, $secondary-color en $alternative-color.
In de praktijk levert dit echter ook problemen op. Wat als je meer dan 6 verschillende kleuren hebt. Hoe noem je die dan? Het resultaat is al gauw een inconsistente naamgeving.
Keep it simple
Juist, we houden het simpel, een variabele naam waarbij elke extra kleur een opeenvolgend nummer krijgt. Voor zwart en wit maken we een uitzondering aangezien die kleuren altijd hetzelfde zullen zijn. De HEX-codes voor die kleuren zullen nooit wijzigen (#fff voor wit en #000 voor zwart).
$base-color$black-color$white-color$brand-color$brand-color-2$brand-color-3$brand-color-4- Etc.
Het grote voordeel van deze naamgeving is dat we voor elk project exact dezelfde naamgeving gebruiken. Daarnaast hoef je nooit meer na te denken over welke naam je een variabele geeft. Bij het vaker toepassen van deze naamgeving merk je al snel dat het front-end werk sneller gaat.
Kleurtinten en transparatie
Voor de kleurtinten en transparante kleuren gebruiken we ook een generieke naamgeving:
$brand-alpha-20$brand-alpha-60$brand-alpha-80$brand-2-alpha-20$brand-2-alpha-60$brand-2-alpha-80
De naamgeving is vrij eenduidig. De basis kleur inclusief een suffix met de mate van transparantie (procentueel). Voor alternatieve tinten van een basiskleur hanteren we de volgende notatie:
$black-color-100$black-color-300$black-color-600$black-color-900
In dit geval bepaald de suffix hoe donker of licht een steunkleur is. Hoe lager het getal hoe lichter de kleur. Je kan dit vergelijken met hoe het font-weight attribuut werkt. Daarnaast wordt deze notatie ook veel gebruikt bij material design. Het grote voordeel van deze naamgeving is dat het direct iets zegt over hoe donker of licht een kleur is. Als je uit gaan van deze naamgeving $light-black-color, $lighter-black-color is het bijvoorbeeld lastig inschatten hoe licht $lighter-black-color is. Als er een nieuwe kleurtint bij komt kan je die ook eenvoudig tussen het bestaande kleurenpallet plaatsen, bijv: $black-color-200.
Semantische naamgeving
Ik noemde eerder al even dat een semantische naamgeving voordelen biedt. Het is pas echt krachtig als je het combineert met de eerder genoemde naamgeving. Dat resulteert in een constructie waarbij je eerst de kleuren definieert en dit vervolgens aan specifieke elementen koppelt. Zoals:
$black-color: #000;
$black-color-100: #f9f9f9f;
$section-background-color: $black-color-100;Van design naar ontwikkeling
Onze designs maken we in Sketch. Hierbij maken we ook gebruik van ontwerpsjablonen. Dit bespaart kostbare tijd. In dit sjabloon zitten exact dezelfde kleurvariabelen verwerkt als in de WordPress template. Deze kleurvariabelen zijn verwerkt in Layer Styles (sinds Sketch 52). Dit maakt het mogelijk om met één druk op de knop de kleuren in alle pagina templates aan te passen. Het basis kleurenpallet ziet er als volgt uit:
De vertaalslag naar techniek is hierdoor een peuleschil. Een ontwikkelaar ziet in één oogopslag welke kleuren gebruikt worden en welke variabelen daar bij horen. Nog niet overtuigd van deze naamgeving?
De voordelen nogmaals op een rijtje:
- Werk razendsnel vanuit een basis template.
- Kopieer al je variabelen in één keer naar een child thema zonder wijzigingen te hoeven doen.
- Denk nooit meer na over de naamgeving van je variabelen.
- 100% schaalbaar.
- Wijzig eenvoudig je variabele namen zonder dat dit invloed heeft op de declaraties in de Sass-bestanden.
- Zie in een oogopslag welke kleuren in het thema gebruikt worden.
- Maak een super snelle vertaalslag van design naar ontwikkeling.