Zmienne CSS — CSS

Własne właściwości CSS pomagają utrzymać wspólną kolorystykę.

Jak to działa?

Zmienne zapisujesz jako --nazwa, a odczytujesz przez var(--nazwa). Najczęściej definiuje się je na :root.

Przykład 1 — poznaj zapis

:root {
  --accent: #315cf5;
  --surface: #f7f9fc;
}

.card {
  background: var(--surface);
  border-color: var(--accent);
}

Zmiana jednej zmiennej może zmienić wygląd wielu elementów.

Przeczytaj kod linijka po linijce

:root {Wybieramy elementy, które mają otrzymać podane style.
--accent: #315cf5;Przypisujemy wartość wybranej właściwości CSS.
--surface: #f7f9fc;Przypisujemy wartość wybranej właściwości CSS.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Właściwości CSS pobierają wartości z custom properties.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

:root { --space: 1rem; } .card { padding: var(--space); }

Wynik drugiego przykładupo uruchomieniu przykładu

Karta używa odstępu zdefiniowanego w jednym miejscu.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Zdefiniuj własną zmienną dla odstępów.