CSS变量应该称之为 CSS 自定义属性 ，不过下文为了好理解都称之为 CSS 变量。

一直以来我们都知道，CSS 中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者 LESS 这类预编译器。

这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文主要介绍如何使用它，我们发现css如此强大，这是一个令人激动的革新，下面写个简单的demo来感受下CSS变量的强悍：

See the Pen css变量 by kevin ( @it_hack ) on CodePen .

变量声明

声明变量的时候，变量名前面要加两根连词线（ -- ）

1
2
3

:root {
  --color: red;
}

变量使用

var() 函数用于读取变量。

1

background-color:var(--backgroundColor)

1

background-color: var(--backgroundColor, #7F583F);

1
2
3
4
5

body{
  --side:margin-top;
  /* 无效 */
  var(--side): 20px;//变量--side用作属性名，这是无效的。
}

变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接。如例1中：

1
2
3
4

body:after{
  content: var(--con)" word";
  color:var(--color);
}

1
2
3
4

body {
  --top: 20;
  padding-top: calc(var(--top) * 1px);//calc会在css变量下边讲解
}

1
2
3
4
5
6
7
8
9
10
11

/* 无效 */
.body {
  --size: '20px';
  font-size: var(--size);
}

/* 有效 */
.body {
  --size: 20px;
  font-size: var(--size);
}

CSS 变量的层叠与作用域

CSS 变量是支持继承的，不过这里说成级联或者层叠应该更贴切。

1
2
3
4
5
6
7
8
9

:root {
  --color: red;
  --backgroundColor: #F7EFD2;
  --con:'hello';
}
h2{
  --color: #00cc19;
  color:var(--color)
}

calc()方法

之前在 大漠 和 阮一峰 的博客中看到过calc的介绍，但一直没有使用和研究，今天接着这个css变量的机会我来一次demo，如有不对和错误的地方还请指出；

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()能做什么？
calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

calc()语法
calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

1

width: calc(expression);

其中”expression”是一个表达式，用来计算长度的表达式。

calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：

下边我们感受下calc的强大：

See the Pen calc() by kevin ( @it_hack ) on CodePen .

下面让我们看看都有那些浏览器支持calc()

不知道大家对calc()整明白了没有，要是没有的话，继续动手写几个例子吧。如果您有更好的分享，记得告诉我哟。