Zmienne CSS i właściwości niestandardowe

Zmienne CSS wprowadzone w CSS3 pozwalają na przechowywanie wartości, które mogą być wielokrotnie używane w całym arkuszu stylów. Dzięki nim kod staje się bardziej elastyczny, łatwiejszy w utrzymaniu i modyfikacji. Umożliwiają tworzenie motywów kolorystycznych, ułatwiają zarządzanie jednostkami miary oraz wiele więcej.

Dlaczego zmienne CSS są ważne?

Reużywalność: Umożliwiają wielokrotne użycie tej samej wartości w różnych miejscach.
Łatwość utrzymania: Zmiana wartości zmiennej automatycznie aktualizuje wszystkie miejsca, w których jest użyta.
Dynamiczność: W połączeniu z JavaScriptem pozwalają na dynamiczne modyfikacje stylów.
Hierarchia i dziedziczenie: Zmienne mogą być zdefiniowane lokalnie lub globalnie, umożliwiając kontrolę nad zakresem ich dostępności.
Lepsza organizacja kodu: Poprawiają czytelność i strukturę arkusza stylów.

Składnia zmiennych CSS

Definiowanie zmiennych

Zmienne CSS są definiowane jako właściwości niestandardowe przy użyciu podwójnego myślnika (--) przed nazwą zmiennej.

Składnia:

selector {
  --nazwa-zmiennej: wartość;
}

Przykład:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-base: 16px;
}

:root: Selektor pseudo-klasy, który odnosi się do korzenia drzewa DOM, zwykle elementu <html>. Definiując zmienne tutaj, czynimy je globalnymi.

Używanie zmiennych

Aby użyć zmiennej, korzystamy z funkcji var().

Składnia:

property: var(--nazwa-zmiennej);

Przykład:

h1 {
  color: var(--primary-color);
  font-size: var(--font-size-base);
}

Domyślna wartość zmiennej

Funkcja var() pozwala na podanie wartości domyślnej, która zostanie użyta, jeśli zmienna nie jest zdefiniowana.

Składnia:

property: var(--nazwa-zmiennej, wartość-domyślna);

Przykład:

p {
  color: var(--text-color, #333);
}

Praktyczne zastosowania

1. Tworzenie motywu kolorystycznego

Definicja zmiennych:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --accent-color: #e74c3c;
  --background-color: #ecf0f1;
  --text-color: #2c3e50;
}

Użycie zmiennych:

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

header {
  background-color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
  color: #fff;
}

button:hover {
  background-color: var(--accent-color);
}

Wyjaśnienie:

Zdefiniowaliśmy zestaw kolorów w zmiennych, co pozwala na łatwą zmianę motywu całej strony przez modyfikację wartości zmiennych.

2. Zarządzanie jednostkami miary

Definicja zmiennej:

:root {
  --spacing-unit: 16px;
}

Użycie zmiennej:

.container {
  padding: var(--spacing-unit);
}

h1 {
  margin-bottom: calc(2 * var(--spacing-unit));
}

Wyjaśnienie:

Używamy zmiennej --spacing-unit do zarządzania odstępami w całym arkuszu stylów.
Możemy wykonywać obliczenia z użyciem calc().

3. Zmienne lokalne i dziedziczenie

Zmienne zdefiniowane wewnątrz selektora są dostępne tylko w jego zakresie i w jego dzieciach.

Przykład:

.section {
  --section-color: #9b59b6;
}

.section .title {
  color: var(--section-color);
}

.other-section .title {
  color: var(--section-color); /* Nie zadziała, bo zmienna nie jest zdefiniowana w tym zakresie */
}

Wyjaśnienie:

Zmienna --section-color jest dostępna tylko wewnątrz .section i jego dzieci.
W .other-section zmienna nie jest dostępna, chyba że zostanie tam zdefiniowana.

4. Interakcja z JavaScript

Zmienne CSS mogą być modyfikowane za pomocą JavaScriptu, co pozwala na dynamiczne zmiany stylów.

HTML:

<button id="change-theme">Zmień motyw</button>

CSS:

:root {
  --primary-color: #3498db;
}

body {
  background-color: var(--primary-color);
}

JavaScript:

document.getElementById('change-theme').addEventListener('click', () => {
  document.documentElement.style.setProperty('--primary-color', '#e74c3c');
});

Wyjaśnienie:

Po kliknięciu przycisku zmieniamy wartość zmiennej --primary-color na nowy kolor, co automatycznie aktualizuje tło strony.

Właściwości niestandardowe w praktyce

1. Animacje z użyciem zmiennych

Możemy animować zmienne CSS za pomocą JavaScriptu lub preprocesorów.

Przykład:

:root {
  --rotation-angle: 0deg;
}

.element {
  transform: rotate(var(--rotation-angle));
  transition: transform 0.5s;
}

JavaScript:

let angle = 0;
setInterval(() => {
  angle += 45;
  document.documentElement.style.setProperty('--rotation-angle', `${angle}deg`);
}, 1000);

Wyjaśnienie:

