Aprenda las variables CSS en 5 minutos: un tutorial para principiantes

Las propiedades personalizadas de CSS (también conocidas como variables) son una gran ventaja para los desarrolladores de aplicaciones para el usuario. Aporta el poder de las variables a CSS, lo que resulta en menos repetición, mejor legibilidad y más flexibilidad.

Además, a diferencia de las variables de los preprocesadores de CSS, las variables de CSS son en realidad parte del DOM, lo que tiene muchos beneficios. Así que son esencialmente como variables SASS y LESS con esteroides. En este artículo, te daré un curso intensivo sobre cómo funciona esta nueva tecnología.

También he creado un curso gratuito e interactivo de 8 partes sobre variables CSS, así que échale un vistazo si quieres convertirte en un experto en este tema.

¿Quieres aprender las variables CSS? ¡Aquí está mi curso gratuito de 8 partes!

¿Por qué aprender las variables CSS?

Hay muchas razones para usar variables en CSS. Uno de los más atractivos es que reduce la repetición en su hoja de estilo.

En el ejemplo anterior, es mucho mejor crear una variable para el #ffeeadcolor que repetirla como lo estamos haciendo aquí:

Esto no solo hará que su código sea más fácil de leer, sino que también le brindará más flexibilidad, en caso de que desee cambiar este color.

Ahora bien, esto ha sido posible con las variables SASS y LESS durante años. Sin embargo, existen algunos grandes beneficios con las variables CSS.

  1. No requieren transpilación para funcionar, ya que son nativas del navegador. Por lo tanto, no necesita ninguna configuración para comenzar, como lo hace con SASS y LESS.
  2. Viven en el DOM, lo que abre un montón de beneficios, que analizaré en este artículo y en mi próximo curso.

¡Ahora comencemos a aprender las Variables CSS!

Declarando su primera variable CSS

Para declarar una variable, primero debe decidir en qué ámbito debe vivir la variable. Si desea que esté disponible globalmente, simplemente defínalo en la :rootpseudoclase. Coincide con el elemento raíz en su árbol de documentos (generalmente la etiqueta).

Como las variables se heredan, esto hará que su variable esté disponible en toda su aplicación, ya que todos sus elementos DOM son descendientes de la etiqueta.

:root { --main-color: #ff6f69; } 

Como puede ver, declara una variable de la misma manera que establece cualquier propiedad CSS. Sin embargo, la variable debe comenzar con dos guiones.

Para acceder a una variable, debe usar la var()función y pasar el nombre de la variable como parámetro.

#title { color: var(--main-color); } 

Y eso le dará a tu título el #f6f69color:

Declarar una variable local

También puede crear variables locales, que son accesibles solo para el elemento en el que está declarado y para sus hijos. Esto tiene sentido si sabe que una variable solo se utilizará en una parte (o partes) específica de su aplicación.

Por ejemplo, es posible que tenga un cuadro de alerta que usa un tipo especial de color que no se usa en otros lugares de la aplicación. En ese caso, podría tener sentido evitar colocarlo en el ámbito global:

.alert { --alert-color: #ff6f69; } 

Esta variable ahora puede ser utilizada por sus hijos:

.alert p { color: var(--alert-color); border: 1px solid var(--alert-color); } 

Si intentó usar la alert-colorvariable en otro lugar de su aplicación, por ejemplo, en la barra de navegación, simplemente no funcionaría. El navegador simplemente ignoraría esa línea de CSS.

Capacidad de respuesta más fácil con variables

Una gran ventaja de las variables CSS es que tienen acceso al DOM. Este no es el caso de LESS o SASS, ya que sus variables se compilan en CSS normal.

En la práctica, esto significa que puede, por ejemplo, cambiar las variables en función del ancho de la pantalla:

:root { --main-font-size: 16px; } media all and (max-width: 600px) { :root { --main-font-size: 12px; } } 

Y con esas simples cuatro líneas de código, ha actualizado el tamaño de fuente principal en toda su aplicación cuando se ve en pantallas pequeñas. Bastante elegante, ¿eh?

Cómo acceder a las variables con JavaScript

Otra ventaja de vivir en el DOM es que puede acceder a las variables con JavaScript e incluso actualizarlas, por ejemplo, en función de las interacciones del usuario. Esto es perfecto si desea brindarles a sus usuarios la posibilidad de cambiar su sitio web (como ajustar el tamaño de fuente).

Continuemos con el ejemplo del principio de este artículo. Tomar una variable CSS en JavaScript requiere tres líneas de código.

var root = document.querySelector(':root'); var rootStyles = getComputedStyle(root); var mainColor = rootStyles.getPropertyValue('--main-color'); console.log(mainColor); \--> '#ffeead' 

Para actualizar la variable CSS simplemente llame al setPropertymétodo en el elemento en el que se han declarado las variables y pase el nombre de la variable como primer parámetro y el nuevo valor como segundo.

root.style.setProperty('--main-color', '#88d8b0') 

Este color principal puede cambiar todo el aspecto de su aplicación, por lo que es perfecto para permitir que los usuarios establezcan el tema de su sitio.

Al actualizar una sola variable, puede cambiar el color de la barra de navegación, el texto y los elementos.

Al actualizar una sola variable, puede cambiar el color de la barra de navegación, el texto y los elementos.

Soporte de navegador

Actualmente, el 77 por ciento del tráfico mundial de sitios web admite variables CSS, con casi el 90 por ciento en los EE. UU. Ya estamos usando CSS Variables en Scrimba.com desde hace un tiempo, ya que nuestra audiencia es bastante conocedora de la tecnología y, en su mayoría, usa navegadores modernos.

Ok, eso fue todo. ¡Espero que hayas aprendido algo!

Si desea aprenderlo correctamente, asegúrese de consultar mi curso gratuito de Variables CSS en Scrimba.

¡Gracias por leer! Mi nombre es Per Borgen, soy el cofundador de Scrimba, la forma más fácil de aprender a codificar. Debe consultar nuestro bootcamp de diseño web receptivo si desea aprender a construir un sitio web moderno a nivel profesional.