31. März 2023

CSS-Variablen

In Programmiersprachen sind Variablen gang und gäbe. Auch in Sass gibt es Variablen. Und tatsächlich gibt es auch in CSS die Möglichkeit Variablen einzusetzen. Genau genommen heißen sie dort „custom properties“ – die dazugehörigen Funktion lautet aber „var()“…

Und so funktionieren Variablen in CSS:

Am sinnvollsten ist es CSS-Variablen am Anfang des Stylesheets zu definieren – z.B. innerhalb von „:root“ oder „body“. Praktisch ist es hier z.B. alle Farben zu definieren, die auf der Website genutzt werden. So kann man im späteren Verlauf der h1 oder einem Link einfach die Farbe „maincolor“ zuweisen. Sollte man sich im Verlauf des Gestaltungsprozesses doch noch für eine andere Farbe entscheiden, oder Teile des Stylesheets noch auf einer anderen Website einsetzen, reicht es die Farbdefinition an einer Stelle anzupassen.

Im Stylesheet sieht das dann so aus:

:root {
  --maincolor: #E27D5F;
  --secondarycolor: #3FB3A3;
}
h1 {
  color: var(--maincolor);
}
.footer{
background-color: var(--secondarycolor)
}Code-Sprache: CSS (css)