关于css:css变量

参考链接：
阮一峰css笔记：http://www.ruanyifeng.com/blo...
MDN CSS变量教程：https://developer.mozilla.org...

浏览器反对水平：
支流古代浏览器反对

根本应用：

1、定义：

应用 -- 符号申明一个css变量，变量的值能够为任意数值

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

变量名辨别大小写，且领有作用域，个别css变量全局应用，则放到 :root 中即可

2、作用域

:root {  --color: red;}div {  --color: blue;}.box {    height: 100px;    width: 100px;    background-color: var(--color);}

<div class="box"></div><p class="box"></p>

运行html代码，失去一个蓝色的div和红色的p标签，这是受作用域的影响，和款式的优先级一样，获取变量时拿到的是最精准的作用域下的变量，id > class > 标签 > 全局

利用作用域，咱们能够做这两件罕用的操作：
（1）媒体查问批改变量

@media screen and (max-width: 375px) {  body {    --padding: 5px;  }}@media screen and (max-width: 1080px) {  body {    --padding: 15px;  }}

（2）js切换类名更换主题色

.white-theme {    --bg-color: #fff;    --color: #333;}.black-theme {    --bg-color: #333;    --color: #fff;    }

通过js切换类名，即可切换不同的变量，须要留神的是，主题类须要在节点最外层，比方body或者app类上，其次须要用到主题色的中央都要应用变量

3、调用变量：

应用 var() 函数和变量名调用变量

.red {    color: var(--theme-color);}

变量只能用做属性值，不能用做属性名

4、默认值和向下兼容：

var() 函数能够承受第二个参数，用作找不到变量时的默认值

.red {    color: var(--theme-color,red);}.red {    color: var(--theme-color, var(--color,red));}

咱们无奈保障用户应用的设施都反对css变量的个性，所以必要状况下能够进行向下兼容的解决：如果var有效，则应用前一个属性值\

.red {    color: red;    color: var(--theme-color);}

5、js操作变量

（1）检测是否反对css变量

const isSupported =  window.CSS &&  window.CSS.supports &&  window.CSS.supports('--a', 0);if (isSupported) {  /* supported */} else {  /* not supported */}

（2）操作变量

// 设置document.body.style.setProperty("--color","red");// 读取document.body.style.getPropertyValue("--color");// 删除document.body.style.removeProperty("--color");

显然，js操作变量须要在 document的环境下，在一些非凡的场合开发就无奈发挥作用了，比方uniapp中的多端等。