[CSS] var(), czyli zmienne w CSS3

czerwca 22, 2018

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.

◢ⓊⓀⓄⒹⓄⓌⒶⓃⒾ◣ blog programistyczny