Propiedades personalizadas de CSS
Variables integradas en CSS — se declaran con --nombre y se usan con var(--nombre). A diferencia de las variables de un preprocesador (Sass), viven en el navegador en tiempo de ejecución: se heredan por la cascada, se pueden modificar con JavaScript y se recalculan de forma dinámica.
Diferencia frente a las variables de Sass: las de Sass son estáticas y desaparecen al compilar. Las propiedades personalizadas de CSS están «vivas» — existen en el DOM, las heredan los elementos hijos (define --accent en :root y todo puede leerla), se pueden cambiar por elemento o mediante media queries, y se leen y escriben desde JS (style.setProperty). Casos de uso: temas (alternar claro/oscuro cambiando unas pocas variables), tokens de diseño (un lugar central para colores y espaciados), estilos dinámicos que reaccionan al estado, y pasar valores de JS a CSS. Se combinan con enorme potencia con calc() y clamp(). Compatibles en todas partes desde hace tiempo. Una de las funciones modernas de CSS más usadas y la columna vertebral de los sistemas de diseño.