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) views1505 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • Blender2.7给平面模型添加纹理贴图

    在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • CSS3特性查询(Feature Query: @supports)功能简介

    这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • S3TC(S3 Texture Compression)纹理压缩格式详解

    使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • 如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合

  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...

  • inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...

  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Proce...

  • 更多...