css变量的定义和使用

CSS 变量（CSS Variables），也称作 CSS 自定义属性（CSS Custom Properties），它是带有前缀 – 属性名，且带有值的自定义属性。然后通过 var 函数在全文范围复用

1.定义 CSS 变量，在变量前加“–”：

--<custom-property-name>: <declaration-value>

custom-property-name ：变量名称
declaration-value：变量值
「变量名称」命名约束是比较宽松的，可以是数字、字母、下划线 _、短横线 - 的组合，但不能包含 $、[、^、(、% 等字符
例如：

--some-keyword: left;
--some-color: #f00;
--some-complex-value: 3px 6px rgb(20, 32, 54);

可以是数字开头、也可以是中文等

 --红色: #f00; /* 有效 */
 --1: 1px; /* 有效 */
 
body {
 background-color: var(--红色);
 height: var(--1);
}

2.使用
它必须通过 var() 函数复用之后，才会产生意义

body {
 background-color: var(--some-color);
 height: var(--some-height);
}

3.作用域
同一个 CSS 变量，可以在多个选择器内声明，读取顺序与 CSS 匹配规则一致，优先级最高的生效。CSS 变量没有 !important 用法，由选择器权重决定。

一般情况下，全局性变量放在 :root 内声明，也可以在任意元素中声明 CSS 变量，视实际情况而定即可。如果是小程序，则在全局样式 app.wxss 的 page 内声明

:root 表示 html元素，除了优先级更高之外，与 html 选择器相同。

:root {
  --theme-primary: #f00; /* 全局可复用 */
}
header {
  --theme-primary: #0f0; /* 仅 header 范围内可复用 */
}
section {
  --theme-primary: #00f; /* 仅 section 范围内可复用 */
}

在 <div id="error"></div> 中引用 --color 变量，最终生效的是 ID 选择器的变量值

:root {
  --color: #f00;
}
div {
  --color: #0f0;
}
#id {
  --color: #00f;
}

4.兼容性
对于不支持 CSS 变量的浏览器，可以采用如下方式兼容处理

:root {
  --color-primary: #00f;
}
a {
  color: #00f;
  color: var(--color-primary);
}

也可以使用 @supports 规则，然而它也不兼容 IE 浏览器

@supports (--foo: 0) {
  /* supported */
}
@supports (not (--foo: 0)) {
  /* unsupported */
}

5.JavaScript 操作
利用 CSS.supports() 方法即可判断当前浏览器是否支持 CSS 变量

const isSupported = window.CSS.supports('--foo', 0)

const element = document.querySelector('selectors')
// 定义 CSS 变量
element.style.setProperty('--color', '#f00')
// 读取 CSS 变量
element.style.getPropertyValue('--color', '#f00')
// 删除 CSS 变量
element.style.removeProperty('--color')