css变量(css自定义属性)的声明及使用

css变量可以称作css自定义属性，许多css中重复的值就可以用这个变量来表示，如果要修改的话那么修改变量的值就可以做到统一修改而不用一个一个在css中找出来进行修改

1）在body中声明了一个局部变量 --main-bg-color，这个变量的作用域只在body中，只有在body选择器中才可以使用

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

2）全局的变量要放在：root中，确保任何选择器都可以使用这个变量

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

3）变量的使用

body {
     
	backgroung-color: var(--main-bg-color);
}

4）响应式布局的变量，这样在不同屏幕宽度中变量的值也就不同了

@media screen and (min-width: 768px) {
     
    body {
     
      --primary:  #F7EFD2;
      --secondary: #7F583F;
    }
}

5）JavaScript操作css变量

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

一些对css无效的信息也可以放入css变量中，如：

--foo: if(x > 10) this.width = 10;

所以css变量提供了css和JavaScript的一种通信途径