css 变量的支持情况:

在pc端支持还不错,ie不支持,移动端也不支持,大概这就是css变量没有广泛使用的原因吧

CSS预编译工具Sass/Less/Stylus的便捷之处就是可以定义变量,方便代码的维护,其实css也有自己原生的变量var:

命名方式:--* (以--开头,*代表变量名称)

变量名称命名规则:

不能以:$[^(%等字符字符开头,可以是数字,但是css和js不能以数字开头;但是可以是中文,日文或者韩文

使用方法:

1 就想定义元素的属性一样:

:root{

--red:red;

--blue:blue;

--yellow:yellow;

}
.div1{
background-color:var(--red);
}

2 css变量有自己的作用域:

例如:

#div2{

--borderWidth:2px;

}

.div3{

--borderColor:red;

border:1px solid var(--borderColor);

}

#div2{

border:var(--borderWidth) solid red;

}

.div3中的--borderColor只能class为div3的元素可以使用,它的作用域在div3中

--borderWidth 只能是id为div2的元素才可以使用,别的元素没有作用

:root下定义的变量的作用域是整个文档

3 css缺省值

var( <自定义属性名> [, <默认值 ]? )

.div5{

background-color:var(--color,red);

}

--color变量没有定义,就使用默认值red;

所以上面的定义方式等价于:

.div5{

 background-color:red;
}

4 css变量默认值

.div6{

background-color:var(--color);

}

div6没有定义默认值。--color变量没有定义。背景颜色默认是白素

等价于没有定义背景颜色

5 不合法的变量值:

.div7{

--width:20px;

color:var(--width,red);

}

不合法的使用,不是缺省值。等价于

.div7{

--width:20px;

color:20px;

}

所以文字的颜色是文字的默认颜色,不是红色而是黑色

6 CSS变量的空格尾随特性

.div8{
--size:20px;
font-size:var(--size)px;
}
div8的字体大小并不是20px;是默认的字体大小
解析出来是font-size:20 px;在20的后边有一个空格 。。。。

可以使用CSS3 calc()计算:

.div8 {
--size:;
font-size: calc(var(--size) * 1px);
}
div8的字体大小才是20px;

7 css属性不能定义变量。例如:

.div4{

--width:width;

border-var(--width):1px;

var(--width):20px;

}

上面的定义方式是不合法的

8 与Sass/Less/Stylus中的定义不同,不能像定义变量一样;例如:

--red:red;
span{
background-color:var(--red);
}

上面的定义方法是不起作用的

css原生的变量的定义方法,就想定义元素的属性一样

css原生变量 var的更多相关文章

  1. css原生变量var()

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

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

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

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

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

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

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

  5. css - 原生变量及使用函数 var()

    零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过  --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...

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

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

  7. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  8. C#中隐式类型本地变量var

    在新接触的项目中,看到很多声明变量时用var.只记得在javascript中声明变量用var.今天在家里看C#和.Net高级编程,看到隐式变量这一块,就总结一下C# 中隐式变量var的用法. 1.C# ...

  9. Swift学习——变量var和let常量的用法(一)

    Swift中的变量var和let常量 首先介绍一下Swift中的 var 和 let (1)var 是 variable的缩写形式,是变量的意思 ,是可改变的.并非数据类型 比如: 注意每一个语句后面 ...

随机推荐

  1. 深入爬虫书scrapy 之json内容没有写入文本

    settings.py设置 ITEM_PIPELINES = { 'tets.pipelines.TetsPipeline': 300, } spider代码 xpath后缀添加.extract() ...

  2. java jvm学习

    在并发编程中,多个线程之间采取什么机制进行通信(信息交换),什么机制进行数据的同步? 在Java语言中,采用的是共享内存模型来实现多线程之间的信息交换和数据同步的. 线程之间通过共享程序公共的状态,通 ...

  3. NOIP前必须记住的30句话

    NOIP前必须记住的30句话 1.比赛前一天晚上请准备好你的各种证件,事先查好去往考场的路线2.比赛之前请先调整你的屏幕分辨率到你喜欢的大小3.比赛之前请把编译器的字体调为你平时惯用的字体,尤其是注意 ...

  4. hdu 1689 Alien’s Necklace (bfs层次图剪枝)

    Alien's Necklace Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  5. LeanCloud SDK 中秒杀70%问题的调试方法

    非常多同学在LeanCloud上遇到的不少问题,事实上能够自我解决的,如今介绍一下LeanCloud上的调试方法. LeanCloud 是通过 REST API来进行前后端分离的.这意味着当出现故障的 ...

  6. React 组件开发注意事项

    0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也 ...

  7. java基础知识汇总6(html篇)

    五.html // 定义文档类型. < html> 定义 HTML 文档. < body> 定义文档的主体. < h1> to < h6> 定义 HTM ...

  8. Ubuntu 16.04 LTS安装Eclipse配置Pydev

    原材料: 下载 jdk-8u121-linux-x64.tar.gz 下载 eclipse-jee-neon-2-linux-gtk-x86_64.tar.gz 1.安装jdk sudo mkdir ...

  9. iOS开发 - App程序启动原理

    Info.plist和pch文件的作用 建立一个project后,会在Supporting files目录下看到一个"project名-Info.plist"的文件,该文件对pro ...

  10. IP数据报首部格式

    IP协议提供不可靠.无连接的数据报传送服务. 不可靠:尽力而为地传输,不保证IP数据报能成功到达目的地. 无连接:每一个数据报之间相互独立地进行路由选择,可不按发送顺序接收. IP首部格式例如以下: ...