CSS3原生变量(Native Variables)新特性简介

iefreer 发表于 2017-02-07 12:35:59

标签: css3, 基础知识, 变量

- +

对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!

变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。

这样CSS看起来更像一门样式“语言”了。在这之前,我们得使用SASS(SCSS)预编译方式来支持变量,现在你可以直接在CSS代码中使用变量。该特性的规范描述在CSS3级联变量模块的自定义属性中,提供了一种方法来让开发者定义变量,并赋值给CSS属性(property)。

和SASS预处理器相比,这种CSS原生变量可以被JS脚本所动态操作,可以实现更好的交互体验和动画效果。

语法格式
:root {
    --base: #BADA55;
}
.hl {
    color: var(--base);
}

上面的代码在根伪元素中声明了一个--base变量,通过var()的形式赋值给class为h1的所有元素的color属性。

可继承性

我们知道CSS的样式具有可继承性,变量形的属性值也类似。

比如下面的HTML代码:

<div class="one">
  <div class="two">
    <div class="three">
    </div>
    <div class="four">
    </div>
  <div>
</div>

样式代码如下:

.two {
  --test: 10px;
}
.three {
  --test: 2em;
}

那么.four的--test变量值为10px(继承自two),.three为2em,而.one元素的--test变量未定义。

浏览器兼容性

除IE外,所有主流浏览器都已支持,移动手机上对于Android需要使用Chrome 49.0+,而iPhone上需要Safari 9.1+。

在线实例

1. 使用CSS3变量和JS动态改变元素颜色

2. 使用CSS3变量实现的进度条界面组件

possitive(2) negative(0) views765 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章