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 unacalc()
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.
Deja un comentario