使用纯CSS定义变量, 然后全局调用

使用纯CSS定义变量, 然后全局调用

这里在vue框架下使用为例子

定义好全局的css变量
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。
自定义属性 (–*)：CSS 变量 带有前缀–的属性名，比如–example–name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用的。

/* 白色主题 */
:root {
  --lz-bg-color: pink;
  --lz-text-color: #333;
  --lz-border-color: #ccc;
}

在main.js中导入

import "./style/index.scss"

这个时候可以看到审查元素中的样式多了刚刚添加的几个变量

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

div {
  font-size: 30px;
  background-color: var(--lz-bg-color);
}