在之后学习了Less的时候，我们知道less中有变量这个东西，变量是个好东西啊，现在css3也提供了内置的变量使用方式：

变量的定义和使用

注意，我们可以在任意选择器中定义变量，但是该变量只能被该元素的子元素使用，也就是说如果希望全局都可以使用该变量，那么最好直接定义在最大的根元素上，比如 html。
首先，我们在一个选择器中，定义一个变量，变量必须以双短横杆 — 开头 :

  1. html {
  2.   --color-red: red
  3. }

这样我们就定义完一个变量了，是不是很简单。
然后我们在该选择器下的子元素中使用该变量，使用内置的 var() 方法获取该变量的值。

使用变量：var(变量名，?代替值)

var()函数的第一个参数接受一个父元素中定义的变量名，第二个参数可选，当没有成功获取到该变量时，使用第二个参数作为代替。

div {
  color: var(--color-red, red)
}

这样，我们就成功引用该变量了，现在如果希望全局修改一个样式，那么只需要修改这个变量的值即可。是不是和less一样方便呢？

常用的定义变量的位置：:root 和 html

在实际开发中，我们一般会将变量直接定义在最大的选择器中，也就是 html 标签，但是html的选择器我们一般要用来写样式，如果还要加上变量定义，整个选择器就会很乱。所有我们一般定义在 :root 选择器中，在 html4 中 :root 默认就是 html，在 html5中，可以作为伪类使用，表示当前选择器的根元素，如果没有跟在选择器后面，则默认是html：

:root {
  --color-canvas-default-transparent: rgba(255,255,255,0);
  --color-page-header-bg: #f6f8fa;
  --color-marketing-icon-primary: #218bff;
  --color-marketing-icon-secondary: #54aeff;
  --color-diff-blob-addition-num-text: #24292f;
  --color-diff-blob-addition-fg: #24292f;
  --color-diff-blob-deletion-word-bg: rgba(255,129,130,0.4);
  --color-diff-blob-hunk-num-bg: rgba(84,174,255,0.4);
}

这样，之后在全局中都能通过 var 来使用这些变量了。

通过JS修改这些变量值

虽然css定义变量很方便，但毕竟还是静态的数据，如果不借助JS还是要手动修改的。首先我们先知道，变量不是属性，直接在 element.style 中是看不见的，但是！它只是被当成了一个属性，我们可以通过 getPropertyValue() 和 setProperty() 来获取和设置该变量。

setProperty方法

setProperty() 方法用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性。其实这本来就是 JS 给每个对象都有的方法：

object.setProperty(propertyname, value, priority)
  1. propertyname 必需。一个字符串，表示创建或修改的属性。
  2. value 可选，新的属性值。
  3. priority 可选。字符串，规定是否需要设置属性的优先级 important。
    可以是下面三个值

“important”
undefined
“”空字符串
设置CSS 样式

document.documentElement.style.setProperty("--color-red", "pink");

其中，document.documentElement获取到的是网页的根元素，即html根标签，即:root选择器对应的元素。当然，如果你没记起来也可以用传统的方式。

document.querySelector("html").style.setProperty("--color-red", "pink");

总结

  1. 在:root中定义以–开头的变量，如 —theme-bg
  2. 在后代元素的css中，就能使用 —theme-bg变量作为css的值（注意要使用var()将变量包起来）
  3. 通过element.style.setProperty修改这个—theme-bg的值，修改后css中的值也就改变了。

注：
当尺寸使用var作为变量时，就不能再使用flexible插件转为rem尺寸了。
var中使用其它css函数时也可以生效