• 2017年3月,微软宣布 Edge 浏览器将支持 CSS 变量。
    这个重要的 CSS 新功能,所有主要浏览器已经都支持了。

  • 声明css变量的时候,变量名前面要加两根连词线(--)。
    变量名大小写敏感,--header-color和--Header-Color是两个不同变量。

  • var()函数用于读取变量。
    var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
    第二个参数不处理内部的逗号或空格,都视作参数的一部分。

如果变量值是一个字符串,可以与其他字符串拼接。
如果变量值是数值,不能与数值单位直接连用。必须使用calc()函数,将它们连接。

.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
.foo {
--gap: 20;
/* 有效 */
margin-top: calc(var(--gap) * 1px);
}

如果变量值带有单位,就不能写成字符串。

/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
} /* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);
}

===同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的"层叠"(cascade)规则是一致的。
全局的变量通常放在根元素:root里面,确保任何选择器都可以读取它们

:root {
--main-color: #06c;
}

===对于不支持 CSS 变量的浏览器,可以采用下面的写法。

a {
color: #7F583F;
color: var(--primary);
}

也可以使用@support命令进行检测

@supports ( (--a: 0)) {
/* supported */
} @supports ( not (--a: 0)) {
/* not supported */
}

===JavaScript 也可以检测浏览器是否支持 CSS 变量。

const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0); if (isSupported) {
/* supported */
} else {
/* not supported */
}

JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--primary', '#7F583F'); // 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F' // 删除变量
document.body.style.removeProperty('--primary');

这意味着,JavaScript 可以将任意值存入样式表。

那些对 CSS 无用的信息,也可以放入 CSS 变量。

--foo: if(x > 5) this.width = 10;

上面代码中,--foo的值在 CSS 里面是无效语句,但是可以被 JavaScript 读取。这意味着,可以把样式设置写在 CSS 变量中,让 JavaScript 读取。
所以,CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。

css中使用变量的更多相关文章

  1. css中定义变量

    css中定义变量 定义变量可分多种情况: 1.定义全局变量 :root { --borderColor: #ccc;} 2.定义某元素下的变量 .look{ --borderColor: #ccc;} ...

  2. 在原生CSS中使用变量

    本文首发于我的博客 一直以来,CSS作为一种申明式的样式标记语言,很难像如javascript等命令式编程语言一样通过定义和使用变量的方式来维护和追踪某些状态.后来随着scss,less等CSS预处理 ...

  3. 如何在CSS中使用变量

    前言 CSS变量(官方称为自定义属性)是用户定义的值,它可以在你的代码库中设置一次并多次使用.它们使管理颜色.字体.大小和动画值变得更加容易,并确保整个web应用的一致性. 举个例子,你可以将品牌颜色 ...

  4. CSS中的变量使用,var()语法

    参考博客:https://blog.csdn.net/qq_34206361/article/details/53690414

  5. 原生css 中变量的使用

    前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 ...

  6. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  7. 了解CSS/CSS3原生变量var

    一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...

  8. smarty中的变量使用

    在模板中输出动态数据可以用{},所以容易与css中的标签相互冲突,所以使用{literal}{/literal}标签包起来就不会用模板的解析方式解析,变量的来源有三种,用assign方法赋值,系统保留 ...

  9. less中的变量

     [less中的变量]1.声明变量:@变量名:变量值:使用变量:@变量名:[less中变量的类型]1.数字 数字px2.字符串:无引号字符串 red blue 有引号 "haha" ...

随机推荐

  1. 详解Tomcat 配置文件server.xml

    前言 Tomcat隶属于Apache基金会,是开源的轻量级Web应用服务器,使用非常广泛.server.xml是Tomcat中最重要的配置文件,server.xml的每一个元素都对应了Tomcat中的 ...

  2. Nagios部署与配置

    Nagos是一款开源电脑系统和网络监视工具,能够有效监控windows,linux,Uninx的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报警第一时间通知运维人员 ...

  3. 白话ASP.NET MVC之二:Controller激活系统的概览

    前文简介:我们抽象类路由规则的对象,RouteBase是路由对象的抽象基类,ASP.NET 的路由系统中有唯一一个从RouteBase继承的路由对象,那就是Route类型了.我们注册了路由对象Rout ...

  4. c++ 智能指针【转载】

    zero 坐在餐桌前,机械的重复“夹菜 -> 咀嚼 -> 吞咽”的动作序列,脸上用无形的大字写着:我心不在焉.在他的对面坐着 Solmyr ,慢条斯理的吃着他那份午餐,维持着他一贯很有修养 ...

  5. dfs+剪枝:poj2362

    贴题目 Square Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 24604   Accepted: 8449 Descr ...

  6. PHP程序中的文件锁、互斥锁、读写锁使用技巧解析

    文件锁全名叫 advisory file lock, 书中有提及. 这类锁比较常见,例如 mysql, php-fpm 启动之后都会有一个pid文件记录了进程id,这个文件就是文件锁. 这个锁可以防止 ...

  7. 字符串拼接data-id时注意事项

    今天测试下一个ajax请求,结果后台接收不到data-id的数据,导致后台无法进行正确的数据库查询. 我的评论页面是使用字符串拼接后,再放到页面里的,其中有关data-id的部分是这样的: '< ...

  8. 设计模式(3)--SimpleFactory( [1] 简单工厂模式)--创建型

    1.模式定义: 简单工厂模式是类的创建模式,又叫做静态工厂方法(Static Factory Method)模式.简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例. 2.模式特点: 实现方式的 ...

  9. storm学习笔记(一)

    1.storm介绍         storm是一种用于事件流处理的分布式计算框架,它是有BackType公司开发的一个项目,于2014年9月加入了Apahche孵化器计划并成为其旗下的顶级项目之一. ...

  10. nodejs 语法学习(持续更新)

    合并objects var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o ...