• 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中的变量使用,var()语法

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

  3. 原生css 中变量的使用

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

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

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

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

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

  6. smarty中的变量使用

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

  7. less中的变量

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

  8. 了解CSS/CSS3原生变量var (转)

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

  9. CSS中的margin、border和padding的区别

    aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA

随机推荐

  1. Bootstrap Typeahead/Jquery autocomplete自动补全

    使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...

  2. es增量自定义更新的脚本

    安装需要可软件 sudo apt-get install python-pip sudo pip install elasticsearch; sudo apt-get install python- ...

  3. C# volatile与lock

    一.C#中volatile volatile是C#中用于控制同步的关键字,其意义是针对程序中一些敏感数据,不允许多线程同时访问,保证数据在任何访问时刻,最多有一个线程访问,以保证数据的完整性,vola ...

  4. 【转】Android实例剖析笔记(二)--用实例讲解Andriod的开发过程,以NotesList为实例介绍Android的菜单机制

    原文网址:http://kb.cnblogs.com/page/78304/ 简介 android提供了三种菜单类型,分别为options menu,context menu,sub menu. op ...

  5. Centos6.x 64位 安装JDK

    JDK下载地址: http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk7-downloads-1880260-zhs.html ...

  6. css案例学习之用thead、tbody、tfoot实现漂亮的table布局

    首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...

  7. Windows Mobile 6 sdk installation error, COM3 in use,please check the implementation

    问题:Windows Mobile 6 sdk installation error, COM3 in use,please check the implementation 1. Windows-& ...

  8. eclipse手动安装svn和maven

    一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tigri ...

  9. 关于FGPA的复位

    关于FGPA的复位 当初开始学FPGA的时候,总是疑惑:FPGA不是没有复位管教么,但总在always看到有复位信号.这个复位信号(我们暂且称为rst_n)从哪里来? 实际上是可以从两个方面获得的,这 ...

  10. P1319 压缩技术

    很多小伙伴卡在此题的原因可能是因为不知道怎么让它输入无限个数字吧?除了用string,在这里我是看到“压缩码保证 N * N=交替的各位数之和”这一句话,想到用while循环.只要输入的数的总和t小于 ...