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浏览器是不支持的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456844.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Exception in thread main java.lang.UnsupportedClassVersionError的另类解决办法

最近在Linux虚拟机上跑在windows平台上的eclipes打出来的jar包时报出Exception in thread “main” java.lang.UnsupportedClassVersionError的错误: 经过上网查询了解到是因为自己Windows使用的是jdk1.8版本,而Linux使用的是jdk1.7版本,所…

Linux命令【第一篇】

1、创建一个目录/data 记忆方法:英文make directorys缩写后就是mkdir。 命令: mkdir /data 或 cd /;mkdir data #提示:使用分号可以在一行内分割两个命令。 实践过程: 方法一: [rootoldboy66 ~]# mkdir /data #查…

Jenkins + gitlab webhook实现自动化部署

1、先在Jenkins安装插件Gitlab Hook Plugin 和Build Authorization Token Root Plugin;2.插件安装完成后在任务里添加token3、在gitlab上添加钩子4、点击测试钩子或push代码再看Jenkins已经在构建了就说明成功了(也可以在浏览器直接执行这个URL&#xff…

多继承以及MRO顺序【super().的使用】

多继承以及MRO顺序 1. 单独调用父类的方法 # codingutf-8print("******多继承使用类名.__init__ 发生的状态******") class Parent(object):def __init__(self, name):print(parent的init开始被调用)self.name nameprint(parent的init结束被调用)class Son1(Paren…

人工智能专业词汇集

最近看到一篇关于AI专业词汇总结的文章,感觉不错,分享一下。 对应的词汇项目地址为:https://github.com/jiqizhixin/Artificial-Intelligence-Terminology 本词汇库目前拥有的专业词汇共计 500 个,主要为机器学习基础概念和术语…

js 当前日期增加自然月

js 在日期不满足的情况下就会自动加1个月,比如在当前时间为3月31号,传入1,1两个参数,预期结果为2月29日,但是结果输出了3月2日。就是如果不满就会溢出到下个月,后来看了api发现了setMonth有两个方法&#x…

好雨云帮如何对接Git Server

前言 云帮目前支持对接GitLab、Gogs、Github,或者主流代码托管平台的公开项目,后期会考虑接入其他类型的Git服务。 私有云 GitLab是一个用于仓库管理系统的开源项目,私有云服务里使用比较多的自建Git服务。 对接GitLab 通过应用市场进行安装Gitlab 安装G…

Python 生成requirement 使用requirements.txt

python项目中必须包含一个 requirements.txt 文件,用于记录所有依赖包及其精确的版本号。以便新环境部署。requirements.txt可以通过pip命令自动生成和安装生成requirements.txt文件 pip freeze > requirements.txt安装requirements.txt依赖 pip install -r requ…

Source Insight上手教程

目录Project的建立和工作区域同步查看定义查找引用查找调用Source Insight常用快捷键 目录 最近刚参加工作,第一个任务就是查看项目的源码,熟悉代码结构。于是乎就简单学习了Source Insight。在这里就转载别人的文章当做自己的笔记,便于自己…

微信禁用右上角的分享按钮,WeixinJSBridge API以及隐藏分享的子按钮等菜单项

今天在做隐藏微信右上角的分享按钮 百度查到的一串代码&#xff0c;挺好用的 <!--禁用微信分享按钮--><script>function onBridgeReady() {WeixinJSBridge.call(hideOptionMenu);}if (typeof WeixinJSBridge "undefined") {if (document.addEventListen…

python2.7无法使用pip(安装easy_install)

python27和python36 共存时安装pip方法&#xff0c;解决python27文件夹下没有script文件方法 报错&#xff1a; D:\PYTHON2.7>python ez_setup.py Downloading http://pypi.python.org/packages/2.7/s/setuptools/setuptools-0.6c11-py2.7.egg Traceback (most recent call…

Codeforces 754E:Dasha and cyclic table

Codeforces 754E&#xff1a;Dasha and cyclic table 题目链接&#xff1a;http://codeforces.com/problemset/problem/754/E 题目大意&#xff1a;$A$矩阵&#xff08;$size(A)n \times m$&#xff0c;仅含a-z&#xff09;在整个平面做周期延拓&#xff0c;问$B$矩阵&#xff…

位运算中的左移和右移的计算详解

最近在学习javaScrapt&#xff0c;在学到位运算符这部分的时候&#xff0c;突然发现看不懂书上的例子了。经过查找资料后&#xff0c;发现了一遍不错的文章。分享一下&#xff1a; 正数的左移和右移 以3为例 3的二进制为 00000011 右移2位的时候将最右的11去掉左边补00结果…

AC日记——字符串P型编码 openjudge 1.7 31

31:字符串p型编码 总时间限制: 1000ms内存限制: 65536kB描述给定一个完全由数字字符&#xff08;0,1,2,…,9&#xff09;构成的字符串str&#xff0c;请写出str的p型编码串。例如&#xff1a;字符串122344111可被描述为"1个1、2个2、1个3、2个4、3个1"&#xff0c;因…

javascript中的define用法

文章目录1. AMD的由来2. AMD是什么3. AMD实例&#xff1a;如何定义一个模块4. 匿名模块5. 仅有一个参数的define6. Dojo中的AMD7. 结论最近由于工作需求只能快速学习JS&#xff0c;但在看代码的时候发现许多东西都有疑问比如说代码刚开始的define关键字的用法&#xff0c;刚好最…

解决:pip警告!DEPRECATION: The default format will switch to columns in the future.

pip警告&#xff01; DEPRECATION: The default format will switch to columns in the future. You can use --format(legacy|columns) (or define a format(legacy|columns) in your pip.conf under the [list] section) to disable this warning. pip升级到9.0.1后 查看pi…

PLSQL安装配置

&#xff08;1&#xff09;解压&#xff1a;plsql developer Oracle数据库开发工具首先确保有oracle数据库或者有oracle服务器&#xff0c;然后才能使用PLSQL Developer连接数据库。&#xff08;2&#xff09;工具---首选项---连接----输入OCI库&#xff08;设置之后不用再装or…

Mysql 学习笔记2

&#xff08;1&#xff09;MySQL查看表占用空间大小 //先进去MySQL自带管理库&#xff1a;information_schema //自己的数据库&#xff1a;dbwww58com_kuchecarlib //自己的表&#xff1a;t_carmodelparamvalue mysql> use information_schema; Database changed mysql&g…

python程序打包为exe可执行文件

大家都知道&#xff0c;Python是一种脚本语言&#xff0c;也就是解释型的语言&#xff0c;需要解释器来进行解释以后才可以执行&#xff0c;而Python源代码需要在Python虚拟机上面运行&#xff0c;但是我们做好的程序&#xff0c;不可能给用户使用的时候还让他安装一个Python环…

Backbone简介

1. 前言 本文的目的&#xff0c;是帮助大家快速理解掌握Backbone的使用&#xff0c;但它并不是API&#xff0c;因此我不会将每一个方法都详细地描述&#xff0c;但是我会告诉你如何学习它们。 这是一篇稍稍较长的技术文章&#xff0c;因为我想将我所了解的东西尽可能详细地分享…