Większość stron internetowych wykorzystuje CSS, aby udoskonalić wygląd i styl poszczególnych elementów. CSS, czyli Kaskadowe Arkusze Stylów, formalnie nie są językiem programowania. Mimo to, CSS można z powodzeniem stosować w połączeniu z językami programowania, takimi jak JavaScript, co pozwala na tworzenie responsywnych i interaktywnych stron.
Osoby, które miały styczność z językami programowania, takimi jak JavaScript, wiedzą, że można zadeklarować zmienną, przypisać jej konkretną wartość, a następnie wykorzystywać ją w różnych częściach kodu. Dobra wiadomość jest taka, że to samo podejście można zastosować w CSS.
W niniejszym artykule przyjrzymy się bliżej zmiennym CSS, omówimy ich zalety oraz pokażemy, jak definiować i używać zmiennych w arkuszach stylów.
Czym są zmienne w CSS?
Zmienne CSS to właściwości zdefiniowane przez użytkownika, które pozwalają webmasterom na przechowywanie wartości i wielokrotne wykorzystywanie ich w obrębie arkusza stylów. Przykładowo, można zdefiniować styl czcionki, kolor tła czy rozmiar tekstu, a następnie używać tych ustawień w różnych elementach, takich jak nagłówki, akapity czy bloki div w kodzie strony.
Jakie korzyści niesie za sobą używanie zmiennych CSS? Oto kilka istotnych powodów:
- Łatwiejsza aktualizacja kodu: Po zdefiniowaniu zmiennej można ją używać w całym arkuszu stylów, co eliminuje konieczność ręcznej zmiany każdego elementu.
- Redukcja powtórzeń: W miarę rozrastania się projektu, często pojawiają się elementy i klasy o podobnych stylach. Zamiast pisać kod CSS dla każdego z nich osobno, można wykorzystać zmienne CSS.
- Uproszczona konserwacja kodu: Utrzymanie porządku w kodzie jest kluczowe dla sprawnego działania aplikacji.
- Poprawa czytelności: Współczesne projekty często tworzone są zespołowo. Zmienne CSS sprawiają, że kod staje się bardziej przejrzysty i łatwiejszy do zrozumienia.
- Spójność stylu: Zmienne CSS pomagają w utrzymaniu jednolitego stylu wizualnego w miarę rozwoju projektu. Można na przykład zdefiniować marginesy, wypełnienia, style czcionek i kolory używane w przyciskach na całej stronie.
Jak deklarować zmienne w CSS
Skoro już wiemy, czym są zmienne CSS i dlaczego warto ich używać, przejdźmy do praktycznej demonstracji, jak je deklarować.
Aby utworzyć zmienną CSS, należy zacząć od selektora elementu, a następnie wpisać dwa myślniki (–), nazwę zmiennej i przypisaną jej wartość. Podstawowa składnia wygląda następująco:
element { --nazwa-zmiennej: wartość; }
Na przykład, aby zdefiniować wypełnienie dla całego dokumentu, można to zrobić tak:
body { --wypełnienie: 1rem; }
Zasięg zmiennych w CSS
Zmienne CSS mogą mieć zasięg lokalny (dostępne tylko w obrębie konkretnego elementu) lub globalny (dostępne w całym arkuszu stylów).
Zmienne lokalne
Zmienne lokalne przypisywane są do określonych selektorów. Można na przykład dodać je do przycisku. Oto przykład:
.przycisk { --kolor-tła-przycisku: #33ff4e; }
Zmienna koloru tła jest dostępna w selektorze przycisku oraz w jego elementach potomnych.
Zmienne globalne
Zmienne globalne, po zadeklarowaniu, mogą być wykorzystywane w dowolnym miejscu kodu. Do definiowania zmiennych globalnych używamy pseudoklasy :root. Tak wygląda deklaracja:
:root { --kolor-podstawowy: szary; --kolor-drugorzędny: pomarańczowy; --grubość-czcionki: 700; }
W powyższym kodzie każda zmienna może być użyta w różnych elementach, takich jak nagłówki, akapity, bloki div, a nawet w całym ciele dokumentu.
Jak używać zmiennych w CSS
Stwórzmy przykładowy projekt. Utwórzmy pliki index.html i styles.css.
W pliku index.html umieścimy prosty blok div zawierający dwa nagłówki (h1 i h2) oraz akapit (p).
<div> <h1>Witaj Front-end Dev!!!!</h1> <h2>Tak używa się zmiennych w CSS.</h2> <p>Przewiń w dół</p> </div>
W pliku style.css umieścimy następujące style:
:root { --kolor-podstawowy: szary; --kolor-drugorzędny: pomarańczowy; --grubość-czcionki: 700; --rozmiar-czcionki: 16px; --styl-czcionki: italic; } body { background-color: var(--kolor-podstawowy); font-size: var(--rozmiar-czcionki); } h1 { color: var(--kolor-drugorzędny); font-style: var(--styl-czcionki) } h2 { font-weight: var(--grubość-czcionki) } p { font-size: calc(var(--rozmiar-czcionki) * 1.2); }
Po wyrenderowaniu strony internetowej, otrzymamy następujący efekt:
W powyższym kodzie, zmienne globalne zadeklarowaliśmy w selektorze :root. Aby skorzystać ze zmiennej globalnej, w dowolnym elemencie musimy użyć słowa kluczowego var. Na przykład, żeby zastosować kolor tła zdefiniowany jako zmienną globalną, używamy kodu:
background-color: var(–kolor-podstawowy);
W pozostałych elementach również widać schemat wykorzystania słowa kluczowego var.
Użyj zmiennych CSS z JavaScriptem
Użyjemy zmiennych lokalnych i globalnych, aby zademonstrować, jak stosować zmienne CSS w połączeniu z JavaScriptem.
Do naszego istniejącego kodu dodamy element alertu:
Nasz nowy plik index.html będzie wyglądał następująco:
<div> <h1>Witaj Front-end Dev!!!!</h1> <h2>Tak używa się zmiennych w CSS.</h2> <p>Przewiń w dół</p> </div> <div class="alert">Kliknij mnie!</div>
Możemy nadać styl naszej zmiennej. Dodajmy następujący kod do istniejącego kodu CSS:
.alert { --kolor-tła: red; /* Zdefiniuj zmienną lokalną */ background-color: var(--kolor-tła); /* Użyj zmiennej lokalnej dla koloru tła */ padding: 10px 20px; border-radius: 4px; font-weight: var(--grubość-czcionki); /* Użyj zmiennej globalnej dla grubości czcionki */ width: 50px; }
Wykonaliśmy następujące czynności:
- Zdefiniowaliśmy zmienną lokalną wewnątrz elementu alertu:
–kolor-tła: czerwony
- Użyliśmy słowa kluczowego var, aby uzyskać dostęp do tej zmiennej lokalnej:
background-color: var(–kolor-tła);
- Wykorzystaliśmy zmienną globalną, którą zadeklarowaliśmy wcześniej jako grubość czcionki:
font-weight: var(–grubość-czcionki);
Dodaj kod JavaScript
Możemy sprawić, aby nasz element alertu stał się responsywny. Gdy go klikniesz, pojawi się okienko w przeglądarce z komunikatem „Użyliśmy zmiennych CSS z JavaScript!!!!”.
Możemy dodać kod JavaScript bezpośrednio do kodu HTML, umieszczając go w tagach . Kod JavaScript powinien znajdować się po kodzie HTML, ale przed zamknięciem tagu <body>.
Dodajmy ten kod:
<script> const alertDiv = document.querySelector('.alert'); alertDiv.addEventListener('click', function() { window.alert("Użyliśmy zmiennych CSS z JavaScript!!!!"); }); </script>
Twój kod HTML powinien teraz wyglądać mniej więcej tak:
Nasz JavaScript wykonuje następujące czynności:
- Używa metody document.querySelector(), aby zlokalizować element alertu.
- Przypisuje element alertu do zmiennej alertDiv.
- Wykorzystuje metodę addEventListener() na alertDiv, aby dodać obsługę zdarzenia „click”.
- Używa metody window.alert(), aby wyświetlić komunikat w przypadku wystąpienia zdarzenia kliknięcia.
Gdy strona zostanie wyrenderowana, otrzymamy następujące elementy:
Po kliknięciu elementu alert, zobaczymy następujący komunikat:
Wartości zastępcze w zmiennych CSS
Co się stanie, gdy odwołamy się do zmiennej, która nie jest zdefiniowana w arkuszu stylów? W takim przypadku, efekt CSS, który chcemy zastosować, nie zadziała. Wartości zastępcze (ang. fallback values) oferują alternatywną wartość, która zostanie użyta, jeśli zmienna nie jest dostępna.
Wartości zastępcze są przydatne z następujących powodów:
- Jeśli niektóre przeglądarki nie obsługują zmiennych CSS, właściwość elementu może mieć alternatywną wartość.
- W przypadku podejrzenia, że strona nie działa poprawnie z powodu nieprawidłowej zmiennej CSS, wartość zastępcza pozwala na sprawdzenie, czy to jest przyczyną problemu.
Można zdefiniować więcej niż jedną właściwość zastępczą, oddzielając je przecinkami. Na przykład, przeanalizujmy ten kod:
:root { --kolor-podstawowy: #007bff; } .przycisk { background-color: var(--kolor-podstawowy, red, yellow); padding: 10px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; }
Jeśli popełnimy błąd w nazwie zmiennej –kolor-podstawowy i użyjemy jej niepoprawnie (czyli będzie niezadeklarowana), to zostanie użyta pierwsza z wartości zastępczych – czerwony.
Możemy to zademonstrować jeszcze lepiej za pomocą poniższego kodu:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dokument</title> <style> :root { --kolor-podstawowy: #007bff; } .przycisk { background-color: var(--kolor-podstawowy, red); padding: 10px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } </style> </head> <body> <button class="przycisk">Kliknij mnie!</button> </body> </html>
Po wyrenderowaniu w przeglądarce, otrzymamy taki efekt:
Możemy jednak zmodyfikować ten sam kod, zmieniając tylko jeden znak w selektorze przycisku:
.przycisk { background-color: var(--kolor-podstawowyy, red); /* Literówka w nazwie zmiennej */ padding: 10px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; }
W takiej sytuacji, przeglądarka wyrenderuje to:
Używaj zmiennych wartości dynamicznych i wartości obliczonych w CSS
Wartości dynamiczne aktualizują się automatycznie w odpowiedzi na określone zdarzenia lub warunki, takie jak dane wprowadzone przez użytkownika.
Przeanalizujmy ten kod:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Zmienne CSS z JavaScriptem</title> <style> :root { --color: #333; } #kolor-input { margin-left: 1em; } #kolor-input { --color: var(--color-input); } </style> </head> <body> <label for="color-input">Wybierz kolor:</label> <input type="color" id="color-input"> </body> </html>
Powyższy kod wykonuje następujące czynności:
- Deklarujemy zmienną –color z domyślną wartością #333, używając selektora :root.
- Wykorzystujemy #kolor-input, aby wybrać element wejściowy.
- Wartość –color jest ustawiona na var(–color-input), co oznacza, że kolor aktualizuje się za każdym razem, gdy użytkownik wybierze nowy kolor za pomocą selektora kolorów.
Obliczone wartości wykonują działania matematyczne na podstawie innych właściwości lub zmiennych. Możemy to zilustrować za pomocą poniższego kodu:
:root { --podstawowy-rozmiar-czcionki: 14px; --rozmiar-czcionki-nagłówka: calc(var(--podstawowy-rozmiar-czcionki) * 3); } h2 { font-size: var(--rozmiar-czcionki-nagłówka); }
Z tego fragmentu kodu możemy wywnioskować, co następuje:
- Mamy zmienną –podstawowy-rozmiar-czcionki, która określa bazowy rozmiar czcionki.
- Mamy –rozmiar-czcionki-nagłówka, czyli trzykrotność wartości –podstawowy-rozmiar-czcionki.
- Mamy selektor h1, który używa var z –rozmiar-czcionki-nagłówka.
- Wszystkie nagłówki h1 na stronie internetowej będą miały trzykrotnie większy rozmiar niż wartość –podstawowy-rozmiar-czcionki.
Podsumowanie
Mamy nadzieję, że teraz rozumiesz, jak korzystać ze zmiennych CSS, aby przyspieszyć proces tworzenia stron i pisać kod, który jest łatwy w utrzymaniu. Możesz używać zmiennych w HTML i bibliotekach, takich jak React. Sprawdź różne podejścia do stylizowania React za pomocą CSS.
Kod źródłowy jest dostępny tutaj.
newsblog.pl