1.1 Co to są CSS-zmienne?
CSS-zmienne, znane również jako właściwości własne (custom properties), to zmienne deklarowane w CSS, które mogą być używane do przechowywania wartości, takich jak kolory, rozmiary, czcionki i inne atrybuty CSS. Oferują one efektywne możliwości poprawy elastyczności i utrzymywalności stylów na stronach internetowych.
Co to są CSS-zmienne?
CSS-zmienne to zmienne, które mogą przechowywać wartości właściwości CSS i być używane wielokrotnie w różnych częściach stylów. Definiowane są za pomocą podwójnego myślnika (--) i można je zdefiniować w dowolnym selektorze, ale najczęściej są definiowane w selektorze głównym :root, aby były dostępne wszędzie w dokumencie.
Przykład:
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
Główne cechy CSS-zmiennych:
- Wielokrotne użycie: CSS-zmienne pozwalają zdefiniować wartość raz i używać jej wielokrotnie w różnych częściach kodu CSS. To pomaga unikać powielania i upraszcza zarządzanie stylami.
- Elastyczność: wartości CSS-zmiennych mogą się zmieniać w zależności od warunków, takich jak stan elementu czy media queries. To umożliwia tworzenie bardziej responsywnych i dynamicznych stylów.
- Dziedziczenie: CSS-zmienne są dziedziczone od elementów nadrzędnych do podrzędnych, co upraszcza zarządzanie i organizację stylów.
- Zarządzalność: użycie zmiennych ułatwia wsparcie kodu, ponieważ zmiany wartości zmiennych automatycznie odzwierciedlają się we wszystkich elementach, które ich używają.
1.2 Przykłady użycia CSS-zmiennych
Przykład użycia CSS-zmiennych w JavaScript:
document.documentElement.style.setProperty('--main-color', '#e74c3c');
Przykład 1: Definicja i użycie zmiennych
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
<body>
<p>To jest paragraf.</p>
<a href="#">To jest link</a>
</body>
Wyjaśnienie:
- W tym przykładzie zdefiniowano trzy zmienne:
--main-bg-color,--main-text-colori--primary-color - Te zmienne są używane do ustawiania koloru tła, tekstu i linków
1.3 Zmiana wartości zmiennych w JavaScript
W tym przykładzie zmienne są używane do ustawiania tematu wyglądu strony. Po kliknięciu przycisku wartości zmiennych są zmieniane, co prowadzi do zmiany tła i koloru tekstu:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
<button id="toggle-theme">Toggle Theme</button>
<p>To jest paragraf.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION