10.1 Deklaracja zmiennych
Zmienne w CSS, znane również jako niestandardowe właściwości (CSS Custom Properties), pozwalają deweloperom przechowywać wartości właściwości w jednym miejscu i ponownie je wykorzystywać w dokumencie. To sprawia, że CSS jest bardziej elastyczny i łatwiejszy do zarządzania, zwłaszcza przy pracy nad dużymi projektami.
Deklaracja zmiennych
Zmienne w CSS deklaruje się przy użyciu dwóch kresek (--) przed nazwą zmiennej.
Zwykle są one deklarowane wewnątrz selektora :root, aby były dostępne w całym dokumencie.
Składnia:
:root {
--nazwa-zmiennej: wartość;
--nazwa-zmiennej: wartość;
}
Przykład:
W tym przykładzie zadeklarowano trzy zmienne: --main-color, --secondary-color, i --font-size.
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 Użycie zmiennych
Aby użyć zmiennych, stosujemy funkcję var(), która przyjmuje nazwę zmiennej jako argument.
Składnia:
selektor {
właściwość: var(--nazwa-zmiennej);
właściwość: var(--nazwa-zmiennej);
}
Przykład:
Ten przykład używa wcześniej zadeklarowanych zmiennych do stylizacji tła, koloru tekstu oraz rozmiaru czcionki elementu <body>.
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 Dziedziczenie i nadpisywanie zmiennych
Zmienne CSS są dziedziczone w hierarchii elementów. Oznacza to, że jeśli zmienna jest zadeklarowana w jednym elemencie, będzie dostępna dla jego elementów potomnych. Zmienne można również nadpisywać wewnątrz innych selektorów.
Przykład:
W tym przykładzie element .header nadpisuje zmienną --main-color, i ta nowa zmienna
jest stosowana tylko dla niego. W tym samym czasie, element .footer używa wartości zmiennej,
zadeklarowanej w :root.
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 Zalety używania zmiennych CSS
1. Uproszczenie zarządzania stylami:
Zmienne pozwalają na zmianę wartości jednej właściwości w jednym miejscu, i ta zmiana automatycznie zostanie zastosowana do wszystkich miejsc, gdzie używana jest ta zmienna. Jest to szczególnie przydatne dla tematyzacji i utrzymywania spójnego stylu.
2. Poprawa czytelności i wsparcia kodu:
Użycie zmiennych sprawia, że kod CSS jest bardziej czytelny i zrozumiały, ponieważ mogą być używane do opisu
wartości, takich jak kolory i rozmiary, które mogą mieć znaczenie semantyczne (na przykład, --main-color zamiast #3498db).
3. Dynamiczne aktualizowanie stylów:
Zmienne mogą być zmieniane dynamicznie za pomocą JavaScript, co pozwala tworzyć bardziej interaktywne i dynamiczne interfejsy użytkownika.
GO TO FULL VERSION