试想下在复杂的项目中，CSS样式会不断累加，看到纯数值的属性值，我们很难理解它们的含义，如果我们可以给它们取一个变量名来表示它们的含义，这样更加便于我们理解和复用，于是就有了CCS变量的出现。
如何使用它呢？
在定义变量时一定要添加--前缀，在使用它时需要使用var()函数，并且它也有作用域范围，如果需要设置全局作用域，我们可以在html标签上定义变量，如果要设置局域变量，我们需要在作用范围的上代选择器定义变量，演示代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <style> html { --color-default: red; color: var(--color-default); } .two { --color-default: green; // 改变了属性值变量的值 color: var(--color-default); } </style> </head> <body> <p class="one">paragraph one</p> <p class="two">paragraph two</p> </body> </html>