一、变量是个好东西

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

随着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. zTree的使用教程

    1.首先去官网下载http://www.ztree.me/v3/main.php#_zTreeInfo 2.之后引入: <script src="js/jquery.ztree.all ...

  2. Spring MVC基础知识整理➣环境搭建和Hello World

    概述 Spring MVC属于SpringFrameWork的产品,采用Model-View-Controller进行数据交互,已经融合在Spring Web Flow里面.Spring 框架提供了构 ...

  3. RN错误随笔 - Unable to resolve module 'AccessibilityInfo'

    错误信息:.React Native 运行报错:Unable to resolve module 'AccessibilityInfo' 可以看到在 异常的返回的JSON 结构中给出了推荐的解决方法 ...

  4. bootstrap下jQuery自动完成的样式调整-【jQuery】

    1. 覆盖层调整 在bootstrap的对话框中,当其中的输入项使用了自动完成控件,则其中下拉框中的内容就会被bootstrap对话框的覆盖层遮盖. 为了能够使后面的自动完成的层显示出来,可以使用如下 ...

  5. Python_序列化和反序列化模块

    序列化:将对象转换为可通过网络传输或可存储到本地磁盘的数据格式的转换过程,称为序列化,反之,称为反序列化 json: 用来实现不同语言,不同程序直接的信息交互,json支持所有高级语言之间的序列化交互 ...

  6. Flask Web中用MySQL代替SQLite

    由于.sqlite文件操作的诸多不便,决定常识用MySQL代替书上的SQLite作为数据库. 1.在虚拟环境中安装mysql-Python具体步骤为: <1> 安装python-dev s ...

  7. Python 高级面向对象

    一.字段 1.字段包括:普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同. a.普通字段属于对象(实例变量) b.静态字段属于类(类变量) 二.属性 对于属性,有以 ...

  8. Codeforces Gym100543B 计算几何 凸包 线段树 二分/三分 卡常

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF-Gym100543B.html 题目传送门 - CF-Gym100543B 题意 给定一个折线图,对于每一条 ...

  9. VS项目启动后 提示ID为*******的进程当前未运行

    就是VS2015中的这种问题,启动调试时,右下角根本没有IISPress图标出现.我的工程是因为突然停电,就再也调试不了了! 解决办法: 用文本编辑器打开Web项目下的{X}.csproj文件,然后查 ...

  10. CodeForces 371C Hamburgers(经典)【二分答案】

    <题目链接> 题目大意: 给以一段字符串,其中只包含"BSC"这三个字符,现在有一定量免费的'B','S','C‘,然后如果想再买这三个字符,就要付出相应的价格.现在总 ...