CSS 中的 :root

在网站上找素材时发现了一个未见过的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);  /* 设置背景颜色为蓝色 */
}

标签：--,breakpoint,var,root,选择器,CSS,属性
来源： https://blog.csdn.net/weixin_51123974/article/details/122311909