大家好，我是半夏，一个刚刚开始写文的沙雕程序员.如果喜爱我的文章，能够关注➕ 点赞 加我微信：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: 20pxdiv { 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');