css v=变量 |css3弹性盒子 百科

:root {
--primary-color: #2F6FEB;
--secondary-color: #FFFFFF;
--border-radius: 5px;
}
button {
background-color: var(--primary-color);
color: var(--secondary-color);
border-radius: var(--border-radius);
}

如上所示，大家可以在:root伪类中定义变量，然后在样式文件中使用var()函数引用这些变量。这使得修改全局变量的值变得极为容易，并且可以减少代码量。

另外，大家还可以在不同的选择器中定义相同的变量，并在不同的样式规则中使用它们。这使得样式表更易于维护和修改，因为大家可以在多个选择器中共享变量而无需重复编写代码。

.container {
--spacing: 20px;
}
.title {
font-weight: bold;
margin-bottom: var(--spacing);
}
.subtitle {
font-style: italic;
margin-bottom: var(--spacing);
}

总体而言，CSS变量是一个非常有用的新特性，能够帮助大家提高代码的可读性和可维护性，让整个项目更加灵活和易于扩展。