大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！
原文链接 ==>http://sylblog.xin/archives/43
前言
大部分的编程语言，在语言出现的那一刻就支持变量。但是，CSS一开始就不支持原生变量。所以大家开始选择SCSS,LESS等兼容的 CSS 扩展语言。不过庆幸的是CSS目前也已经支持变量。
定义变量
在JS中变量可以这样生命：
var variable;在CSS中，变量是以两个-开始的。
div { --divWidth: 100px}变量作用域
全局作用域 :root
:root { --bk-color: red}局部作用域
div { --divWidth: 100px}不同作用域可以出现同样的变量
div { --divWidth: 100px}
span { --divWidth: 100px}变量名区分大小写
:root {
--color: blue;
--COLOR: red;
}使用变量
在SCSS中我们是这样定义并使用变量的：
$font-size: 20px
div { font-size: $font-size}在CSS中，提供了var()函数来使用变量，
上边的SCSS就可以转成这样
:root { --font-size: 16px}
.div { font-size: var(--font-size)}注意：请不要使用已有的属性名称作为变量值。也请不要使用var来做属性名称。
下面这个例子是错误的：
:root { --fontSize: font-size}
.div { var(--fontSize): 16px}可以继承
可以在@media中进行修改
可以在 HTML 的 style 属性中使用
<html lang="en" style="--color: red;">
.father {
font-size: 100px;
color: var(--color);
}
<div class="father" --style="">123123</div>
浏览器如何解析
先上CSS
:root {
--color: blue;
}
div {
--color: green;
}
#child2 {
--color: red;
}
* {
color: var(--color);
}使用上面的变量声明，以下元素的颜色是什么？
<p>我是p</p>
<div>我是div1
<div id='child1'>我是div1的儿子</div>
</div>
<div id="child2">
我是div2
<p>我是div2的儿子</p>
</div>第一段将是blue。选择器--color上没有设置直接定义p，因此它继承了值:root
第一个div将是green。这很清楚。div { --color: green;}
第一个div的p将是green,继承自div1.
该div用的child2将不会是绿色的。这将是red，#child2 {--color: red;}
第一个div的p将是red,继承自div2.
JS操作
修改:root的变量
document.body.style.setProperty('--color', '#7F583F');
document.body.style.getPropertyValue('--color').trim();
document.body.style.removeProperty('--color');
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。