Czym są zmienne CSS?

Czym są zmienne CSS?

Zmienne CSS (ang. CSS custom properties) to sposób na przechowywanie wartości, które możesz wielokrotnie wykorzystywać w różnych miejscach arkusza stylów. Dzięki nim możesz zdefiniować kolor, rozmiar czy margines w jednym miejscu, a potem używać tej wartości w wielu miejscach – zamiast wpisywać ją ręcznie wszędzie tam, gdzie jest potrzebna.

Jak definiujemy zmienne?

Zmienne w CSS zapisujemy wewnątrz selektora, najczęściej w :root (czyli na poziomie całego dokumentu):

:root {
  --main-color: #4caf50;
  --font-size-base: 16px;
  --spacing: 20px;
}

Każda zmienna zaczyna się od dwóch minusów (--) i ma nazwę, którą Ty wybierasz. To daje Ci pełną elastyczność.

Jak używać zmiennych?

Żeby użyć zmiennej, wystarczy wywołać ją za pomocą funkcji var():

button {
  background-color: var(--main-color);
  font-size: var(--font-size-base);
  padding: var(--spacing);
}

Efekt działania: wszystkie przyciski będą miały kolor, rozmiar czcionki i wewnętrzne odstępy pobrane z wcześniej zdefiniowanych zmiennych.

Dlaczego warto używać zmiennych CSS?

• Ułatwiają szybkie wprowadzanie zmian w projekcie – np. zmiana koloru w jednym miejscu zmienia go wszędzie.
• Sprawiają, że kod jest bardziej przejrzysty i logiczny.
• Świetnie nadają się do tworzenia motywów (np. jasny/ciemny).

Domyślna wartość zmiennej

Możesz ustawić tzw. wartość zapasową na wypadek, gdyby zmienna nie była zdefiniowana:

color: var(--text-color, #000);

Efekt działania: jeśli --text-color nie istnieje, użyty zostanie czarny kolor (#000).

Ćwiczenie – zmienne kolorystyczne i rozmiary

W JSFiddle zdefiniuj zmienne w :root i użyj ich w stylach przycisku i nagłówka:

• --primary-color: np. niebieski,
• --text-color: np. ciemny szary,
• --padding: np. 12px.

👉 Przetestuj w JSFiddle

<style>
:root {
  --primary-color: #2196f3;
  --text-color: #333;
  --padding: 12px;
}

h2 {
  color: var(--primary-color);
}

button {
  background: var(--primary-color);
  color: white;
  padding: var(--padding);
  border: none;
  font-weight: bold;
}
</style>

<h2>Witaj na stronie</h2>
<button>Kliknij mnie</button>

Spróbuj zmienić wartości zmiennych w :root i zobacz, jak cała strona zmienia wygląd. To właśnie siła zmiennych CSS!