有关Css自定义变量的介绍
来源:互联网 发布:绿色版软件是什么意思 编辑:程序博客网 时间:2024/05/16 02:04
首先,我先来说说什么是“自定义变量”顾名思义,就是可以随意定义变量名的一种变量。通常在前面都会加上 - -作为记号,它的作用和font-size、color等正式属性没什么区别。那为什么要在前面加上 “- - ”呢?因为$foo被 Sass 用掉了,@foo被 Less 用掉了。为了不产生冲突,官方的 CSS 变量就改用两根连词线了。
图中pulse选择器中定义了两个名为color和hover的属性,当然你也可以定义其它的名字,比如 temp、art、slide等等,只要你自己明白就行了。需要注意的是”- -color”和”- -Color”是不一样的。
Var( )函数
这哥们主要的作用就是用来读取你所定义的变量,var()函数还可以使用第二个参数,表示变量的默认值。如果自定义变量不存在,就会使用这个默认值。
color: var(--hover, #ccc);
第二个参数不处理内部的逗号或空格,都视作参数的一部分。
var()函数还可以用在变量的声明。
.pulse { --color: red; --logo: var(--color);}
注意,变量值只能用作属性值,不能用作属性名。
.pulse { --mt: margin-top; /* 无效 */ var(--side): 20px;}
变量值的问题
如果变量值是一个字符串,可以与其他字符串拼接。
--first-name: "William";--name: var(--first-name) "Yao";
如果变量值是数值,不能与数值单位直接连用。
.pulse { --tat: 100; /* 无效 */ margin-top: var(--tat)px;}
如果必须使用,那就要用calc()函数,将它们连接。
.foo { --tat: 20; margin-top: calc(var(--tat) * 1px);}
同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的”层叠”(cascade)规则是一致的。
:focus { --color: blue; }div { --color: green; }#alert { --color: red; }* { color: var(--color); }
上面代码中,三个选择器都声明了–color变量。不同元素读取这个变量的时候,会采用优先级最高的规则,因此三段文字的颜色是不一样的。
阅读全文
0 0
- 有关Css自定义变量的介绍
- 有关css的文章
- 有关css的居中
- 有关CSS的学习
- CSS自定义属性(CSS变量)
- 有关sdk 的介绍
- 有关红黑树的介绍
- 有关eclipse的介绍
- 有关lrecycleview的介绍
- piwik 图片追踪,加自定义变量的url 参数介绍
- 有关变量的知识点学习
- 有关CSS的学习实践
- 与打印有关的CSS
- CSS-颜色属性+颜色函数+自定义变量
- 有关字节对齐的介绍:
- Delphi有关包的介绍
- 有关字节对齐的介绍
- delphi 有关包的介绍
- jQuery Validate
- 创投日报:11月13日收录投融资项目7起
- redis集合相关命令
- java 彻底理解 byte char short int float long double
- ionic 通过下载apk升级App
- 有关Css自定义变量的介绍
- opencv 中的solvePnP() 程序
- 设备标志牌
- 深度网Inception
- pdb不自动启动(文档 ID 2038321.1)
- 如何断掉指定端口的网络传输,营造掉线效果
- WinForm窗体中ComboBox控件自定义高度和选项文本居中、选项高亮
- AndroidManifest.xml清单文件详解--compatible-screens节点
- 关于GridView的使用,