css的属性是变量是怎么表达,CSS自定义属性（变量）

╰半夏微凉° 2022-09-02 15:48 136阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

相关 css中align-self属性是什么

css中align-self属性是什么 ![6589802612da9a1bfbd95bb98f3f5166.jpeg][] 1、align-self属性定义flex子

亦凉/ 2024年03月30日 17:50/ 0 赞/ 1 阅读

相关 css3中自定义变量

使用过Less或者Sass的人都知道，为了方便，可以将css属性值定义为一个变量，这样在其他元素中需要使用的话只需输入变量名就可以了，在css3中支持定制变量。 css3中

左手的ㄟ右手/ 2023年08月17日 16:56/ 0 赞/ 63 阅读

相关 CSS_css变量，css自定义属性

定义变量 –变量名:变量值 --myvarible:red 全局变量使用 :root定义 :root{ --myvarible:red

本是古典何须时尚/ 2022年12月29日 09:22/ 0 赞/ 131 阅读

相关 JavaScript - 对象的属性名是一个变量如何赋值 / 获取（对象怎么点.到变量属性）

前言有时候，我们对象的属性 `x` 是一个变量，这时 `obj.x` 是无效的，但可通过如下方式 `.` 到。实现 // Object con

偏执的太偏执、/ 2022年11月15日 12:23/ 0 赞/ 149 阅读

相关 css3是什么 ptml_CSS3 transform 属性

div \{ transform:rotate(7deg); \-ms-transform:rotate(7deg); /\ IE 9 \/ \-moz-transfo

浅浅的花香味﹌/ 2022年10月26日 14:26/ 0 赞/ 150 阅读

相关 css的属性是变量是怎么表达,CSS自定义属性（变量）

Github上有个叫electron-api-demos的项目，看代码的时候发现了这么一个css文件(variables.css)： :root \{ \--color:

╰半夏微凉°/ 2022年09月02日 15:48/ 0 赞/ 137 阅读

相关 css属性怎么背,CSS的一些必记属性整理

Text color 设置text的颜色 text-align 设置text的对齐 text-decoration 设置text的下划线 text-transforma

客官°小女子只卖身不卖艺/ 2022年09月02日 14:52/ 0 赞/ 156 阅读

相关 CSS-颜色属性+颜色函数+自定义变量

最近更新时间：2017年5月8日16:08:13 [《我的博客地图》][Link 1] 离开校园踏入职场，不是到达人生巅峰，而是人生才刚刚开始。校园里学的知识

亦凉/ 2022年06月16日 06:37/ 0 赞/ 349 阅读

相关 CSS 自定义属性的策略指南

CSS 自定义属性的策略指南 > CSS 自定义属性(也称为“CSS 变量”)，在目前所有的现代浏览器中都得到了支持，开发者已经在项目中开始使用，但是它们与预处理器中的变

忘是亡心i/ 2022年05月21日 11:39/ 0 赞/ 101 阅读

相关对象的属性是变量

如题，类似这样定义了一个变量： var key = "name"; var value = "Merry"; var obj = { key: val

快来打我*/ 2022年01月31日 07:49/ 0 赞/ 139 阅读