css自定义属性

css自定义属性分为全局定义属性和局部定义属性。

一：全局

　　1.定义：

　　：root{    //此处的root是固定的。

　　　　--them-color:blue;    //自定义属性时以--开头，告诉浏览器这是自定义的。

　　}

　　2.使用：

　　

　　

111

二：局部

　　1：定义

　　.foo{

　　  --them-color:yellow;

　　}

　.div{

　　color:var(--them-color);

　　}

　　2:使用：

　　

121321

 //此处的foo相当于一个基类，目的是存取所有的属性值，他的子元素从这个库里取属性。

 

例子：

   

 

四：总结

在一个组件里或者全局将经常使用的属性提取出来，比如主题色，用的时候直接使用变量。便于维护代码，改的时候直接改一处即可。

转载于:https://www.cnblogs.com/ww93/p/7088634.html