CSS 中的柯里化 | CSS-Tricks

有趣的是，我正好在查看 Utopia 的网站（这是一个响应式类型项目，我不得不承认我不完全理解），我偶然发现了一些他们展示的 CSS，看起来像这样

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

看到什么奇怪的地方了吗？这段代码使用了数学运算符，但没有用 calc() 函数将其包裹起来。

就在我的好奇心涌现之际，Utopia 的创建者 Trys Mudford 写了一篇博文

CSS 自定义属性中 : 后面的值不必是有效的 CSS。它不会导致任何错误，也不会使自定义属性失效。它不会在浏览器中被评估，直到被使用，或者更具体地说，被放置在 calc() 函数中。

这是一个人为的例子

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

在我有限的理解中，柯里化就像返回函数的函数。我想这有点像上面提到的备用填充属性，有点像是主填充函数的派生函数（如果你能这样称呼它），并且你只在需要时调用和执行它们。

David Ron

# 2020年3月7日

高阶函数是返回函数的函数。柯里化是将一个接受多个参数的函数转换为一个高阶函数，该函数接受一个参数并返回一个函数，该函数“接受其余参数”（其中相同的过程持续进行，直到所有函数都接受一个参数）。

因此，正常的函数调用看起来像
tell(Bob,”hello”,5)

柯里化形式可能看起来像
tell(Bob)(“hello”)(5)

有些人可能会认为柯里化是部分应用的一种特殊形式，其中所有函数的元数始终为 1。因此，您通常可以通过旨在提供部分应用的工具在 JavaScript 中实现柯里化。

我不确定这篇文章与柯里化有什么关系，但我可以看到它可能与高阶函数有关。

评论