Curry y CSS

Es un momento curioso para esto. Estaba mirando el sitio web de Utopia (que es un proyecto de tipo responsivo que odio admitir que no entiendo del todo) y encontré algo de CSS que muestra y que se veía así:

:root {  --fluid-max-negative: (1 / var(--fluid-max-ratio) / var(--fluid-max-ratio));  --fluid-min-negative: (1 / var(--fluid-min-ratio) / var(--fluid-min-ratio));   ...}

¿Ves algo raro allí? Ese código utiliza operadores matemáticos, pero no hay ninguna calc()función a su alrededor.

Justo cuando empezó mi curiosidad, Trys Mudford, creador de Utopia, lo escribió en su blog:

El valor después de :en la propiedad personalizada de CSS no tiene que ser CSS válido. No causará ningún error ni invalidará la propiedad personalizada. No se evaluará en el navegador hasta que se utilice o, más específicamente, se coloque en una calc()función.

He aquí un ejemplo artificial:

:root {  --padding: 1rem;    /* These are meaningless alone */  --padding-S: var(--padding) / 2;  --padding-L: var(--padding) * 2;}.module--large {  /* But they evaluate once they are in a calc() */  padding: calc(var(--padding-L));}

En mi comprensión limitada, el curry es como funciones que devuelven funciones. Supongo que esto es algo así en el sentido de que las propiedades de relleno alternativas anteriores son algo así como funciones derivadas de la función de relleno principal (si se puede llamar así), y solo las llamas y las ejecutas según sea necesario.

SUSCRÍBETE A NUESTRO BOLETÍN 
No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Este sitio web utiliza cookies para mejorar tu experiencia mientras navegas por él. Este sitio web utiliza cookies para mejorar tu experiencia de usuario. Al continuar navegando, aceptas su uso. Mas informacion