CSS Stylesheet Variablen

Question

Wie kann ich eine Variable in CSS in mehreren Elementen verwenden?

.test1 {
    --var1: red;
    background-color: var(--var1);
}

.test2 {
    background-color: var(--var1);
}

In test2 funktioniert die Variable nicht.

Answer 1

CSS Variablen sind auf das Element beschränkt, in dem sie definiert werden, oder auf das Wurzelelement (:root). Das bedeutet, wenn du eine Variable innerhalb eines bestimmten Selektors definierst, ist sie in anderen Selektoren nicht verfügbar. Um die Variable in verschiedenen Elementen verfügbar zu machen, solltest du die Variable in einem gemeinsamen Gültigkeitsbereich definieren.

:root {
  --var1: red;
}

.test1 {
  background-color: var(--var1);
}

.test2 {
  background-color: var(--var1);
}