Variables CSS

Propiedades personalizadas CSS

La función var() puede ser usada para insertar el valor de una propiedad personalizada.

La función var()

Las variables en el CSS deben ser declaradas dentro un selector CSS que define su alcance. Para un alcance global se puede usar el selector :root ó el selector del body.

El nombre de la variable inicia con dos guiones medios -- y es sensible a mayúsculas.

La sintaxis de una función var() es la siguiente:

var ( nombre_personalizado , valor );

En el siguiente ejemplo primero define la propiedad personalizada global llamada --main-bg-color , entonces se usa la función var() para insertar el valor de la propiedad personalizada más adelante en la hoja de estilos:

CSS:

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

HTML:

<div id="div1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper 
  diam at erat pulvinar, at pulvinar felis blandit.
</div>

Ejemplo:

En el siguiente ejemplo se usa la función var() para insertar varios valores de propiedad personalizada:

CSS:

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div3 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

HTML:

<div id="div2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper 
  diam at erat pulvinar, at pulvinar felis blandit.
</div>
<div id="div3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper 
  diam at erat pulvinar, at pulvinar felis blandit.
</div>

Ejemplo:

Función var() CSS