小白篇 -- CSS 变量实践使用CSS自定义属性（变量） - CSS（层叠样式表）

基本用法

声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的CSS值。

:root {
  --main-bg-color: brown;
}

通常定义在 :root 下面，这样就可以在项目任意位置访问并使用它了。

:root CSS 伪类，它指的是 HTML 文档中最顶层的元素。在网页中，这始终是 <html> 元素，事实上，:root 选择器与 html 选择器几乎完全相同。（对于那些好奇的人来说，唯一的区别 :root 是稍微更具体一些。所以如果你同时使用了这两个选择器，应用到的样式 :root将优先。）

不过，有时候你想限制其使用范围，那么可以这样去定义：

element {
  --mian-bg-color: brown;
}

⚠️ 自定义属性名是大小写敏感。

如果去使用CSS变量到话，则需要用到 var() 函数。

element {
  background: var(--main-bg-color);
}

CSS 变量继承性

如上所述，当在 :root 定义了一个变量，在底下 element 定义了一个同名变量，那么 element 下的元素会继承最近的父元素。

:root {
  --main-bg-color: brown;
}

.one {
  --main-bg-color: blue;
  background-color: var(--main-bg-color); /* blue */
}

.two {
  background-color: var(--main-bg-color); /* brown */
}

<div class="main">
  <div class="one">Hello</div>
  <div class="two">Hello</div>
</div>

CSS 变量备用值

.two {
  background-color: var(--main-bg-color,red); /* 如果未定义--my-var，则为红色 */
}

还可以这样：var(--main-bg-color, red, blue) ，还有些 fallback 使用，详见文档。

在 JavaScript 中的使用

JavaScript 也可以检测浏览器是否支持 CSS 变量

const isSupportedCSS =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupportedCSS) {
  /* supported */
} else {
  /* not supported */
}

在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的：

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

不知道什么原因，使用 :root 定义的变量，document.documentElement.style.getPropertyValue('--main-bg-color') 这种方式获取不到，需要用这种方式获取值 getComputedStyle(document.documentElement).getPropertyValue('--main-bg-color') 。

其他

结合 `calc()` 使用

:root {
  --base-unit: 16px;
}
.container {
  font-size: calc( var(--base-unit) * 1.2);
  padding: calc( var(--base-unit) * 1.5);
  margin-bottom: calc( var(--base-unit) / 2);
}

使用媒体查询重新定义 CSS 变量

:root {
  --base-unit: 12px;
}
 
@media (min-width: 600px){
  :root {
    --base-unit: 16px;
  }
}
 
@media (min-width: 900px) {
  :root {
    --base-unit: 22px;
  }
}

使用场景

目前能想到的是：

统一管理变量；
减少重复代码量；

切换主题模式；

:root {
  --main-bg-color: brown;
}

:root[theme='dark'] {
  --main-bg-color: black;
}

<html></html>

**<!-- or -->**

<html theme="dark"></html>

小白篇 -- 暗黑（主题）模式几种实现方式探究

小白篇 -- CSS 变量实践