Lekcja 13 – CSS Variables (Custom Properties)

CSS Variables, znane także jako Custom Properties, to jedna z najbardziej przydatnych nowości w CSS, która pozwala na definiowanie wartości, które można wielokrotnie używać w całym arkuszu stylów. Dzięki zmiennym CSS możesz uprościć zarządzanie stylem, a także dynamicznie zmieniać wartości, co jest szczególnie przydatne w większych projektach.

Co to są zmienne w CSS?

Zmienna w CSS pozwala na zapisanie wartości, którą możesz używać wielokrotnie. Na przykład, jeśli masz kilka elementów o tym samym kolorze tła, możesz zdefiniować ten kolor raz jako zmienną i odwoływać się do niej w wielu miejscach.

Podstawowy przykład zmiennej CSS:

:root {
  --main-color: #3498db;
  --padding-size: 20px;
}

body {
  background-color: var(--main-color);
  padding: var(--padding-size);
}

W tym przykładzie:

  • Zmienna --main-color przechowuje wartość koloru #3498db, którą można wielokrotnie używać w różnych miejscach w stylach.
  • Zmienna --padding-size przechowuje wartość odstępu, którą również można używać w różnych miejscach.
  • Funkcja var() służy do odwołania się do wartości zmiennej.

Jak definiować zmienne w CSS?

Zmienna CSS jest poprzedzona dwoma myślnikami -- i może być zdefiniowana na poziomie dowolnego selektora. Najczęściej zmienne są definiowane w selektorze :root, co oznacza, że będą dostępne globalnie w całym dokumencie.

Przykład definiowania zmiennych globalnych:

:root {
  --primary-color: #f39c12;
  --secondary-color: #8e44ad;
  --font-size: 16px;
  --border-radius: 5px;
}

Używanie zmiennych w różnych kontekstach

Zmiennych można używać do definiowania wielu różnych właściwości, takich jak kolory, czcionki, marginesy, odstępy, itp. Możesz je także nadpisywać w określonym zakresie, np. dla konkretnego elementu.

Przykład: Używanie zmiennych w stylach:

:root {
  --button-color: #e74c3c;
  --button-padding: 10px;
}

button {
  background-color: var(--button-color);
  padding: var(--button-padding);
  font-size: var(--font-size, 16px); /* Domyślna wartość 16px */
}

W tym przykładzie:

  • var(--button-color) ustawia kolor tła przycisku.
  • var(--button-padding) ustawia odstęp wewnętrzny dla przycisku.
  • Możesz także ustawić domyślną wartość, jeśli zmienna nie jest zdefiniowana, używając drugiego argumentu, jak w przypadku font-size.

Zakres zmiennych

Zmienna CSS zdefiniowana w selektorze :root jest dostępna globalnie. Możesz jednak zdefiniować zmienne lokalne dla konkretnych elementów, co pozwala na ich nadpisywanie w określonych miejscach.

Przykład: Nadpisywanie zmiennych lokalnie:

:root {
  --text-color: black;
}

p {
  color: var(--text-color);
}

.special-paragraph {
  --text-color: red; /* Nadpisanie zmiennej lokalnie */
  color: var(--text-color);
}

W tym przykładzie paragrafy domyślnie mają kolor czarny, ale paragraf o klasie .special-paragraph będzie miał czerwony tekst, ponieważ zmienna została lokalnie nadpisana.

Dynamika i interaktywność z JavaScript

Jedną z największych zalet zmiennych CSS jest możliwość ich dynamicznej zmiany za pomocą JavaScriptu, co otwiera drogę do tworzenia bardziej interaktywnych stron internetowych.

Przykład: Zmiana wartości zmiennej za pomocą JavaScript:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamiczne zmienne CSS</title>
  <style>
    :root {
      --background-color: #3498db;
    }
    body {
      background-color: var(--background-color);
      transition: background-color 0.3s;
    }
  </style>
</head>
<body>

  <button onclick="changeColor('#e74c3c')">Zmień kolor tła</button>

  <script>
    function changeColor(newColor) {
      document.documentElement.style.setProperty('--background-color', newColor);
    }
  </script>

</body>
</html>

W tym przykładzie zmieniamy wartość zmiennej --background-color za pomocą JavaScript, co dynamicznie zmienia kolor tła strony.

Praktyczne zastosowanie zmiennych CSS

Zmiennych CSS możesz używać do wielu celów, takich jak:

  • Definiowanie kolorów dla różnych trybów (np. jasny i ciemny tryb).
  • Uproszczenie zarządzania stylem w dużych projektach.
  • Zarządzanie jednostkami, takimi jak marginesy, odstępy, rozmiary czcionek itp.

Przykład: Zmienne do definiowania trybu ciemnego i jasnego:

:root {
  --bg-color: white;
  --text-color: black;
}

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

.dark-mode {
  --bg-color: black;
  --text-color: white;
}

W tym przykładzie, po dodaniu klasy .dark-mode do elementu body, zmienne zostaną nadpisane, a strona zmieni swój wygląd na tryb ciemny.

Ćwiczenie: Tworzenie motywu kolorystycznego strony za pomocą zmiennych CSS

Zadanie: Stwórz stronę, która pozwala użytkownikowi zmieniać kolor motywu (tła i tekstu) za pomocą przycisków, korzystając ze zmiennych CSS i JavaScript.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zmienny motyw</title>
  <style>
    :root {
      --bg-color: white;
      --text-color: black;
    }
    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: Arial, sans-serif;
      padding: 20px;
      transition: background-color 0.3s, color 0.3s;
    }
    button {
      margin: 5px;
      padding: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1>Zmienny motyw strony</h1>
  <button onclick="changeTheme('white', 'black')">Jasny motyw</button>
  <button onclick="changeTheme('black', 'white')">Ciemny motyw</button>
  <button onclick="changeTheme('#3498db', '#ffffff')">Niebieski motyw</button>

  <script>
    function changeTheme(bgColor, textColor) {
      document.documentElement.style.setProperty('--bg-color', bgColor);
      document.documentElement.style.setProperty('--text-color', textColor);
    }
  </script>

</body>
</html>

Gratulacje! Ukończyłeś ostatnią lekcję 13.
Mamy dla Ciebie małą ściągę czyli spis wszystkich tagów i właściwości CSS:
– Spis tagów HTML
– Spis Właściwości CSS

Jeśli znajdziesz chwilę to podziel się swoja opinią o kursie w komentarzu w tym wpisie.


Spis Treści - darmowy kurs HTML i CSS

Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS

Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)

Dodatki: 
- Spis tagów HTML
- Spis Właściwości CSS

Jeśli chciałbyś być poinformowany o następnych kursach to zapisz się do naszego newslettera: