Variables CSS

Variables CSS

La función var() se utiliza para insertar los valores de las variables CSS.

Las variables CSS pueden acceder al DOM, lo que significa que puede crear variables con un ámbito local o global, modificar las variables usando JavaScript y cambiar las variables basándose en las consultas de medios.

Una buena manera de usar las variables CSS es con los colores del diseño. Puede colocarlo en variables sin tener que copiar y pegar el mismo color una y otra vez.

Forma tradicional

El siguiente ejemplo muestra la forma tradicional de definir algunos colores en la hoja de estilo (definiendo el color para cada elemento específico que se utilizará):

Ejemplo

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;
}

Prueba personalmente

La sintaxis de la función var()

La función var() se utiliza para insertar los valores de las variables CSS.

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

var(name, value)
Valor Descripción
name Obbligatorio. Nombre de la variable (con dos guiones bajos al principio).
value Opcional. Valor de retroceso (usado cuando no se encuentra la variable).

Nota:El nombre de la variable debe comenzar con dos guiones bajos (--) y es sensible a mayúsculas y minúsculas!

¿Cómo funciona var()?

Primero: Las variables CSS pueden tener un ámbito global o local.

Las variables globales pueden ser accedidas y utilizadas en todo el documento, mientras que las variables locales solo pueden utilizarse dentro del selector donde se declararon.

Si desea crear una variable con un ámbito global, declárela en el selector :root. El selector :root coincide con el elemento raíz del documento.

Si desea crear una variable con un ámbito local, declárela en el selector donde se utilizará.

El siguiente ejemplo es el mismo que el anterior, pero aquí usamos la función var().

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

Ejemplo

: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;
}

Prueba personalmente

Las ventajas de usar var() son las siguientes:

  • Hacer que el código sea más fácil de leer (más fácil de entender)
  • Hacer que la modificación de los valores de color sea más fácil

Si desea cambiar el azul y el blanco por un azul y blanco más suaves, simplemente necesita modificar los valores de dos variables:

Ejemplo

: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;
}

Prueba personalmente

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Función
var() 49.0 15.0 31.0 9.1 36.0

Función var() CSS

Función Descripción
var() Insertar el valor de la variable CSS