CSS3中以变量形式调用【像less或sass这种css扩展语言定义变量】

这里用 less 来举例

平时我们用 less 声明、使用变量，方式是这样的：

header.less 文件：

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

css3 自己有声明变量的方式，用 :root 这个伪类包含，样式变量名用 -- 开头，用 var() 函数调用：

var()

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。

:root

:root是一个伪类，表示文档根元素，ie8及以上版本和其他主流浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用

比如：
variables.css 文件：

:root {
  --main-bg-color: green;  
  --font-weight: bold;
  --color-main:yellow;
}

a.css 文件：

@import 'variables.css';

#div1 {
  background-color: var(--main-bg-color);
  padding: 5px;
  font-weight: var(--font-weight);
  color: var(--color-main);
}