CSS 自定义函数和混合

CSS 自定义函数和混入 (CSS custom functions and mixins) 模块允许开发者创建可重用的 CSS 代码块,这些代码块可以接受参数、包含复杂逻辑(使用 CSS if() 函数和 @media @-规则等特性定义),并根据该逻辑返回值。

CSS 自定义函数在 @function @-规则中定义,并使用 <dashed-function> 语法调用,这与 CSS 自定义属性 语法非常相似,不同之处在于它在末尾包含括号,其中包含参数(例如,--my-function(30px, 3))。CSS 自定义函数可以在任何属性值中调用,并将根据传递给函数的参数和其中的逻辑返回值。

CSS mixin 在 @mixin @-规则中定义,并使用嵌套在规则集中的 @apply @-规则应用。CSS mixin 定义了一组属性,可以在多个规则集中重用,并通过参数和逻辑进行自定义。

CSS 自定义函数和 mixin 可以为其参数和返回值分配可选的数据类型,以限制传入和传出的值。

注意:目前,只有 CSS 自定义函数具有浏览器支持。CSS mixin 目前在任何浏览器中都不受支持。

参考

@ 规则

CSS 自定义函数和 mixin 模块还引入了 @mixin@apply@contents@env @-规则。目前,没有浏览器支持这些功能。

描述符

数据类型和值

函数

CSS 自定义函数和 mixin 模块还引入了作用域 env() 变量。目前,没有浏览器支持此功能。

接口

指南

使用 CSS 自定义函数

本指南将教您如何使用 CSS 自定义函数并介绍一些典型用例。

规范

规范
CSS 函数与混入模块

另见