De meeste websites gebruiken CSS om het uiterlijk en de stijl van verschillende webpagina-componenten op te poetsen. CSS, of Cascading Style Sheet, is technisch gezien geen programmeertaal. CSS kan echter worden gebruikt met programmeertalen zoals JavaScript om responsieve en interactieve webpagina’s te maken.
Als je programmeertalen hebt gebruikt, zoals JavaScript, weet je dat je een variabele kunt declareren, er een waarde aan kunt toekennen en deze in verschillende delen van je code kunt hergebruiken. Het goede nieuws is dat je hetzelfde concept kunt toepassen in CSS.
Dit artikel definieert CSS-variabelen, beschrijft hun voordelen en laat u zien hoe u een variabele in CSS kunt declareren en gebruiken.
Wat zijn variabelen in CSS?
CSS-variabelen zijn aangepaste eigenschappen waarmee webontwikkelaars waarden kunnen opslaan die ze via de stylesheet kunnen hergebruiken. U kunt bijvoorbeeld de letterstijl, achtergrondkleur en lettergrootte aangeven die u kunt hergebruiken met elementen zoals koppen, alinea’s en div’s in uw codebase.
Waarom CSS-variabelen gebruiken? Dit zijn enkele van de redenen;
- Maakt het gemakkelijker om code bij te werken: zodra u een variabele declareert, kunt u uw hele stylesheet opnieuw gebruiken zonder elk element handmatig bij te werken.
- Vermindert herhaling: naarmate uw codebase groeit, zult u merken dat u vergelijkbare klassen en elementen hebt. In plaats van voor elk item CSS-code te schrijven, kunt u eenvoudig CSS-variabelen gebruiken.
- Maakt uw code beter onderhoudbaar: Code-onderhoud is belangrijk als u wilt dat uw bedrijf doorgaat.
- Verbetert de leesbaarheid: de moderne wereld moedigt samenwerking aan. Het gebruik van variabelen in CSS resulteert in een compacte codebase die leesbaar is.
- Eenvoudig te onderhouden consistentie: CSS-variabelen kunnen u helpen een consistente stijl te behouden naarmate uw broncode groeit of de app groter wordt. U kunt bijvoorbeeld de marges, opvulling, letterstijl en kleuren aangeven die in uw knoppen op de hele website moeten worden gebruikt.
Variabelen declareren in CSS
Aangezien u weet wat variabelen in CSS zijn en waarom u ze zou moeten gebruiken, kunnen we doorgaan en illustreren hoe u ze kunt declareren.
Om een CSS-variabele te declareren, begint u met de naam van het element en schrijft u vervolgens twee streepjes (–), de gewenste naam en waarde. De basissyntaxis is;
element {
--variable-name: value;
}
Als u bijvoorbeeld opvulling in uw hele document wilt toepassen, kunt u dit declareren als;
body {
--padding: 1rem;
}
Bereik van variabelen in CSS
CSS-variabelen kunnen lokaal worden bepaald (toegankelijk binnen een specifiek element) of globaal (toegankelijk in de hele stylesheet).
Lokale variabelen
Lokale variabelen worden toegevoegd aan specifieke selectors. U kunt ze bijvoorbeeld toevoegen aan een knop. Dit is een voorbeeld;
.button {
--button-bg-color: #33ff4e;
}
De achtergrondkleurvariabele is beschikbaar op de knopkiezer en zijn onderliggende elementen.
Globale variabelen
Eenmaal gedeclareerd, kunt u globale variabelen gebruiken met elk element in uw code. We gebruiken de :root pseudo-class om globale variabelen te declareren. Dit is hoe we ze declareren;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
}
In de bovenstaande code kunt u elk van de variabelen gebruiken die zijn gedeclareerd met verschillende elementen, zoals koppen, alinea’s, div’s of zelfs de hele body.
Variabelen gebruiken in CSS
We zullen een project maken voor demonstratiedoeleinden en index.html- en styles.css-bestanden toevoegen.
In het bestand index.html kunnen we een eenvoudige div hebben met twee koppen ( h1 en h2) en een alinea (p).
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div>
In het bestand style.css kunnen we het volgende hebben;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
--font-size: 16px;
--font-style: italic;
}
body {
background-color: var(--primary-color);
font-size: var(--font-size);
}
h1 {
color: var(--secondary-color);
font-style: var(--font-style)
}
h2 {
font-weight: var(--font-weight)
}
p {
font-size: calc(var(--font-size) * 1.2);
}
Wanneer de webpagina wordt weergegeven, hebben we het volgende;
Uit de bovenstaande code hebben we globale variabelen gedeclareerd in het :root-element. We moeten het sleutelwoord var gebruiken om de globale variabele in een van onze elementen te gebruiken. Om bijvoorbeeld de achtergrondkleur toe te passen die we hebben gedeclareerd als een globale variabele, presenteren we onze code als volgt;
achtergrondkleur: var(–primaire kleur);
Controleer alle andere elementen en u zult een trend zien in de manier waarop het var-trefwoord wordt toegepast.
Gebruik CSS-variabelen met JavaScript
We zullen lokale en globale variabelen gebruiken om te illustreren hoe CSS-variabelen met JavaScript kunnen worden gebruikt.
We kunnen een alert element toevoegen aan onze bestaande code;
Ons nieuwe index.html-document ziet er als volgt uit;
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div> <div class="alert">Click me!</div>
We kunnen onze variabele stylen. Voeg de volgende code toe aan uw bestaande CSS-code;
.alert {
--bg-color: red; /* Define local variable */
background-color: var(--bg-color); /* Use the local variable for the background color */
padding: 10px 20px;
border-radius: 4px;
font-weight: var(--font-weight); /*Use the global variable for font weight*/
width: 50px;
}
Wij hebben het volgende gedaan;
- Definieerde een lokale variabele binnen het waarschuwingselement;
–bg-kleur: rood
- Gebruik het sleutelwoord var om toegang te krijgen tot deze lokale variabele;
achtergrondkleur: var(–bg-kleur);
- Gebruikte de globale variabele die we eerder hebben gedeclareerd als ons font-weight;
lettertype-gewicht: var(–lettertype-gewicht);
JavaScript-code toevoegen
We kunnen ons waarschuwingselement responsief maken; wanneer u erop klikt, krijgt u een pop-up in uw browser die zegt; “We hebben CSS-variabelen gebruikt met JavaScript!!!!”.
We kunnen JavaScript-code rechtstreeks aan de HTML-code toevoegen door deze in te sluiten met -tags. JavaScript-code moet na HTML-code komen, maar vóór het sluiten van de
