Startseite Skripte für das Wintersemester 2018/19 Webdesign Positionieren, Media Queries, CSS-Variablen CSS-Variablen

CSS-Variablen

Don’t repeat yourself (DRY, englisch für „wiederhole dich nicht“; auch bekannt als once and only once „einmal und nur einmal“) ist ein Prinzip, das besagt, Redundanz zu vermeiden oder zumindest zu reduzieren.

Wikipedia

Variablen helfen – auch bei CSS – den Code übersichtlich zu halten und Redundanzen zu vermeiden! Ihr Einsatz in CSS ist relativ neu…

Schaut Euch dazu auch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

CSS

:root {
  --header-footer-HG: rgba(0, 0, 0, 0.8); /* HG-Farbe von Header und Footer */
  --cd-color: rgba(255, 130, 50, 0.9); /* Corporate Design Farbe */
  --ueberschriften-strickstaerke: 400; /* Strichstärke typischer Überschriften */
  --article-HG: rgba(0, 0, 0, 0.05); /* HG-Farbe der Artikel */
}

a:link {
  text-decoration: none;
  color: var(--cd-color);
}

article {
  background-color: var(--article-HG);
}

h1 {
  background: var(--header-footer-HG);
  font-weight: var(--ueberschriften-strickstaerke);
}

h2 {
  font-weight: var(--ueberschriften-strickstaerke);
  color: var(--cd-color);
}

footer {
  background: var(--header-footer-HG);
}

CodePen

See the Pen css-variablen by Matthias Edler-Golla (@megolla) on CodePen.

Online-Tutorial

Zu den CSS-Variablen gibt es ein kostenloses Tutorial, das noch deutlich tiefer auf die neuen Möglichkeiten von Variablen in CSS eingeht!

→ Begriff suchen