CSS相关知识补充

:root伪类

css自定义变量和var()引用自定义变量

https://developer.mozilla.org/zh-CN/docs/Web/CSS/var

在 SCSS 中，变量的声明和使用是用 $ 符号，比如：

$primary-color: #ff5722;

.button {
  color: $primary-color;
}

SCSS 里没有 var() 这个函数，定义变量用 $变量名。

var() 是 原生 CSS 变量 的语法，不是 SCSS 的。
用法如下：

:root {
  --main-color: #ff5722;
}

.button {
  color: var(--main-color);
}

• --main-color 是 CSS 变量（自定义属性）。
• var(--main-color) 用来引用 CSS 变量的值。

其中，CSS 变量（自定义属性）必须以 – 开头，否则不是合法的 CSS 变量。

当然，也可以用scss变量生成css变量，语法如下：

$main-color: #ff5722;

:root {
  --main-color: #{$main-color};
}
.button {
  color: var(--main-color);
}

总结：

• var(--xxx) 是CSS 变量的引用语法，不是 SCSS 变量。
• SCSS 变量用 $变量名，只能在 SCSS 里用，编译后就消失了。
• CSS 变量用 --变量名，可以用 var(--变量名) 在 CSS/SCSS 中引用，编译后依然存在于最终的 CSS 里。