var()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
La función var()
puede ser utilizada como valor en cualquier propiedad de un elemento. La función var() no puede ser usada como nombre de una propiedad, selector o cualquier cosa que no sea un valor de propiedad. (Hacerlo provoca normalmente una sintaxis erronea o bien un valor que no tiene conexión con la variable).
Sintaxis
El primer parámetro que recibe la función es el nombre de la custom property que será reemplazada. Se puede utilizar un segundo parámetro opcional como fallback de el primero. Si la custom property referenciada por el primer parámetro no es válida, entonces la función utiliza el valor del segúndo parámetro.
<var()> =
var( <custom-property-name> , <declaration-value>? )
Valores
- <custom-property-name>
-
El nombre de la custom property a la que se hace referencia, representada por un identificador válido, es decir, cualquier nombre que comience por dos guiones. Las "custom properties" son para uso exclusivo de autores y usuarios. CSS no dará nunca un significado más alla del que se detalla aquí.
- <declaration-value>
-
El valor por defecto de la custom property en caso de que la custom property referenciada sea inválida. Este valor puede contener cualquier caracter salvo algunos con significado especial como saltos de linea, llaves sin cerrar, exclamaciones o puntos y comas .
Ejemplos
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
/* Fallback */
/* En el estilo del componente: */
.component .header {
color: var(--header-color, blue);
}
.component .text {
color: var(--text-color, black);
}
/* En el estilo de la aplicación: */
.component {
--text-color: #080; /* header-color no está definido y por lo tanto permanece con el valor "blue" definido como fallback */
}
Especificaciones
Specification |
---|
CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |
Compatibilidad con navegadores
BCD tables only load in the browser