css变量

定义

• 使用 -- 开头，属性值可以任何合法的css属性值.

• 大小写敏感，使用**var(xxx)**方法获取自定义属性值(xxx为完整的变量名, 包含 --)

<!-- 定义 -->
:root {
  --color: #f0f0f0;
  --Color: #0f0f0f;
  --chaos-zhu: 100px;
  --num_1: 1;
}

<!-- 使用 -->

div {
  color: var(--color) <!-- var()方法里面填写完整的变量名 -->
}

作用域查找

• 在任何style样式中可以定义变量

<!-- 全局变量 -->
:root {
  --base-color: pink;
}
<!-- p的父元素 -->
.app {
  --base-color: pink;
}
<!-- 先从自身找, 然后往父元素一层一层网上找 -->
.app p {
  <!-- --base-color: red; -->
  color: var(--base-color);
}

兼容性问题

IE全军覆没，其他浏览器兼容性OK

caniuse