Recomendaciones de curso:

Función CSS var()

Definición y uso de CSS var() La función se utiliza para insertar valores de variables CSS.

Ejemplo

Ejemplo 1

Primero, declara una variable global llamada --main-bg-color, luego usa en la hoja de estilo: var() Inserción del valor de la variable por función:

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

Prueba por tu cuenta

Ejemplo 2

Otro uso var() Ejemplo de inserción de múltiples valores de variables CSS por función:

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

Prueba por tu cuenta

Sintaxis de CSS

var(--name, value)

Detalles técnicos

Compatibilidad del navegador

Las cifras en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Páginas relacionadas

Tutoriales:Variable de CSS