css的:root

参考文档: https://blog.csdn.net/weixin_51123974/article/details/122311909

有下面css写法:

:root {
    --text: #000;
    --text2: #444;
    --bg: #ffffff;
    --bg50: #ffffff80;
    --bg70: #ffffffa0;
    --sd: #22222230;
    --card: #efefef55;
    --hover: #ffffff65;
    --hover-half: #ffffff40;
    --hover-b: #1111110f;
    --bggrey: #ddd;
    --fill:#d3d3d370;
    --bgul: url('bg.svg');
    --mm: #ffffffc0;
    --cm: #fafafabb;
    --bar: #efefef37;
    --hr:#ccc;
    --unfoc:#eaeaea;
    --msg:#ffffffe7;
    --theme-1:#ad6eca;
    --theme-2:#3b91d8;
    --href:#2983cc;
    --bd:#8f8f8f30;
    --s3d:#99999947;
    --mica: linear-gradient(215deg,#ffe7f6,#a9c3ff);
}

:root

:root是一个伪类，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。

var()

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

body {
  background-color: var(--bg);
}