简单介绍 CSS Variables

MockingBird

css3

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

如何定义和使用 CSS Variables

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

: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); ),表示备选参数,第一个参数获取失败的时候,它就生效了。

  • 变量也是可用嵌套的:

--base-color: #f93ce9;
--background-gradient: linear-gradient(to top, var(--base-color), #444);
  • 变量还可以更另一个CSS特性——calc()方法一起使用:

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

本文来自我的博客:http://blog.mcbird.cn/2016/03/09/css-variables/

阅读 2.2k

MockingBird 博客
用作博客,记录学习笔记,收藏有价值的文章

_

5.7k 声望
701 粉丝
0 条评论
你知道吗?

_

5.7k 声望
701 粉丝
宣传栏