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
@-规则。目前,没有浏览器支持这些功能。
描述符
数据类型和值
<dashed-function>
数据类型
函数
CSS 自定义函数和 mixin 模块还引入了作用域 env()
变量。目前,没有浏览器支持此功能。
接口
指南
- 使用 CSS 自定义函数
-
本指南将教您如何使用 CSS 自定义函数并介绍一些典型用例。
规范
规范 |
---|
CSS 函数与混入模块 |