CSS 变量（自定义属性）-Arvin Xiang

基本用法

通过两个减号（--）来声明一个自定义属性，属性值则可以是任何有效的 CSS 值。

通过 var() 来获取自定义属性值。

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

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

自定义属性区分大小写

--my-color 和 --My-color 会被认为是两个不同的自定义属性。

fallback

fallback 的值是和 css 一样的书写规则，不需要引号。

/* right */
--padding: var(--tooltip-padding, 6px);

/* wrong */
--padding: var(--tooltip-padding, '6px');

fallback 如果是 CSS 值，允许直接嵌套

/* right */
--border-radius: var(--tooltip-border-radius, 12px, 8px);

/* wrong */
--border-radius: var(--tooltip-border-radius, '12px, 8px');

fallback 的值也可使用自定义属性

/* right */
--border-radius: var(--tooltip-border-radius, var(--border-radius-medium));

/* wrong */
--border-radius: var(--tooltip-border-radius, --border-radius-medium);

/* right */
--border-radius: var(--tooltip-border-radius, var(--border-radius-medium, 8px));

/* wrong */
--border-radius: var(--tooltip-border-radius, --border-radius-medium, 8px);

有效性

当使用了无效的变量时，会直接使用初始值，而不是前一个值。

:root {
  --text-color: 16px;
}
p {
  color: blue;
}
p {
  color: var(--text-color);
}

虽然 color: 16px 是错误的，但是 blue 不会生效，而是默认值生效（比如黑色）。

参考

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