css原生变量 var
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的更多相关文章
- css原生变量var()
了解css/css3原生变量var 阮一峰css变量教程 深入学习css自定义属性(css变量)
- CSS/CSS3中的原生变量var详解以及布局响应式网页扩展
使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...
- 了解CSS/CSS3原生变量var
一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...
- 了解CSS/CSS3原生变量var (转)
一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...
- css - 原生变量及使用函数 var()
零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过 --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...
- 【转载】了解CSS/CSS3原生变量var
文章转载自:鑫空间鑫生活(https://www.zhangxinxu.com/) 原文链接:http://www.zhangxinxu.com/wordpress/?p=5804 内容摘要: 在任何 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- C#中隐式类型本地变量var
在新接触的项目中,看到很多声明变量时用var.只记得在javascript中声明变量用var.今天在家里看C#和.Net高级编程,看到隐式变量这一块,就总结一下C# 中隐式变量var的用法. 1.C# ...
- Swift学习——变量var和let常量的用法(一)
Swift中的变量var和let常量 首先介绍一下Swift中的 var 和 let (1)var 是 variable的缩写形式,是变量的意思 ,是可改变的.并非数据类型 比如: 注意每一个语句后面 ...
随机推荐
- 深入爬虫书scrapy 之json内容没有写入文本
settings.py设置 ITEM_PIPELINES = { 'tets.pipelines.TetsPipeline': 300, } spider代码 xpath后缀添加.extract() ...
- java jvm学习
在并发编程中,多个线程之间采取什么机制进行通信(信息交换),什么机制进行数据的同步? 在Java语言中,采用的是共享内存模型来实现多线程之间的信息交换和数据同步的. 线程之间通过共享程序公共的状态,通 ...
- NOIP前必须记住的30句话
NOIP前必须记住的30句话 1.比赛前一天晚上请准备好你的各种证件,事先查好去往考场的路线2.比赛之前请先调整你的屏幕分辨率到你喜欢的大小3.比赛之前请把编译器的字体调为你平时惯用的字体,尤其是注意 ...
- hdu 1689 Alien’s Necklace (bfs层次图剪枝)
Alien's Necklace Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- LeanCloud SDK 中秒杀70%问题的调试方法
非常多同学在LeanCloud上遇到的不少问题,事实上能够自我解决的,如今介绍一下LeanCloud上的调试方法. LeanCloud 是通过 REST API来进行前后端分离的.这意味着当出现故障的 ...
- React 组件开发注意事项
0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也 ...
- java基础知识汇总6(html篇)
五.html // 定义文档类型. < html> 定义 HTML 文档. < body> 定义文档的主体. < h1> to < h6> 定义 HTM ...
- 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 ...
- iOS开发 - App程序启动原理
Info.plist和pch文件的作用 建立一个project后,会在Supporting files目录下看到一个"project名-Info.plist"的文件,该文件对pro ...
- IP数据报首部格式
IP协议提供不可靠.无连接的数据报传送服务. 不可靠:尽力而为地传输,不保证IP数据报能成功到达目的地. 无连接:每一个数据报之间相互独立地进行路由选择,可不按发送顺序接收. IP首部格式例如以下: ...