De flesta webbplatser använder CSS för att polera sitt utseende och utforma olika webbsidors komponenter. CSS, eller Cascading Style Sheet, är inte tekniskt sett ett programmeringsspråk. CSS kan dock användas med programmeringsspråk som JavaScript för att skapa responsiva och interaktiva webbsidor.
Om du har använt programmeringsspråk, som JavaScript, vet du att du kan deklarera en variabel, tilldela den ett värde och återanvända den i olika delar av din kod. Den goda nyheten är att du kan tillämpa samma koncept i CSS.
Den här artikeln kommer att definiera CSS-variabler, beskriva deras fördelar och visa dig hur du deklarerar och använder en variabel i CSS.
Innehållsförteckning
Vad är variabler i CSS?
CSS-variabler är anpassade egenskaper som gör att webbutvecklare kan lagra värden som de kan återanvända genom stilmallen. Till exempel kan du deklarera teckensnittsstil, bakgrundsfärg och teckenstorlek som du kan återanvända med element som rubriker, stycken och div i din kodbas.
Varför använda CSS-variabler? Det här är några av anledningarna;
- Gör det enklare att uppdatera koden: När du väl har deklarerat en variabel kan du återanvända hela din stilmall utan att uppdatera varje element manuellt.
- Minskar upprepning: När din kodbas växer kommer du att upptäcka att du har liknande klasser och element. Istället för att skriva CSS-kod för varje objekt kan du helt enkelt använda CSS-variabler.
- Gör din kod mer underhållsbar: Kodunderhåll är viktigt om du vill att ditt företag ska fortsätta.
- Förbättrar läsbarheten: Den moderna världen uppmuntrar till samarbete. Att använda variabler i CSS resulterar i en kompakt kodbas som är läsbar.
- Lätt att upprätthålla konsistens: CSS-variabler kan hjälpa dig att behålla en konsekvent stil när din källkod växer eller appstorleken ökar. Du kan till exempel deklarera marginaler, stoppning, teckensnitt och färger som ska användas i dina knappar på hela webbplatsen.
Hur man deklarerar variabler i CSS
Eftersom du vet förstår vad variabler i CSS är och varför du bör använda dem, kan vi gå vidare och illustrera hur man deklarerar dem.
För att deklarera en CSS-variabel, börja med elementets namn och skriv sedan två bindestreck (–), önskat namn och värde. Grundsyntaxen är;
element {
--variable-name: value;
}
Om du till exempel vill använda utfyllnad i hela dokumentet kan du deklarera det som;
body {
--padding: 1rem;
}
Omfattning av variabler i CSS
CSS-variabler kan omfångas lokalt (tillgängliga inom ett specifikt element) eller globalt (tillgängliga i hela stilmallen).
Lokala variabler
Lokala variabler läggs till specifika väljare. Du kan till exempel lägga till dem på en knapp. Detta är ett exempel;
.button {
--button-bg-color: #33ff4e;
}
Bakgrundsfärgsvariabeln är tillgänglig på knappväljaren och dess underordnade.
Globala variabler
När de har deklarerats kan du använda globala variabler med vilket element som helst i din kod. Vi använder pseudoklassen :root för att deklarera globala variabler. Så här förklarar vi dem;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
}
I ovanstående kod kan du använda vilken som helst av variablerna som deklareras med olika element, såsom rubriker, stycken, div eller till och med hela kroppen.
Hur man använder variabler i CSS
Vi ska skapa ett projekt i demonstrationssyfte och lägga till filerna index.html och styles.css.
I filen index.html kan vi ha en enkel div med två rubriker ( h1 och h2) och ett stycke (p).
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div>
I filen style.css kan vi ha följande;
: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);
}
När webbsidan är renderad kommer vi att ha följande;
Från koden ovan har vi deklarerat globala variabler i elementet :root. Vi måste använda nyckelordet var för att använda den globala variabeln i något av våra element. För att till exempel använda bakgrundsfärgen som vi deklarerade som en global variabel presenterar vi vår kod enligt följande;
bakgrundsfärg: var(–primärfärg);
Kontrollera alla andra element och du kommer att notera en trend i hur nyckelordet var tillämpas.
Använd CSS-variabler med JavaScript
Vi kommer att använda lokala och globala variabler för att illustrera hur man använder CSS-variabler med JavaScript.
Vi kan lägga till ett varningselement till vår befintliga kod;
Vårt nya index.html dokument kommer att se ut som följer;
<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>
Vi kan styla vår variabel. Lägg till följande kod till din befintliga CSS-kod;
.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;
}
Vi har gjort följande;
- Definierat en lokal variabel inuti varningselementet;
–bg-färg: röd
- Använde nyckelordet var för att komma åt denna lokala variabel;
bakgrundsfärg: var(–bg-färg);
- Använde den globala variabeln vi deklarerade tidigare som vår teckensnittsvikt;
font-weight: var(–font-weight);
Lägg till JavaScript-kod
Vi kan göra vårt varningselement lyhört; när du klickar på den får du ett popup-fönster i din webbläsare som säger; ”Vi har använt CSS-variabler med JavaScript!!!!”.
Vi kan lägga till JavaScript-kod direkt till HTML-koden genom att omsluta den med -taggar. JavaScript-koden ska komma efter HTML-koden, men innan du stänger taggen
