Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

CSS-variabler, även kända som anpassade egenskaper, hjälper dig att minimera upprepning i dina stilmallar. Detta i sin tur hjälper dig att spara tid och ansträngning när du gör ändringar i din design. Du kan också vara säker på att du inte missar några värden du behöver uppdatera.

Tillgång till DOM låter dig skapa variabler, lagra dem och återanvända dem i hela din stilmall.

Hur man definierar och använder CSS-variabler

För att göra dina stilmallar mer ordnade, underhållbara och återanvändbara kan du använda CSS-variabler i alla egenskaper som accepterar ett värde.

Ta följande exempel på en HTML-fil och CSS-fil som inte använder CSS-variabler.

HTML:

html>
<htmllang="en">
<huvud>
<titel>CSS-variabler - Knappvariantertitel>
<länkrel="stilmall"href="Variables.css" />
huvud>
<kropp>
<div>
<h1>CSS-variablerh1>
<div>
instagram viewer

CSS:

.btn {
stoppning: 1rem 1.5rem;
 bakgrund: transparent;
 teckensnittsvikt: 700;
 färgen röd;
}

Så här ska din sida se ut:

De .btn klass som används i stilmall ovan är inte dynamisk och gör att du skapar en separat klass för att anpassa individuella knappar. Att skapa vackra webbplatser kräver att du är dynamisk med din front-end-styling. Att implementera knappar på detta sätt kommer helt enkelt att göra den uppgiften svår att utföra.

Som de flesta programmeringsspråk måste du initiera och ersätta CSS-variabler.

För att initiera en CSS-variabel, prefix variabelnamnet med dubbla bindestreck:

:rot{
/*CSS-variabel*/
--variabelnamn: värde;
}

Du kan initiera en variabel var som helst men notera att du bara kommer att kunna använda den variabeln i den initierade väljaren. På grund av detta initieras CSS-variabler konventionellt inuti rotväljaren. Detta är inriktat på det högsta elementet i DOM och gör att variablerna är tillgängliga för hela HTML-dokumentet på en global skala.

För att ersätta variabeln i din CSS-stil använder du var() fast egendom:

:rot {
/*CSS-variabel*/
 --primär: #900c3f;
 --sekundär: #ff5733;
}
.btn {
stoppning: 1rem 1.5rem;
 bakgrund: transparent;
 teckensnittsvikt: 700;
 Färg: var(--primär);
 bakgrundsfärg: var(--sekundär);
}
.subprimär {
 Färg: var(--sekundär);
 bakgrundsfärg: var(--primär);
}

Rotväljaren innehåller två variabler: --primär och --sekundär. Båda variablerna ersätts sedan med .btn klass som färg respektive bakgrundsfärg.

Med hjälp av variablerna kan du utforma enskilda element mycket lättare. Genom att återanvända variabler kan du snabbt ändra ett värde en gång för att uppdatera det i varje instans.

De var() egenskap kan också ta ett andra argument. Detta argument fungerar som ett reservvärde för det första argumentet i en situation där det första inte är definierat eller är ogiltigt.

Till exempel:

:rot {
 --primär: #900c3f;
 --sekundär: #ff5733;
}
.btn {
stoppning: 1rem 1.5rem;
 bakgrund: transparent;
 teckensnittsvikt: 700;
 Färg: var(-primär, blå);
}

I det här exemplet, byt ut --primär variabel in i Färg stil. Om detta värde av någon anledning misslyckas, kommer stilmallen att använda det andra värdet som en reserv. Du kan också använda en annan CSS-variabel som reservvärde.

Manipulera och åsidosätta CSS-variabler med JavaScript

Att manipulera CSS-variabler med JavaScript kan vara ett kraftfullt sätt att ändra utseendet och känslan på din webbplats i farten. Med JavaScript kan du uppdatera värdena för dessa variabler och se ändringarna som återspeglas på din webbplats.

Det är viktigt att notera att ändringarna som görs med JavaScript endast kommer att gälla för den aktuella sessionen. Du måste antingen uppdatera den ursprungliga källan eller lagra det nya värdet på klienten, som i en cookie, för att bevara förändringarna.

Här är ett exempel på hur man använder JavaScript för att uppdatera värdet på en CSS-variabel.

HTML:

