Variables CSS - La función var()
Variables CSS
La var()función se utiliza 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 las consultas de medios.
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, puede colocarlos en variables.
El Camino 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 var()función se utiliza para insertar el valor de una variable CSS.
La sintaxis de la var()función es la siguiente:
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
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 :root
selector. El :rootselector 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 var()función.
Primero, declaramos dos variables globales (--blue y --white). Luego, usamos la
var()función 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 navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la
var()función.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Función CSS var()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |