从今天开始，为大家介绍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应用于一个共同的顶级元素（如<body>元素或顶级容器）。
下面的样例，展示了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样式一样，写在行内 (如
<div style="--text-color: red">)。CSS变量可以嵌套使用，比如将其他变量作为回调callback(如
var(--main-color, var(--other-color)))，或者传入其他函数如calc()，甚至是把var()函数赋值给另外一个变量(如var(--main-color, var(--other-color)))。
本文由博客群发一文多发等运营工具平台 OpenWrite 发布