html>
<htmllang="en">
<huvud>
<titel>CSS-variabler - Knappvariantertitel>
<länkrel="stilmall"href="Variables.css" />
<manus>
fungeraändra färg() {
// Hämta elementet du vill ändra variabeln på
konst myElement = dokumentera.querySelector(":rot");
// Få det aktuella värdet på variabeln
låta currentValue = getComputedStyle (myElement).getPropertyValue(
"--sekundär"
 );
 // Uppsättning de nyvärdeför de variabel
mittElement.stil.setProperty("--sekundär", "#DAF7A6");
 }
manus>
huvud>
<kropp>
<div>
<h1>CSS-variablerh1>
<div>

CSS:

:rot {
 --primär: #900c3f;
 --sekundär: #ff5733;
}
.btn {
stoppning: 1rem 1.5rem;
 bakgrund: transparent;
 teckensnittsvikt: 700;
}
.subprimär {
 Färg: var(--primär);
 bakgrundsfärg: var(--sekundär);
}

I den här JavaScript-koden, ändra färg() funktionen uppdaterar färgen på den första knappen när användaren klickar på den.

Använder sig av DOM-traverseringsmetoder, kan du komma åt de klasser eller väljare som används i ditt HTML-dokument och manipulera värdena.

Innan du klickar på knappen:

Efter att ha klickat på knappen:

Du kan också använda JavaScript för att skapa nya CSS-variabler eller ta bort dem helt och hållet.

Till exempel:

// Skapa a nyvariabel
dokumentera.documentElement.style.setProperty('--ny-färg', 'blå');
// Ta bort en variabel
dokumentera.documentElement.style.removeProperty('--ny-färg');

Använda CSS-variabler med förprocessorer

Att använda variabler inom frontend-teknik uppnåddes initialt med CSS-förprocessorer som SASS, LESS och Stylus.

Syftet med CSS-förprocessorer är att utveckla kod som utökar de grundläggande funktionerna hos standard CSS. Låt sedan den koden kompileras till standard CSS för webbläsaren att förstå, ungefär som hur TypeScript fungerar med JavaScript.

Med utvecklingen av CSS-variabler är förprocessorer inte längre lika viktiga, men de kan fortfarande erbjuda viss användning om de kombineras med CSS-variabler i ditt projekt.

Du kan definiera en SASS-variabel $huvudfärg och använd den för att ställa in värdet på en CSS-variabel. Använd sedan CSS-variabeln i en vanlig stilklass.

Du kan också använda SASS-funktioner för att manipulera värdena för CSS-variabler.

Till exempel:

:rot {
 --primär: $huvudfärg;
 --sekundär: ljusare(var(--primär), 20%);
}
.btn {
 Färg: var(--primär);
 bakgrundsfärg: var(--sekundär);
}

Här är SASS-funktionen lätta() manipulerar värdet av --primär att få ett värde för --sekundär.

Observera att SASS-variabler inte är tillgängliga med JavaScript. Så om du behöver manipulera värdena på dina variabler vid körning bör du använda CSS-variabler.

Genom att använda CSS-variabler och förprocessorer tillsammans kan du dra nytta av båda fördelarna, som att använda kraftfulla förprocessorfunktioner som loopar och funktioner och CSS-variabler som CSS kaskad.

Tips för att använda CSS-variabler i webbutveckling

Här är några viktiga tips att notera som hjälper dig att använda CSS-variabler bättre.

Börja med en tydlig namnkonvention

Välj en namnkonvention för dina variabler som gör dem lätta att förstå och använda. Använd till exempel ett prefix som t.ex --Färg- för färgvariabler eller --mellanrum- för avståndsvariabler.

Använd variabler i mediefrågor för att göra det enkelt att justera din design för olika skärmstorlekar.

Dra fördel av den kaskadande naturen hos CSS

Kom ihåg att CSS-variabler är överlappande, vilket betyder att om du ställer in en variabel på ett överordnat element kommer det att påverka alla dess underordnade element.

Använd CSS-variabler med försiktighet

Att använda för många CSS-variabler kan orsaka förvirring, så använd dem med försiktighet, och bara när det är vettigt och förbättrar underhållbarheten av din kod.

Testa dina variabler

CSS-variabler är ett unikt sätt att skriva tydlig och underhållbar kod i din stilmall.

Det är viktigt att notera att de fortfarande inte stöds fullt ut i alla webbläsare. Därför bör du testa dina variabler för webbläsarkompatibilitet för att säkerställa att de fungerar som förväntat och att eventuella reservvärden fungerar som du förväntar dig.