Variables CSS
La función var() se usa para insertar el valor de una variable CSS.
Las variables CSS tienen acceso al DOM, lo que significa que puede crear variables con alcance local o global, cambiar las variables con JavaScript y cambiar las variables en función de los media queries.
Una buena manera de usar 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 usar, para cada elemento específico):
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;
}
Sintaxis de la función var()
La función var() se usa para insertar el valor de una variable CSS.
La sintaxis de la función var() es la siguiente:
var(--name, value)
| Valor | Descripción |
name | Requerido. El nombre de la variable (debe comenzar con dos guiones). |
value | Opcional. El valor de reserva (utilizado si no se encuentra la variable). |
Nota: El nombre de la variable debe comenzar con dos guiones
(--)y distingue entre mayúsculas y minúsculas.
Cómo funciona var()
En primer lugar: las variables CSS pueden tener un alcance global o local.
Las variables globales se pueden acceder/usar a través de todo el documento, mientras que las variables locales se pueden usar solo 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 alcance local, declárela dentro del selector que la va a usar.
El siguiente ejemplo es igual al ejemplo anterior, pero aquí usamos 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:
: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 usar var() son:
Hace que el código sea más fácil de leer (más comprensible).
Hace que sea 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, solo necesita cambiar los dos valores de las 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;
}
Compatibilidad con el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la función var().
| Función | Chrome | Edge | Mozilla | Safari | Opera |
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
La función var()
| Propiedad | Descripción |
var() | Inserta el valor de una variable CSS. |
Traducido con 💚 desde W3Schools.com