Użycie zmiennych CSS (custom properties)

Zmiennych CSS (custom properties) możesz używać do definiowania wartości, które będą dostępne w całym dokumencie lub w wybranym zakresie. Dzięki nim łatwo zmienisz kolory, rozmiary i inne właściwości w jednym miejscu – co ułatwia późniejszą edycję i utrzymanie spójności wyglądu strony.

Definiowanie i używanie zmiennych

Aby zdefiniować zmienną w CSS, należy użyć prefiksu -- przed jej nazwą. Zazwyczaj definiuje się je wewnątrz selektora :root, aby były dostępne globalnie w całym dokumencie. Następnie pobiera się ją za pomocą funkcji var().

Wyjaśnienie

• :root - najwyższy poziom w hierarchii CSS (odpowiednik elementu html).
• --main-color - nazwa zdefiniowanej zmiennej.
• var(--main-color) - sposób pobrania zmiennej w innym miejscu.

Dzięki temu, jeśli zdecydujesz się zmienić kolor przewodni lub bazowy rozmiar czcionki, wystarczy edytować go w jednym miejscu w :root.

:root {
  --main-color: #4caf50;
  --font-size-base: 16px;
  --padding-default: 10px;
}

body {
  font-size: var(--font-size-base);
  color: var(--main-color);
  padding: var(--padding-default);
}

Nadpisywanie zmiennych w zasięgu

Custom properties mogą być także nadpisywane w mniejszych zakresach. Wystarczy zdefiniować nową wartość w obrębie wybranego selektora.

W poniższym przykładzie: .container korzysta z nowego koloru (pomarańczowego), ale wciąż używa globalnie zdefiniowanego --padding-default.

.container {
  --main-color: #ff5722; /* tutaj nadpisujemy wartość w obrębie .container */
  color: var(--main-color);
  padding: var(--padding-default); /* wciąż korzystamy z globalnego padingu */
}

Zmienne CSS w praktyce

• Tematy kolorystyczne - Użycie zmiennych do definiowania palety kolorów (np. --primary, --secondary, --background) ułatwia szybkie zmiany w motywie strony.
• Responsywność - Możesz dostosowywać wartości zmiennych w media queries, np. zwiększając rozmiar czcionki na większych ekranach.
• Animacje i dynamiczne zmiany - W połączeniu z JavaScript możesz manipulować zmiennymi, aby dynamicznie zmieniać wygląd elementów, co jest przydatne np. w trybach jasny/ciemny (dark mode).

Przykłady użycia

Jako przykład użycia przedstawiam projekt, który pozwala jednym kliknięciem na przełączanie między jasnym i ciemnym motywem strony

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

Zmienne CSS to przydatne narzędzie, które pozwala na centralne zarządzanie wartościami w arkuszu stylów. Dzięki nim unikniesz powtarzania tych samych kolorów lub rozmiarów w wielu miejscach i szybko dostosujesz kluczowe elementy stylu, takie jak kolory, rozmiary czcionek czy marginesy. Używanie custom properties poprawia czytelność kodu i ułatwia utrzymanie spójnego wyglądu w całym projekcie.