css

Variables CSS con var() – Tutorial y ejemplos

Introducción a las variables CSS

Las variables CSS sirven para definir variables dentro del lenguaje (si se le puede llamar así) CSS. Permite reutilizar esos valores y tener una única fuente de la verdad.

De este modo, si después queremos cambiar el estilo de todos los elementos que usen nuestras variables, lo podemos hacer en una sola línea.

Cabe mencionar que para que las variables CSS funcionen no necesitamos un preprocesador, lo podemos hacer con CSS puro.

Definir una variable CSS

Para definir una variable se usa la siguiente sintaxis:

selector {
--nombre-variable: definición;
}

Todas las variables comienzan su nombre con --. Su definición es lo mismo que se pondría en la definición del estilo del elemento, con los ejemplos se verá más claro.

En ese caso definimos la variable dentro de un elemento. Por ejemplo, si queremos definir una variable dentro de un encabezado:

h1 {
  --color-de-fondo: red;
}

Uso de las variables CSS

Para usar las variables CSS hay que invocar a var() así:

h1{
 --color-de-fondo: red;
 color: var(--color-de-fondo);
}

No te confundas, en la línea 2 definimos la variable, podemos definir varias variables. Después en la línea 3 la estamos usando.

Por cierto, var() acepta dos argumentos: el nombre de la variable y un valor por defecto. Ya que en ocasiones la variable puede estar mal definida, y si este es el caso, var intenta poner el estilo que se indica como segundo argumento.

Por ejemplo, si la variable --color-de-fondo no estuviera definida, se tomaría el color amarillo según la siguiente declaración:

h1{
 --color-de-fondo: red;
 color: var(--color-de-fondo, yellow);
}

Definir variables en :root

Si quieres definir las variables de manera global, utiliza el selector :root:

:root{
 --titulos: red;
 --subtitulos: yellow;
 --parrafos: blue;
 --borde: 2px solid red;
}

Ahora que las has definido puedes usarlas en cualquier lugar. Ahí puedes fijarte que no solo podemos definir colores, sino también otros estilos como bordes; de hecho se puede definir cualquier estilo CSS válido.

Compatibilidad con navegadores

Adivina con cuál navegador no es compatible… exacto, con internet explorer. Y bueno, supongo que también para otros como el navegador de la nintendo 3ds.

Si queremos que sea compatible, debemos definir el estilo dos veces. Así, si no entiende, no aplica el estilo. Por ejemplo:

h1{
 color: red;
 color: var(--titulos, green);
}

En este caso estamos definiendo el color dos veces, pero es porque si no se entiende el uso de var, se aplique el estilo de arriba.

Ejemplo completo

Ahora he creado un ejemplo completo para demostrar el uso de las variables CSS. El objetivo no es que se vea bien, solo es demostrativo.

:root{
 --titulos: red;
 --subtitulos: yellow;
 --parrafos: blue;
 --borde: 2px solid red;
}

h1{
 color: red;
 color: var(--titulos, green);
}

h2{
 color: green;
 color: var(--subtitulos, yellow);
}

p{
 border: var(--borde);
 color: green;
 color: var(--parrafos, yellow);
}

En un buen navegador, todo se ve como debería:

En cambio, en Internet Explorer se ve así:

No soporta la llamada a var, pero sí los otros estilos que mencionamos en la compatibilidad.

Por cierto, las variables también se pueden definir dentro de un media query. Simplemente hay que hacer algo así:

@media (max-width: 100px){
  :root {
    --variable: definición;
  }
}

Finalmente te invito a leer más sobre CSS en mi blog.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Cancelar trabajo de impresión con C++

En este post te quiero compartir un código de C++ para listar y cancelar trabajos…

4 semanas hace

Copiar bytes de Golang a JavaScript con WebAssembly

Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…

2 meses hace

Imprimir PDF con Ghostscript en Windows de manera programada

Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…

2 meses hace

Hacer pruebas en impresora térmica Bluetooth Android

Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…

2 meses hace

Limpiar clave PEM

Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…

2 meses hace

Foco con Telegram, apagador de 3 vías, relevador y ESP8266

Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…

2 meses hace

Esta web usa cookies.