32. Czym są zmienne CSS i jak ich używać?

Zmienne CSS (zwane również niestandardowymi właściwościami) pozwalają na przechowywanie wartości w celu ponownego użycia w całym arkuszu stylów. Ułatwiają zarządzanie i aktualizowanie stylów.

Definiowanie zmiennych CSS: Zmienne są definiowane w sekcji :root lub w dowolnym selektorze.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

Używanie zmiennych CSS: Zmienne są używane z funkcją var().

.button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

Zalety zmiennych CSS:

1. Łatwe zarządzanie stylami: Zmienne umożliwiają centralne zarządzanie wartościami używanymi wielokrotnie w całym arkuszu stylów.
2. Dynamiczne zmiany: Zmienne mogą być dynamicznie aktualizowane za pomocą JavaScript.
3. Dziedziczenie: Zmienne mogą dziedziczyć wartości w zależności od kontekstu, w którym są używane.

Przykład aktualizacji zmiennych za pomocą JavaScript:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Zmienne CSS zwiększają elastyczność i modularność stylów, co ułatwia zarządzanie dużymi projektami.