Currying In CSS | CSS-Tricks

Funny timing on this I was just looking at the website for Utopia (which is a responsive type project which I hate to admit I don’t fully understand) and I came across some CSS they show off that looked like this:

: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));
 
  ...
}

See anything weird there? That code is using mathematical operators, but there is no calc() function wrapped around it.

Just as my curiosity set in, Trys Mudford, a creator of Utopia, blogged it:

The value after the : in the CSS custom property does not have to be valid CSS. It won’t cause any errors, nor invalidate the custom property. It won’t be evaluated in the browser until used, or more specifically, placed in a calc() function.

Here’s a contrived example:

: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));
}

In my limited understanding, currying is like functions that return functions. I suppose this is sorta like that in that the alternate padding properties above are sort of like derivative functions of the main padding function (if you can call it that), and you only call them and execute them as needed.

David Ron

# March 7, 2020

Higher order functions are functions that return functions. Currying is converting a function that takes several parameters into a higher order functions that takes a single parameter and returns a function that “takes the rest” (where the same process continues until all functions take one parameter.

So, a normal function call would look like
tell(Bob,”hello”,5)

The curried form might look like
tell(Bob)(“hello”)(5)

Some might consider currying a special form of partial application where the arity of all functions is always 1. So you can often achieve currying in JavaScript through tools intended to provide partial application.

I’m not sure how this article is about currying, but I can see how it might be about higher order functions.

Comments