Función CSS var()
Funciones CSSEjemplo
Define una propiedad llamada "--main-bg-color" y luego usa la función var() para llamar a esa propiedad:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Pruébalo »
Definición y uso
La función var() se usa para insertar valores de propiedad personalizados. Este método es útil si un valor de propiedad se usa en varios lugares.
Versión compatible: CSS3
Compatibilidad del navegador
Los números en la tabla indican la primera versión del navegador que admite la función.
| Función | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Sintaxis CSS
var(custom-property-name, value)
| Valor | Descripción |
|---|---|
| custom-property-name | Obligatorio. El nombre de la propiedad personalizada debe comenzar con --. |
| value | Opcional. Valor alternativo, que se usa cuando la propiedad no existe. |
Más ejemplos
Ejemplo
Usa la función var() para llamar a varios valores personalizados:
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
Pruébalo »
Otras extensiones