CSS 变量
CSS
前端
CSS变量，也被称为自定义属性（Custom Properties），是CSS中的一项强大功能，允许你在样式表中定义和重用值。它们提供了一种更灵活的方式来管理和修改网页样式，特别是在处理大型和复杂的网站时。CSS变量的语法以双减号--开头，后跟变量名，如 --main-color。
CSS变量的首个工作草案（Working Draft）作为CSS3众多模块，于2015年12月发布，经过了一系列规范的发展和改进。现在作为CSS规范，已得到了广泛的支持和采用。它们可以帮助开发人员创建更易维护和可定制的网页样式。
定义变量
定义一个CSS变量，你可以在根元素（通常是<html>或:root伪类）中使用--前缀，如下所示：
:root {
--main-color: #3498db;
--font-size: 16px;
}这将创建两个CSS变量：--main-color和--font-size，并分别赋予它们值。
使用变量
要在样式规则中使用变量，可以使用var()函数，如下所示：
.element {
color: var(--main-color);
font-size: var(--font-size);
}这将使用先前定义的--main-color和--font-size的值来设置.element的文本颜色和字体大小。
CSS变量遵循CSS的继承规则，这意味着它们可以在子元素中继承父元素的值。你还可以覆盖从父元素继承的值，以适应不同的上下文或特定元素。大多数现代浏览器都支持CSS变量，但在某些旧版本的浏览器中可能不支持。在使用之前，你应该考虑兼容性和提供备用样式。
CSS变量是一种强大的工具，可以提高代码的可维护性和灵活性，同时允许开发人员更轻松地管理和更新网页的样式。它们广泛用于现代Web开发，特别是在创建复杂的和响应式布局时。
案例
:root {
--font-size-mobile: 16px;
--font-size-desktop: 20px;
}
.text {
font-size: var(--font-size-mobile);
}
@media (min-width: 768px) {
.text {
font-size: var(--font-size-desktop);
}
}