一、变量是个好东西

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

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

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

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

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

  1. :root {
  2. --1: #369;
  3. }
  4. body {
  5. background-color: var(--1);
  6. }

  结果背景色如下:

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

  1. body {
  2. --深蓝: #369;
  3. background-color: var(--深蓝);
  4. }

  

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

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

  1. --深蓝: #369;
  2. body {
  3. background-color: var(--深蓝);
  4. }

  

CSS属性名可以走变量吗?

类似下面这样:

  1. body {
  2. --bc: background-color;
  3. var(--bc): #369;
  4. }

  

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

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

类似下面这样:

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

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

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

  1. .box {
  2. --1: #369;
  3. }
  4. body {
  5. background-color: var(--1, #cd0000);
  6. }

  则此时的背景色是#cd0000

CSS变量的空格尾随特性

请看下面这个例子:

  1. body {
  2. --size: 20;
  3. font-size: var(--size)px;
  4. }

  

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

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

  1. body {
  2. --size: 20px;
  3. font-size: var(--size);
  4. }

  或者使用CSS3 calc()计算:

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

  

了解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. 配置文件——节点<machineKey>的作用,强随机生成

    <machineKey>这个节允许你设置用于加密数据和创建数字签名的服务器特定的密钥.ASP.NET自动使用它来保护表单验证Cookie,你也可以将它用于受保护的视图状态数据.同时,这个密 ...

  2. 【Android】Android自定义属性,attr format取值类型

    1. reference:参考某一资源ID. (1)属性定义: <declare-styleable name = "名称"> <attr name = &quo ...

  3. eclipse发布后在tomcat下没有文件夹,服务器的Server locations不能修改

    主要是因为Server locations中的deploy路径不正确,要修改这个路径,需要移除服务器中的所有项目,然后点击清空,这时再双击服务器,既可修改这个设置.

  4. Codeforces 1139E Maximize Mex 二分图匹配

    Maximize Mex 离线之后把删数变成加数, 然后一边跑匈牙利一遍算答案. #include<bits/stdc++.h> #define LL long long #define ...

  5. POJ1330Nearest Common Ancestors

    去博客园看该题解 题意 第一行输入T,有T组数据. 对于每组数据,给出一棵树,先输入n,然后n-1行,每行两个数a,b,表示a是b的父亲:第n行输入两个数A,B表示询问A和B的最近公共祖先. 题解 L ...

  6. 事件(Event)(onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse)【转载】

    ylbtech-Event:事件(Event)对象 事件(Event) HTML 4.0 事件属性 onclick onchange onload onunload onselect onmouse ...

  7. P1063 能量项链 区间dp

    题目描述 在MarsMars星球上,每个MarsMars人都随身佩带着一串能量项链.在项链上有NN颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子,前一 ...

  8. 给定一个非负索引 k,其中 k ≤ 33,返回杨辉三角的第 k 行。

    从第0行开始,输出第k行,传的参数为第几行,所以在方法中先将所传参数加1,然后将最后一行加入集合中返回. 代码如下: public static List<Integer> generat ...

  9. TensorFlow加载图片的方法

    方法一:直接使用tensorflow提供的函数image = tf.gfile.FastGFile('PATH')来读取一副图片: import matplotlib.pyplot as plt; i ...

  10. 01++ Bookshelf 2

    http://poj.org/problem?id=3628 就是比原题多了一个要求,输出>=m的最小值 kisang~独立做出来的都开心<( ̄︶ ̄)> #include<cs ...