css原生变量 var
2024-09-30 07:59:42
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原生的变量的定义方法,就想定义元素的属性一样
最新文章
- Spring学习(二)
- ES5 getter setter
- MongoDB学习笔记-05 聚合
- Net.Sf.Json java Object to JsonObject
- 【iOS】环形渐变进度条实现
- 李洪强iOS经典面试题137-内存管理
- Oracle中新增表代码
- 【GK101 谐波数据生成器】上位机软件升级(版本:1.1)
- shelve模块
- zzuli oj 1146 吃糖果
- PROTEL 99SE的打印设置
- 【C#版本详情回顾】C#3.0主要功能列表
- tableviewcell 点击 设置
- lighttpd启动问题
- windows分驱
- requests库入门02-简单了解HTTP协议
- 创建servlet程序知识点详解---servlet-day05
- javascript高级程序设计第二章知识点提炼
- headfirst python 03, 04
- 报错解决——-bash: wget: command not found
热门文章
- 服务器Out of Memory
- foobar2000设置关闭按钮最小化到系统托盘
- Adding an Exception Breakpoint - Terminating app due to uncaught exception &#39;NSRangeException&#39;, reason: &#39;*** -[__NSArrayM objectAtIndex:]: index 25 bey
- 【spring data jpa】报错如下:Caused by: javax.persistence.EntityNotFoundException: Unable to find com.rollong.chinatower.server.persistence.entity.staff.Department with id 0
- Youth is not a time of life, it is a state of mind.
- codeforces 553 A Kyoya and Colored Balls
- 走入asp.net mvc不归路:[6]linq常见用法
- sql注入攻防 以php+mysql为例
- yum 安装 mysql
- SAP图标- ICON