Co sekundę zwiększamy wartość zmiennej --rotation-angle, co powoduje obrót elementu.

2. Responsywność z użyciem zmiennych

Możemy modyfikować wartości zmiennych w zależności od rozmiaru ekranu.

Przykład:

:root {
  --font-size: 16px;
}

@media (min-width: 768px) {
  :root {
    --font-size: 18px;
  }
}

body {
  font-size: var(--font-size);
}

Wyjaśnienie:

Zmieniamy wartość --font-size dla większych ekranów, co automatycznie aktualizuje rozmiar czcionki na całej stronie.

Dobre praktyki

Nazewnictwo zmiennych: Stosuj czytelne i opisowe nazwy, używaj prefiksów, jeśli to konieczne (np. --color-primary).
Organizacja kodu: Grupuj definicje zmiennych w jednym miejscu, np. na początku pliku CSS lub w sekcji :root.
Unikaj nadmiernej ilości zmiennych: Używaj zmiennych tam, gdzie przynoszą one korzyści, ale nie twórz ich dla każdej wartości.
Wykorzystuj dziedziczenie: Definiuj zmienne lokalnie, jeśli są one specyficzne dla danego komponentu lub sekcji.
Komentuj kod: Dodawaj komentarze wyjaśniające przeznaczenie zmiennych, zwłaszcza jeśli są one używane w wielu miejscach.

Częste błędy i jak ich unikać

Niepoprawna składnia: Upewnij się, że nazwy zmiennych zaczynają się od dwóch myślników (--) i że używasz funkcji var() do ich odwołania.

Niepoprawnie:

color: --primary-color;

Poprawnie:

color: var(--primary-color);

Brak wartości domyślnej: Jeśli zmienna nie jest zdefiniowana, a nie podano wartości domyślnej, może to prowadzić do błędów w stylach.
Niekompatybilność przeglądarek: Zmienne CSS są obsługiwane przez większość nowoczesnych przeglądarek, ale starsze wersje mogą ich nie wspierać.

Rozwiązanie: Sprawdź kompatybilność i ewentualnie zapewnij alternatywne style lub użyj wartości domyślnych.

Nadmierne używanie zmiennych: Tworzenie zmiennych dla każdej wartości może skomplikować kod i utrudnić jego utrzymanie.
Modyfikacja zmiennych w niewłaściwym zakresie: Pamiętaj o hierarchii i dziedziczeniu zmiennych; modyfikacja zmiennej lokalnej nie wpłynie na jej wartość globalną.

Podsumowanie

W tej lekcji nauczyliśmy się:

Czym są zmienne CSS i jak je definiować oraz używać.
Praktycznych zastosowań zmiennych CSS w tworzeniu motywów, zarządzaniu jednostkami miary i interakcji z JavaScriptem.
Jak zmienne CSS mogą poprawić organizację i utrzymanie kodu poprzez reużywalność i łatwość modyfikacji.
Dobrych praktyk w stosowaniu zmiennych CSS oraz jak unikać typowych błędów.

Zmienne CSS są potężnym narzędziem, które pozwala na tworzenie bardziej elastycznych i skalowalnych arkuszy stylów. Dzięki nim możesz znacznie ułatwić sobie pracę, zwłaszcza w większych projektach.

Zadania do samodzielnego wykonania

Stwórz motyw strony z użyciem zmiennych CSS:
- Zdefiniuj zmienne dla kolorów, rozmiarów czcionek i odstępów.
- Użyj tych zmiennych w stylach różnych elementów na stronie.
- Spróbuj zmienić wartości zmiennych, aby zobaczyć, jak łatwo można zmodyfikować wygląd całej strony.
Zaprojektuj komponent z lokalnymi zmiennymi:
- Stwórz komponent (np. karta, przycisk) i zdefiniuj dla niego zmienne lokalne.
- Użyj tych zmiennych do stylizacji komponentu.
- Dodaj drugi komponent z innymi wartościami zmiennych, aby zobaczyć, jak można je dostosować niezależnie.
Eksperymentuj z interakcją z JavaScript:
- Stwórz prosty interfejs, który pozwala użytkownikowi na zmianę wartości zmiennych CSS (np. zmiana koloru tła).
- Użyj JavaScriptu do modyfikacji zmiennych i obserwuj, jak wpływa to na styl strony.

Ciekawostka

Czy wiesz, że zmienne CSS mogą być używane nie tylko do przechowywania wartości liczbowych czy kolorów, ale także do całych fragmentów kodu CSS? Możesz na przykład przechowywać gradient lub nawet cały zestaw właściwości w jednej zmiennej, co otwiera nowe możliwości w organizacji i zarządzaniu stylami.

Testy przypięte do lekcji
Aby uzyskać dostęp do testów i ćwiczeń interaktywnych - Zaloguj się

Aby widzieć ocenę lekcji - Zaloguj się

Następna lekcja: Semantyczny HTML: znaczenie dla SEO i dostępności →

← Poprzednia lekcja: Czym jest strona internetowa i jak działa?