css定义变量

在CSS中，我们可以使用自定义属性（也称为CSS变量）来定义变量。这些变量可以在文档的根元素（:root 选择器）上定义，这样可以在整个文档中使用。

解决方案1：

:root {
	--main-bg-color: coral;
	--main-text-color: white;
}

body {
	background-color: var(--main-bg-color);
	color: var(--main-text-color);
}

在上述代码中，我们在:root选择器上定义了两个变量--main-bg-color和--main-text-color。然后我们使用var()函数来引用这些变量。

• 变量名称以两个连字符（--）开始。

• 你可以在:root上定义全局变量，或者在任何选择器上定义局部变量。

• 使用var()函数来引用变量。

• 如果变量不存在，var()函数会返回其参数中提供的默认值（可选）。例如：var(--color, #333)，如果--color变量不存在，则返回#333。