Aprenda variables CSS en 5 minutos

Un tutorial rápido sobre cómo comenzar.

CSS Custom Properties (también conocido como Variables) es una gran victoria para los desarrolladores front-end. 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 CSS, las variables CSS son en realidad una parte del DOM, que tiene muchos beneficios. Por lo tanto, son esencialmente como las variables SASS y LESS en los esteroides. En este artículo, le daré un curso intensivo sobre cómo funciona esta nueva tecnología.

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

¿Por qué aprender CSS Variables?

Hay muchas razones para usar variables en CSS. Una de las más convincentes es que reduce la repetición en su hoja de estilo.

En el ejemplo anterior, es mucho mejor crear una variable para el color #ffeead que repetirlo, 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 dará 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, hay algunas grandes ventajas con las variables CSS.

  1. No requieren ninguna transpilación para funcionar, ya que son nativos 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 una tonelada de beneficios, lo que analizaré en este artículo y en mi próximo curso.

¡Ahora comencemos a aprender 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 pseudo clase raíz. 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 {
  - color principal: # ff6f69;
}

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

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

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

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

Declarando una variable local

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

Por ejemplo, puede tener 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:

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

Esta variable ahora puede ser utilizada por sus hijos:

.alert p {
  color: var (- color de alerta);
  borde: 1px var sólido (- color de alerta);
}

Si intentó usar la variable de color de alerta 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 con 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 según el ancho de la pantalla:

: root {
  - tamaño-fuente-principal: 16px;
}
medios todos y (ancho máximo: 600 px) {
  : root {
    - tamaño de fuente principal: 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 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 utilizadas. Esto es perfecto si desea dar a sus usuarios la posibilidad de cambiar su sitio web (como ajustar el tamaño de fuente).

Continuemos con el ejemplo desde el comienzo de este artículo. Agarrar 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 método setProperty 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 el aspecto completo de su aplicación, por lo que es perfecto para permitir a los usuarios configurar 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.

Soporte del navegador

Actualmente, el 77 por ciento del tráfico global de sitios web admite CSS Variables, con casi el 90 por ciento en los EE. UU. Ya usamos las variables CSS en Scrimba.com desde hace un tiempo, ya que nuestro público es bastante conocedor de la tecnología y utiliza principalmente navegadores modernos.

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

Si quieres aprenderlo correctamente, asegúrate de revisar mi curso gratuito de Variables CSS en Scrimba.

¡Gracias por leer! Mi nombre es Per, soy cofundador de Scrimba y me encanta ayudar a las personas a aprender nuevas habilidades. Sígueme en Twitter si deseas recibir notificaciones sobre nuevos artículos y recursos.