css 自定义变量

最近太无聊，研究下CSS，发现了css可以自定义变量，是我跟不上时代的步伐了嘛？这可不行，我还是要紧跟上的。就了解了下。
总结下方便以后忘记了回顾。
这个写法的好处可能是减少了css代码冗余的问题吧
1.声明自定义变量，CSS中变量的定义方法是以两个“破折号”开头，后面跟变量名

:root{
  --main-color:#54BBCE;
}

估计大家会问为啥用:root?

因为用:root能够在整个文档中访问它。如果我们只在特定的选择器中定义变量，那么只对那个选择器可用。

2.使用自定义变量，我们要用到关键字var()，var关键字有两个参数。第一个是要替换的自定义属性的名称，第二个是回退值，在引用的自定义属性无效时使用。

p{
     color: var(--main-color);
    background-color: var(--main-colors, #999AAA);
        }

p{
            font-size: var(--main-color, 30px);
        }

完整代码

    
    
    
    
    


css变量