css 自定义变量

>>> 效果预览

CSS变量，其中包含要在整个文档中重用的特定值。

HTML

<p class="custom-variables">CSS is awesome!</p>

CSS

:root {
  --some-color: #da7800;
  --some-keyword: italic;
  --some-size: 1.25em;
  --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
}
.custom-variables {
  color: var(--some-color);
  font-size: var(--some-size);
  font-style: var(--some-keyword);
  text-shadow: var(--some-complex-value);
}

说明

变量是在:root 与表示文档的树的根元素匹配的CSS伪类。如果在块中定义变量，则变量的作用域也可以限定为选择器。

使用宣告变数--variable-name: 。

使用在整个文档中重用变量var(--variable-name) 功能。