A diferencia de las variables de Sass que mueren al compilarse, las Variables CSS (Custom Properties) están vivas en el navegador. Son el motor definitivo para crear sistemas de diseño inteligentes, temas oscuros y componentes que reaccionan a JavaScript en tiempo real.
1El Motor de Temas Dinámicos (Theming Engine)
Las variables CSS son la columna vertebral de la arquitectura frontend moderna.
- →Centralización: Al definir tus colores y espaciados en
:root, creas una única fuente de la verdad inmutable. - →Scope Local (Alcance): Puedes sobrescribir una variable global dentro de una clase específica (
.card { --bg: red; }). Esto permite crear variantes de componentes sin escribir CSS adicional. - →Intercambio en Tiempo de Ejecución (Runtime): A diferencia de Sass, puedes cambiar variables mientras la página se ejecuta sin recargarla. Este es el secreto detrás del botón de 'Dark Mode'.
2Control JS y Paletas HSL
Las Custom Properties son el puente definitivo entre el CSS estático y la lógica de JavaScript.
- →setProperty(): JS puede inyectar datos directamente al motor CSS en tiempo real basados en scroll, clics o coordenadas del ratón.
- →Generación HSL: Si guardas solo el Tono (Hue) en una variable (
--hue: 200), puedes generar un color base (hsl(var(--hue), 50%, 50%)), un tono claro para fondos (hsl(var(--hue), 50%, 90%)) y uno oscuro para bordes (hsl(var(--hue), 50%, 10%)). ¡Cambias el--huey todo el tema cambia automáticamente!
