一、变量是个好东西

在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。

随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了。

Chrome/Firefox/Safari浏览器都是绿油油的,兼容性大大超出我的预期,于是果断尝鲜记录下语法用法和特性。

二、CSS变量var()语法和用法和特性

CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示我们的变量名称。关于命名这个东西,各种语言都有些显示,例如CSS选择器不能是数字开头,JS中的变量是不能直接数值的,但是,在CSS变量中,这些限制通通没有,例如:

:root {
--1: #369;
}
body {
background-color: var(--1);
}

  结果背景色如下:

但是,不能包含$[^(%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文,例如:

body {
--深蓝: #369;
background-color: var(--深蓝);
}

  

所以,我们就可以直接使用中文名称作为变量,即使英语4级没过的小伙伴也不会有压力了,我们也不需要随时挂个翻译器在身边了。

无论是变量的定义和使用只能在声明块{}里面,例如,下面这样是无效的:

--深蓝: #369;
body {
background-color: var(--深蓝);
}

  

CSS属性名可以走变量吗?

类似下面这样:

body {
--bc: background-color;
var(--bc): #369;
}

  

答案是“不可以”,要是可以支持的话,那CSS的压缩可就要逆天了,估计所有的属性都会变成1~2个字符。

CSS变量支持同时多个声明吗?

类似下面这样:

不好意思,类似不了,语法上就根本不支持。

CSS变量使用完整语法
CSS变量使用的完整语法为:var( [, ]? ),用中文表示就是:var( <自定义属性名> [, <默认值 ]? )

意思就是,如果我们使用的变量没有定义(注意,仅限于没有定义),则使用后面的值作为元素的属性值。举个例子:

.box {
--1: #369;
}
body {
background-color: var(--1, #cd0000);
}

  则此时的背景色是#cd0000

CSS变量的空格尾随特性

请看下面这个例子:

body {
--size: 20;
font-size: var(--size)px;
}

  

请问,此时<body>font-size大小是多少?

如果你以为是20px就太天真了,实际上,此处font-size:var(--size)px等同于font-size:20 px,注意,20后面有个空格,所以,这里的font-size使用的是<body>元素默认的大小。因此,就不要妄图取消就使用一个数值来贯穿全场,还是使用稳妥的做法:

body {
--size: 20px;
font-size: var(--size);
}

  或者使用CSS3 calc()计算:

body {
--size: 20;
font-size: calc(var(--size) * 1px);
}

  

了解CSS/CSS3原生变量var (转)的更多相关文章

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

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

  2. 【转载】了解CSS/CSS3原生变量var

    文章转载自:鑫空间鑫生活(https://www.zhangxinxu.com/) 原文链接:http://www.zhangxinxu.com/wordpress/?p=5804 内容摘要: 在任何 ...

  3. CSS/CSS3中的原生变量var详解以及布局响应式网页扩展

    使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...

  4. css原生变量var()

    了解css/css3原生变量var 阮一峰css变量教程 深入学习css自定义属性(css变量)

  5. css原生变量 var

    css 变量的支持情况: 在pc端支持还不错,ie不支持,移动端也不支持,大概这就是css变量没有广泛使用的原因吧 CSS预编译工具Sass/Less/Stylus的便捷之处就是可以定义变量,方便代码 ...

  6. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  7. css定义变量_css原生变量的使用和兼容 附带还有更高性能,文件更高压缩率的好处

    在开发中,css样式有一些属性往往需要重复使用,为了避免代码冗余,降低维护成本.我们需要使用CSS预编译工具[Sass/Less/Stylus],随着这些工具的流行,CSS变量也开始规范制定,目前很多 ...

  8. 在原生CSS中使用变量

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

  9. HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图)

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

随机推荐

  1. 安装CentOS 7(转)

    转载地址:https://www.cnblogs.com/wcwen1990/p/7630545.html CentOS7安装详解   本文基于vmware workstations进行CentOS7 ...

  2. C# 之 数字格式化

    格式规范的完整形式:{index [,width][:formatstring]} index是此格式程序引用的格式字符串之后的参数,从零开始计数:width(可选) 是要设置格式的字段的宽度,wid ...

  3. MUI组件四:选择器、滚动条、单选框、区域滚动和轮播组件

    目录(?)[+]   1.picker(选择器) mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现.*pop ...

  4. phpmyadmin详细的图文使用教程

    做网站用到服务器有很多站长应该都会用到数据库,那么phpmyadmin的使用也会是很多新手站长头大的问题,下面小编详细介绍一下phpmyadmin详细的图文使用教程. 方法/步骤     如何进入ph ...

  5. 【转】Linux 虚拟内存和物理内存的理解

    http://www.cnblogs.com/dyllove98/archive/2013/06/12/3132940.html 首先,让我们看下虚拟内存: 第一层理解 1.         每个进程 ...

  6. Hive的配置| 架构原理

    Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提供类SQL查询功能. 本质是:将HQL转化成MapReduce程序 1)Hive处理的数据存储在HDFS 2)Hi ...

  7. JavaSE | Lambda| Optional| Stream API

    JDK1.8新特性 1.接口:默认方法. 静态方法 2.Lambda表达式和StreamAPI 3.Optional类 4.新的日期时间API Lambda表达式:为了简化代码,使得Java支持 St ...

  8. 使用git工具上传自己的程序到github上

    一:前期准备 可以运行的项目 github账号 git工具 二:开始操作 1.创建个人github仓库 写自己项目的名字,描述,权限,README 2.新建结束后会进入如下界面 3.复制仓库地址 4. ...

  9. PAT (Basic Level) Practise - 写出这个数

    题目链接:https://www.patest.cn/contests/pat-b-practise/1002 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试 ...

  10. oracle中date数据的转换问题

    (TO_NUMBER(TO_CHAR(FP.KPRQ, 'HH24')) >= 18 kprq >= to_DATE ('2017-01-12 18:00:00','yyyy-MM-dd ...