Publicatie: 23 augustus 2024
CSS variabelen gebruiken
BeVries.nl gebruikt voor elke game recensie dezelfde opbouw, maar verschillende kleuren. Een enorm klus om steeds handmatig aan te passen... Tenzij je CSS variabelen gebruikt.
Hierdoor kun je snel op één plek in je stylesheet kleuren definiëren die door de hele stylesheet gebruikt kunnen worden. Nieuwe kleuren nodig? Pas enkel op deze ene plek de kleuren aan, en je bent klaar!
Variabelen definiëren
Bepaal de plek in je stylesheet waar je de kleuren wilt bepalen.
Heb je een font gevonden en gedownload? Zet 'm op een plekje waar je website bij kan. Vervolgens kun je in je CSS stylesheel de font toevoegen.
:root {
--basis: #D7F9F8;
--gradient: 252, 172, 0;
--quote: red;
--tekst-achtergrond: #070707;
--tekst: #000;
}
- Je begint met :root. Dit zorgt ervoor dat je de variabelen overal in je stylesheet kunt gebruiken
- Je geeft een variabele een naam die MOET beginnen met --, let op dat dit hoofdlettergevoelig is
- Je ziet hier vijf variabelen voor kleuren is verschillende soorten. Je kunt een kleur opslaag als Hex (zoals --basis), als RGB (zoals --gradient), als naam (zoals --quote) en verkorte Hex (zoals --tekst)
Gebruik in CSS
Een voorbeeld van hoe het op deze site wordt toegepast, in de style.css stylesheet:
#mainContent a:link {
color: var(--basis);
text-decoration: none;
}
In de div met id 'mainContent' krijgen alle links de kleur '--basis'.
- De manier van invoegen van de kleur is elke keer gelijk, welke soort kleur (Hex, RGB, naam, etc.) je ook hebt gedefiniëerd. Het is elke keer var(--variabele)
- Dit werkt ook bij rgb(a) kleuren. Het invoeren lijkt in eerste instantie wat vreemd, maar werkt hetzelfde als alle andere soorten: rgba(var(--gradient), 0.4)
Dat is alles! Het gebruik van variabelen is niet ingewikkeld, kan je heel veel tijd besparen, en maakt de kans op kleine slordigheidjes bij handmatig invullen een heel stuk kleiner.
In dit artikel gaat het om kleuren, maar je kunt variabelen ook voor andere doeleinden gebruiken. Lees meer op de site van CSS-Tricks.