css的属性是变量是怎么表达,CSS自定义属性(变量)
Github上有个叫electron-api-demos的项目,看代码的时候发现了这么一个css文件(variables.css):
:root {
--color: hsl(0,0%,22%);
--color-subtle: hsl(0,0%,44%);
--color-strong: hsl(0,0%,11%);
--color-link: hsl(0,0%,22%);
--color-border: hsl(0,0%,88%);
--color-bg: hsl(0,0%,96%);
--color-accent: black; /* Fallback */
}
/* Category Colors */
.u-category-windows { --color-accent: hsl(116, 30%, 36%); }
.u-category-menu { --color-accent: hsl(194, 60%, 36%); }
.u-category-native-ui { --color-accent: hsl(222, 53%, 50%); }
.u-category-communication { --color-accent: hsl(285, 47%, 46%); }
.u-category-system { --color-accent: hsl(330, 65%, 48%); }
.u-category-media { --color-accent: hsl( 36, 77%, 34%); }
:root在html文档里对应的就是html标签选择器,:root伪类和html标签选择器这两个的区别基本上就是前者的优先级更高一些。但是,那些–color是什么东西?
根据文档https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables,这个叫CSS自定义属性(CSS变量),是具有继承性质的,在:root中定义CSS变量的话,等于是在定义全局变量,在其他具体的选择器(如上述代码中的.u-category-windows)里定义CSS变量等于是在该选择器及其后台选择器这个范围内定义了一个局部变量。下面是这种变量的使用示例:
.about {
--about-space: 4rem;
position: absolute;
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
background-color: hsl(0,0%,98%);
pointer-events: none;
visibility: hidden;
opacity: 0;
transform: scale(1.1);
transition: visibility 0s .12s linear , opacity .12s ease-in, transform .12s ease-in;
}
.about-header {
padding: var(--about-space) 0;
border-bottom: 1px solid hsl(0,0%,88%);
}
说明:.about中定义了一个–about-space局部变量,其值为4rem,在.about-header中通过var(–about-space)来使用前面定义的值4rem,也就是说.about-header的样式等价于:
.about-header {
padding: 4rem 0;
border-bottom: 1px solid hsl(0,0%,88%);
}
写在最后,CSS自定义属性,嗯,IE浏览器是不支持的。
css的属性是变量是怎么表达,CSS自定义属性(变量)相关推荐
- css滤镜属性渐变_使用滤镜对CSS渐变进行动画处理
css滤镜属性渐变 Officially, gradients can't yet be animated. However, using CSS filters, you can animate t ...
- css的属性是变量是怎么表达,CSS自定义变量属性——像less,sass那样在css中使用变量(译)...
初步使用 :root { --main-color: #06c; --accent-color: #006; } /* The rest of the CSS file */ #foo h1 { // ...
- css列表格式属性,css list-style-type属性笔记
list-style-type属性定义及用法 在css中,list-style-type属性是使用来设置列表项标记的类型,在有序列表和无序列表中经常都会使用该属性. 目前,所有主流浏览器都支持list ...
- css网格_我如何记住CSS网格属性
css网格 The syntax for CSS Grid is foreign and hard to remember. But if you can't remember CSS Grid's ...
- css line-height属性是什么
css line-height属性是什么 概念 1.css line-height属性会影响行框的布局,用于设定行与行之间的距离(行高),不允许使用负值. 2.当应用于块级元素时,它定义了基线之间的最 ...
- css margin属性,css margin属性怎么用?css margin属性用法教程
在css中,有一个重要的属性margin,很多人都不知道css margin属性是什么?怎么用,下面为您总结一下css margin属性用法教程. margin是css用于在一个声明中,对所有css ...
- CSS样式属性(一)
字体样式 font-size:字号大小 font-size属性 设置字号 该属性的值可以使用相对长度单位 也可以使用绝对长度单位 其中相对长度单位比较常用 推荐使用px像素单位 相对长度单位 说明 e ...
- vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型
vue css 应用变量 CSS Grid and CSS Variables are both huge wins for front-end developers. The former make ...
- css规则中区块block,css常用属性总结:背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
最新文章
- 郁闷的时候看看这头驴,改变你的心态!
- 扫地机器人能有多硬核?好家伙自动驾驶、激光扫描、NLP这些硬科技全上了,科沃斯:技术创新才能打破行业内卷...
- 独家发布 | 产品经理生存现状
- mysql二进制安装的优缺点_MYSQL的二进制安装
- Android 第二十课 广播机制(大喇叭)----发送自定义广播(包括发送标准广播和发送有序广播)
- 浅谈:国内软件公司为何无法做大做强?
- jeecg之弹窗插件lhgdialog小结
- 自然场景下的文字检测:从多方向迈向任意形状
- bash shell 快捷键
- go var 一个整数_Go语言基础之基本数据类型
- ES6、7学习笔记(尚硅谷)-6-形参默认值的设置
- 2017年国家二级c语言题库,2017年计算机二级c语言题库及答案
- scratch编程一款节奏小游戏
- app上架小米应用商店流程
- Linux运维养成记-磁盘管理LVM 逻辑卷
- 医疗管理系统-图形报表、POI报表
- X99主板2011-3接口E5 CPU一览表
- 预训练权重到底是个啥
- ABP的一些特性 (Attribute)
- Specialty Coffee Evaluation 精品手冲咖啡评测