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

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 哟嚯音乐网

    哟嚯音乐网
    https://www.wvwvwvvv.com/

  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文...

  • 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...

  • 函数式JavaScript编程基础概念:Curry和Partial Application

    本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...

  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...

  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...

  • 如何实现SVG clipPath自适应被裁剪对象

    CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
    clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...

  • WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

    在教程2中,我们已经讲述了计算机图形处理硬件结构和流水线。在本文中,我们将开始讲述WebGL的具体应用程序编程接口(API)。WebGL应用程序编程步骤分为以下几步:
    创建一个canvas元素从canvas中获取webgl渲染...

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

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

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

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

  • 使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

    要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...

  • Three.js 开发基础知识 - 绘制3D对象

    Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...

  • 更多...