[CSS] var(), czyli zmienne w CSS3
Zmienne CSS (Cascading Style Sheets) to funkcja, która umożliwia programistom tworzenie bardziej elastycznych stylów dla stron internetowych. Zmienne pozwalają na definiowanie i wykorzystywanie wartości np. koloru w kodzie CSS, do której odwołujemy się po ustalonej nazwie. Ułatwia to zarządzanie i modyfikację stylów na stronie. W tym wpisie przyjrzymy się różnym aspektom zmiennych CSS, a także ich praktycznemu zastosowaniu.
Definiowanie zmiennych i widoczność
Zmienne CSS są definiowane przy użyciu składni --nazwa-zmiennej: wartość;
. Na przykład:
:root {
--my-font-size: 25px;
--my-text-color: #333;
}
W powyższym przykładzie zdefiniowano dwie zmienne: "--my-text-color" o wartości "#333" i "--my-width" o wartości "200px". Zmienne mogą przechowywać kolory, rozmiary czcionek, marginesy, tła i wiele innych właściwości. Selektor :root, w którym zostały zadeklarowane, oznacza widoczność tych zmiennych dla całego dokumentu HTML.
Odwoływanie się do zmiennych
Po zdefiniowaniu zmiennych, możemy je wykorzystać w różnych selektorach CSS poprzez odwoływanie się do nich. Służy do funkcja var(). Na przykład:
h1 {
font-size: var(--my-font-size);
color: var(--my-text-color);
}
W powyższym przykładzie rozmiar czcionki dla elementów h1 został ustawiony na wartość zmiennej "--my-font-size", a kolor tekstu na wartość zdefiniowaną w zmiennej "--my-text-color". Dzięki temu, jeśli chcemy rozmiar czcionki lub kolor tekstu, zmienić wystarczy wartość zmiennej w jednym miejscu.
Przypisywanie zmiennych do innych zmiennych
Można również przypisywać zmienne do innych zmiennych, co pozwala na tworzenie bardziej zaawansowanych stylów. Na przykład:
:root {
--my-text-color: #000000;
--h1-color: var(--my-text-color);
}
h1 {
color: var(--h1-color);
}
W powyższym przykładzie, zmienna "--my-text-color" jest przypisana do zmiennej "--h1-color", więc obie zmienne mają taką samą wartość. Dzięki temu, jeśli zmienimy wartość "--my-text-color", zmiana zostanie odzwierciedlona również w "--h1-color".
Dziedziczenie zmiennych
Zmienne CSS mogą być dziedziczone przez elementy potomne. Na przykład:
:root {
--my-text-color: #000000;
}
.container {
color: var(--my-text-color);
}
.container p {
font-size: 18px;
}
Przykład powyżej pokazuje, że wszystkie elementy wewnątrz klasy ".container" odziedziczą wartość zmiennej "--my-text-color". Jednocześnie, elementy wewnątrz ".container" będą miały także określoną wielkość czcionki - 18px.
var() CSS z JavaScript
Wartości zmiennych CSS mogą być zmieniane dynamicznie za pomocą JavaScript i metody setProperty. Na przykład:
/* CSS */
:root {
--body-background: url('background-1.jpg') no-repeat;
}
body {
background: var(--body-background);
}
/* JavaScript */
const bodyTag = document.getElementsByTagName('body')[0];
bodyTag.style.setProperty('--body-background', 'url(background-2.jpg) no-repeat');
Kilka słów na koniec
Zmienne w CSS to rozwiązanie, pozwalające na tworzenie i wykorzystywanie zmiennych w stylach CSS. Dzięki temu możemy łatwo kontrolować i modyfikować wygląd stron internetowych, co prowadzi do bardziej elastycznego i efektywnego projektowania. Wykorzystanie zmiennych może znacznie uprościć naszą pracę że stylami i przyczynić się do bardziej spójnego wyglądu stron, a przede wszystkim zaoszczędzić nam kilkukrotnego powtarzania takich samych wartości.
Komentarze
Prześlij komentarz
Dzięki za komentarz!