简单介绍 CSS Variables

发表于   |   分类于   |  

css3

如果我们用过动态样式语言（像 Less、 Sass ）的话，肯定对其中可以定义变量的特性非常喜欢，特别是随着样式文件越来越复杂的时候，把一些值抽成变量会使代码更好维护。现在随着 CSS 的发展，目前 CSS Variables 也引入了自己的变量，本文就对 CSS Variables 进行简单的介绍。

如何定义和使用 CSS Variables

按照 CSS Variables 规范，我们通过 --* 的方式来创建一个CSS变量，并通过 var(--foo) 的方式来引用一个变量（大小写敏感哦）。例如：

1
2
3
4
5
6
7
:root {
	--brand-primary: #338800;
}

body {
	background-color: var(--brand-primary);
}

CSS变量同样是可嵌套使用的，:root用来定义全局变量

浏览器兼容性

我在写这篇文章的时候，这个特性依然处于实验阶段，所以，目前来说，只有 FireFox 34+ 、 Chrome 49+ 以及 Safari 9.1+ 支持了这个特性。另外， Chrome 48 其实也支持了这个特性，用户需要在浏览器地址栏输入 chrome://flag/ 找到“Enable experimental Web Platform”选项开启才行。
css variables 兼容性

还有一些你该知道的

  • var() 还可以接受第二个参数（ color: var(--header-color, blue); ），表示备选参数，第一个参数获取失败的时候，它就生效了。

  • 变量也是可用嵌套的：

    1
    2
    --base-color: #f93ce9;
    --background-gradient: linear-gradient(to top, var(--base-color), #444);

  • 变量还可以更另一个CSS特性——calc()方法一起使用：

    1
    2
    --container-width: 1000px;
    max-width: calc(var(--container-width) / 2);