CSS Variabile. Funcția var(). proprietate personalizată globală "--main-bg-color". Proprietatea custom. CSS Funcția var().

Funcția var()

Următorul exemplu definește mai întâi o proprietate personalizată globală numită  "--main-bg-color", apoi folosește funcția var() pentru a insera valoarea proprietății custom ulterior în foaia de stil (style sheet):

Exemplu:

:root {
  --main-bg-color: coral;
}

#div1 {
  background-color: var(--main-bg-color);
}

#div2 {
  background-color: var(--main-bg-color);
}

Următorul exemplu utilizează funcția var() pentru a insera mai multe valori ale proprietății custom:

Exemplu:

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

CSS Funcția var()
 

Proprietate	Descriere
var()	Inserează valoarea unei proprietăți custom