在CSS中咖喱

该CSS片段展示了一种类似于咖喱的技术，利用CSS自定义属性（变量）进行递延计算。关键观察结果是，直到在calc()函数中使用CSS变量内的数学操作。

该示例显示了基于 - --padding的定义属性--padding-S和 - - --padding-L定义计算。这些计算不会立即执行。它们一直是未评估的表达式，直到在calc()函数中引用，如.module--large规则所示。只有这样，浏览器才能执行计算。

这类似于在功能编程中遵循的，在功能编程中，函数返回另一个函数，将最终计算延迟到提供了所有参数。在这里，初始CSS变量分配就像定义初始函数一样， calc()函数充当最终功能调用，提供了必要的评估上下文。

Utopia示例具有--fluid-max-negative和--fluid-min-negative示例。复杂的计算被预先定义为CSS变量，并且仅在样式表其他位置的calc()函数中使用时进行评估。这通过将计算定义与其应用程序分开来提高代码的可读性和可维护性。计算是“咖喱”的 - 最终结果直到在触发评估的上下文中使用该变量后才计算。

以上是在CSS中咖喱的详细内容。更多信息请关注PHP中文网其他相关文章！