每天60秒CSS——60秒完成iOS Dark Mode自适应

从今天开始，为大家介绍CSS小知识，篇幅不长，撒尿的功夫即可看完，争取每天一更，这是第1篇。

• 什么是CSS变量？
• 如何使用？

---

什么是CSS变量？

CSS变量(官方叫CSS自定义属性)，和其他语言里面的变量类似，允许大家通过命名指定的值，以便在CSS中重复使用。
自定义属性符号通常以"--"开头，(如 --my-color: black;) ，并通过var()函数引用(如 --color: var(--my-color);) 。自定义属性对于不同元素、组件间共享样式，起到很大的作用 (如 vertical rhythm, typography variables, color palettes 等)。

如何使用CSS变量？

主题化的需求比如黑暗模式，是CSS变量最常见的例子之一。在这样的需求场景中，我们可以通过设置CSS变量的方式，来控制整个站点的色调、主题，然后将class应用于一个共同的顶级元素（如元素或顶级容器）。

下面的样例，展示了CSS全局变量的定义子元素的继承关系：

/* Global variables are defined in the :root element. */
:root {
  --bg-color: #fff;
  --main-color: #000;
  --secondary-color: #222;
}
/* Elements inherit variables from their parents. */
body {
  background-color: var(--bg-color);
  color: var(--main-color);
}
small {
  color: var(--secondary-color);
}
/* Elements can define their own values and variables, overriding inherited ones.*/
body.dark {
  --bg-color: #080808;
  --main-color: #fff;
  --secondary-color: #ccc;
}

自定义变量一个相当有用的地方是，我们可以为某个元素的不同表现方式定义共享样式，而不必一遍又一遍的copy样式。举个例子：

.btn {
  --bg-color: #002299;
  --text-color: #fff;
  --highlight-color: #669900;
​
  background-color: var(--bg-color);
  color: var(--text-color);
}
/* --highlight-color is also available to the children of .btn */
.btn .highlight {
  color: var(--highlight-color);
}
/* .btn.danger .highlight will use the --highlight-color defined in .btn-danger */
.btn-danger {
  --bg-color: #dd4a68;
  --text-color: #000;
  --highlight-color: #990055;
}

最后，记住以下几条处理CSS变量的小技巧，并灵活使用：

• var()函数可以通过第二个参数来设置回调callback值，(如 var(--text-color, black));当--text-color变量没有定义时，默认是black。

• CSS变量是大小写敏感的，同时，还可以像其他HTML样式一样，写在行内 (如

  )。

• CSS变量可以嵌套使用，比如将其他变量作为回调callback(如 var(--main-color, var(--other-color)))，或者传入其他函数如calc()，甚至是把var()函数赋值给另外一个变量(如 var(--main-color, var(--other-color)))。

本文由博客群发一文多发等运营工具平台 OpenWrite 发布