variabler - Variables

Vad är CSS-variabler?

CSS-variabler är anpassade egenskaper som låter dig lagra stilvärden och återanvända dem i hela ditt stylesheet. Detta gör din CSS mer modulär, lättare att underhålla och återanvändbar.

Hur man använder CSS-variabler

• Deklaration av variabler:

Börja med att deklarera dina variabler med ---prefixet.

--text-color: #333;
--background-color: #fff;

• Användning av variabler:

Använd var()-funktionen för att använda dina variabler i andra stilregler.

body {
  color: var(--text-color);
  background-color: var(--background-color);
}

Exempel på CSS-variabler:

/* Deklarera variabler */
--font-family: "Helvetica", Arial, sans-serif;
--font-size: 14px;
--color-primary: #007bff;

/* Använd variabler */
body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--color-primary);
}

Fördelar med CSS-variabler:

• Modulär CSS: Håller stilvärden separerade, vilket gör CSS lättare att underhålla.
• Återanvändbarhet: Variabler kan användas i flera stilregler, vilket eliminerar duplicering.
• Enkel uppdatering: Om du behöver uppdatera ett stilvärde behöver du bara ändra variabeln, inte varje stilregel.