Saltar al contenido principal

Variables CSS

La función var() se utiliza para insertar el valor de una variable CSS.​

Las variables CSS tienen acceso al DOM, lo que significa que puedes crear variables con alcance local o global, cambiar las variables con JavaScript y cambiar las variables basándote en consultas de medios.

Una buena forma de utilizar las variables CSS es cuando se trata de los colores de tu diseño. En lugar de copiar y pegar los mismos colores una y otra vez, puedes colocarlos en variables.

La forma tradicional​

El siguiente ejemplo muestra la forma tradicional de definir algunos colores en una hoja de estilo (definiendo los colores a utilizar, para cada elemento específico):

Ejemplo​

CSS
body {
  background-color: #1e90ff;
}

h2 {
  border-bottom: 2px solid #1e90ff;
}

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

Sintaxis de la función var()​

La función var() se utiliza para insertar el valor de una variable CSS.

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

var(--name, value)​

  • name: Obligatorio. El nombre de la variable (debe empezar con dos guiones).
  • value: Opcional. Valor alternativo (utilizado si no se encuentra la variable).
NOTA

El nombre de la variable debe empezar por dos guiones (--) y distingue entre mayúsculas y minúsculas.

Cómo funciona var()​

En primer lugar, las variables CSS pueden tener un ámbito global o local.

Las variables globales pueden ser accedidas/utilizadas a través de todo el documento, mientras que las variables locales sólo pueden ser utilizadas dentro del selector donde se declara.

Para crear una variable con alcance global, declárela dentro del selector :root. El selector :root coincide con el elemento raíz del documento.

Para crear una variable con ámbito local, declárela dentro del selector que va a utilizarla.

El siguiente ejemplo es igual al anterior, pero aquí utilizamos la función var().

Primero, declaramos dos variables globales (--blue y --white). Luego, usamos la función var() para insertar el valor de las variables más adelante en la hoja de estilo:

Ejemplo​

CSS
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Las ventajas de utilizar var() son:​

  • Hace que el código sea más fácil de leer (más comprensible).
  • Hace mucho más fácil cambiar los valores de color.

Para cambiar el color azul y blanco a un azul y blanco más suave, sólo tienes que cambiar los dos valores de las variables:

Ejemplo​

CSS
:root {
  --blue: #6495ed;
  --white: #faf0e6;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Soporte de navegadores​

Los números de la tabla especifican la primera versión del navegador totalmente compatible con la función var().

CSS Var() Browser Support