Variabler

I min webbplats har jag valt ett färgschema som baseras på att bestämt antal färger. Dessa kan vara lämpligt att definiera i din CSS-kod som variabler.

Variabler i CSS

I CSS kan vi definiera variabler som en del av :root elementet.

:root {
  --color-bg-dark: #0d1b2a;        /* Mörk bakgrund */
  --color-border: #1e5aa8;         /* Accentkant */
  --color-text-light: #a9d6e5;     /* Ljus text */
  --color-text-hover: #61a5c2;     /* Hover-färg */

  --color-footer-bg: #1b263b;      /* Bakgrund för footer */
  --color-footer-column: #24344d;  /* Kolumnbakgrund */
  --color-footer-border: #1e5aa8;  /* Kantlinje */
  --color-footer-bottom: #33415c;  /* Bottenlinje */
}

Ovan ser du färgschemat för min webbplats, så här långt in i övningen. Jag har alltså valt ett antal färger som jag vill använda till olika delar av min webbpalts, dessa färger blir alltså mitt färgschema. Fördelen är att jag kan definiera färgen på en plats och sedan kan jag använda den på flera platser.

Så här ser det ut när jag använder en färg.

.row.color1 {
  background-color: var(--color-text-light);
}

.row.color2 {
  background-color: var(--color-bg-dark);
}

Om man är petnoga så kanske jag inte har valt rätt variabelnamn på mina färger. Här använder jag -color-text-light som en bakgrundsfärg. Det är inget problem i sig, men den som läser min CSS-kod kan ha synpunkter på min namngivning av variablerna. Kanske du kan göra bättre namngivning än den jag har gjort.

Sagt om CSS variabler.

CSS-variabler är ett sätt att definiera färger, mått eller andra värden på ett ställe och sedan återanvända dem flera gånger i stilen. Man deklarerar dem med två bindestreck, till exempel --main-color: #1e5aa8;, vanligtvis i :root för att de ska gälla globalt. Sedan kan man använda värdet med var(--main-color) istället för att skriva färgen direkt. Det gör det enklare att ändra designen senare, eftersom man bara behöver uppdatera variabeln på ett ställe, och det hjälper också att hålla koden mer konsekvent och lättläst.

Uppdatera din CSS så att du använder variabler till ditt färgschema. Då får gärna använda variabler till fler saker som du känner passande. Rätt använt så förenklar variabler din stylesheet och gör att den blir enklare att anpassa.