CSS 中的 :root

CSS 中的 :root：https://blog.csdn.net/weixin_51123974/article/details/122311909?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169873849916800192266666%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=169873849916800192266666&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-1-122311909-null-null.142^v96^pc_search_result_base1&utm_term=%3Aroot&spm=1018.2226.3001.4187

 

在网站上找素材时发现了一个未见过的css写法(本人并未系统学习过css，诸君勿喷)，觉得挺不错，于是写这个文章记录一下，以便以后查阅。

:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1600px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont;
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
}
:root
:root是一个伪类，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。

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

body {
background-color: var(--blue); /* 设置背景颜色为蓝色 */
}