2.1 Deklaracja zmiennych CSS
Zmienne CSS, znane również jako właściwości niestandardowe (Custom Properties), pozwalają na definiowanie wartości, które można wykorzystać ponownie w różnych częściach kodu CSS. Znacząco upraszczają zarządzanie stylami i zwiększają ich elastyczność.
Zmienne CSS są deklarowane za pomocą podwójnego myślnika (--) i mogą być zdefiniowane w dowolnym selektorze. Jednak aby
zapewnić dostępność zmiennych w całym dokumencie, często są one definiowane w selektorze korzenia :root.
Składnia:
selektor {
--nazwa-zmiennej: wartość;
}
Przykład:
W tym przykładzie zadeklarowano cztery zmienne: --main-bg-color, --main-text-color, --primary-color, i --font-size.
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
Użycie zmiennych CSS
Aby wykorzystać wartość zmiennej, używa się funkcji var(), która przyjmuje nazwę zmiennej jako argument.
Składnia:
selektor {
właściwość: var(--nazwa-zmiennej);
}
Przykład:
W tym przykładzie wartości zmiennych są używane do ustawienia koloru tła, koloru tekstu, rozmiaru czcionki i koloru linków.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 Przykłady użycia zmiennych CSS
Przykład 1: Podstawowe użycie zmiennych
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
Wynik:
- Tło strony będzie jasnoszare
- Tekst będzie ciemnoszary
- Rozmiar czcionki wyniesie 16 pikseli
- Linki będą miały niebieski kolor
Przykład 2: Nadpisanie zmiennych w poszczególnych komponentach
Zmienne CSS mogą być nadpisywane dla poszczególnych elementów lub komponentów, zapewniając elastyczność w stylizacji:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* Nadpisanie zmiennej */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
<div class="header">
<p>This is the header.</p>
</div>
<div class="footer">
<p>This is the footer.</p>
</div>
Wynik:
- Tło nagłówka będzie niebieskie, a tekst — jasnoszary
- Tło stopki będzie czerwone (nadpisana zmienna), a tekst — jasnoszary
Przykład 3: Użycie zmiennych w kombinacji z innymi wartościami
Zmienne CSS można łączyć z innymi wartościami i funkcjami CSS:
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
<div class="container">
<p>This is a container with padding and margin.</p>
</div>
Wynik:
- Kontener będzie mieć odstępy i zewnętrzne odstępy określone zmiennymi
2.3 Użycie zmiennych CSS w JavaScript
Przykład użycia zmiennych CSS w JavaScript
Zmienne CSS można dynamicznie zmieniać za pomocą JavaScript, co pozwala na dostosowanie stylów w czasie rzeczywistym:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
<button id="toggle-theme">Toggle Theme</button>
<p>This is a paragraph.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
Wyjaśnienie:
Po kliknięciu przycisku zmieniają się wartości zmiennych --bg-color i --text-color, co prowadzi do zmiany koloru tła i tekstu na stronie.
GO TO FULL VERSION