color: var( –text-color );
}
img {
margin-bottom: var( –base-bottombottom-margin );
border: 1px solid gray;
}
.callout {
margin-bottom: var( –base-bottombottom-margin );
border: 1px solid gray;
border-radius: 5px;
color: var( –text-color );
}
假设你现在的客户说由于文本颜色太亮，导致文本难以阅读，想要改变文本颜色，此时，我们只需要更新一行CSS规则：
CSS Code复制内容到剪贴板
–text-color: black;
提高CSS的可读性
自定义属性会使样式表更加易读，也会使CSS属性声明更有语义。
将这个声明
CSS Code复制内容到剪贴板
background-color: yellow;
和下面的声明比较一下
CSS Code复制内容到剪贴板
background-color: var( –highlight-color );
font-size: var( –base-font-size );
像yellow和18px一类的属性值并没有给我们任何有用的上下文信息，但是当我们阅读如–base-font-size和–highlight-color一样的属性名时，即便在其他人的代码，我们都能马上知道这个属性值是在做什么。
要注意的事
大小写敏感
自定义属性是大小写敏感的（和普通的CSS规则不一样）
CSS Code复制内容到剪贴板
:root {
–main-bg-color: green;
–MAIN-BG-COLOR: RED;
}
.box {
background-color: var( –main-bg-color ); /* green background */
}
.circle {
BACKGROUND-COLOR: VAR(–MAIN-BG-COLOR ); /* red background */
border-radius: 9999em;
}
.box,
.circle {
height: 100px;
width: 100px;
margin-top: 25px;
box-sizing: padding-box;
padding-top: 40px;
text-align: center;
}
自定义属性值的解析
当重复声明自定义属性时，其赋值遵循通常的CSS层叠和继承规则。例如下面的示例：
HTML
XML/HTML Code复制内容到剪贴板
