CSS3 使用变量

CSS 变量这个主要的功能目前所有主流浏览器都已经支持。CSS变量的支持让CSS变得更加强大，本文将会对CSS变量进行讲解如何使用。

CSS 变量声明

和很对变成语言中的方式相似，变量使用前首先要对变量进行声明。

CSS中变量的声明方式是变量前面带上--的两个连接线。

CSS变量的声明分两种，一种是局部变量声明，它在选择器内容定义，只能在选择器body中使用它门，例如：

body{
	--green:#006600;
	--fsize:14px;
}

一种是全局变量，定义在:root选择器中，:root表示匹配文档的根元素，可以整个文档中使用它们，例如:

:root{
	--bgcolor:#006600;
	--fontsize:14px;
}

为什么 CSS 变量定义中会采用--作为定义变量的方式呢？那是因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，所以官方的 CSS 变量就改用两根连词线了。

注意：CSS 变量名大小写敏感，--bgcolor和--Bgcolor是两个不同变量。

CSS var() 函数

在 CSS 中 var() 函数用来读取定义的 CSS 变量，语法格式如下：

var(name, value)

• 第一个参数name 是必填参数，表示读取的变量名；

• 第二个参数value是可选参数，表示未读取到参数是的默认值。

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

示例：

:root{
	--bgcolor:#006600;
	--fontsize:14px;
}
div{
	background-color:var(--bgcolor);
	font-size:var(--fsize);
}
p{
	background-color:var(--gcolor,#7F583F);
	font-size:var(--size,15px);
}

第二个参数不处理内部的逗号或空格，都视作参数的一部分。

var(--font-style, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var()函数还可以用在变量的声明。

:root {
  --bgcolor: red;
  --logo-text: var(--bgcolor);
}

注意，变量值只能用作属性值，不能用作属性名。

.logo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

上面代码中，变量--side用作属性名，这是无效的。

CSS 变量值的类型

字符串类型：如果变量值为字符串，可以和另外一个字符串进行拼接。

--bar: 'hello';
--foo: var(--bar)' world';

数值类型：变量值是数值，不能与数值单位直接连用。

.logo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

如果要想达到让数值和单位连用效果，我们可以通过使用calc()函数来实现这种方式。

.logo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

需要注意，如果定义的变量值带有单位，就不能写成字符串形式，例如：

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

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

CSS变量作用域

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

上面代码中，三个选择器都声明了--color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。

所以说，变量的作用域就是它所在的选择器的有效范围。