DEV Community ·

CSS中的变量与自定义属性

💡 原文英文，约600词，阅读约需2分钟。

📝

内容提要

CSS变量可以存储值并在需要时使用，使用双破折号（--）开头，通过var()函数引用。@property可定义变量类型和默认值，但不是必须的。定义在:root中的变量是全局的。var()函数支持回退值，当变量无效时使用初始或继承值。使用@property时，若变量无效，则使用初始值。CSS变量简化了UI/UX的维护。

🎯

关键要点

CSS变量允许存储值并在需要时使用，使用双破折号（--）开头，通过var()函数引用。
使用@property可定义变量类型和默认值，但不是必须的。
定义在:root中的变量是全局的，可以在整个文档中使用。
var()函数支持回退值，当变量无效时使用初始或继承值。
使用@property时，若变量无效，则使用初始值。
CSS变量简化了UI/UX的维护，减少了查找和替换颜色值的工作。

❓

延伸问答

CSS变量是什么？

CSS变量是以双破折号（--）开头的标识符，用于存储值并在需要时引用。

如何在CSS中使用变量？

使用var()函数引用变量，例如：color: var(--my-variable);。

什么是@property，如何使用？

@property用于定义变量的类型和默认值，但不是必需的，可以选择性使用。

CSS变量的作用域是什么？

在:root中定义的变量是全局的，可以在整个文档中使用，局部变量则在其声明的选择器内有效。

var()函数的回退值是什么？

var()函数支持回退值，当变量无效时使用初始或继承值，格式为var(--my-variable, fallback-value)。

无效的自定义属性会有什么影响？

如果引用的变量无效，样式将使用初始值或继承值，而不是忽略该声明。

🏷️