作者：为爱进地狱天堂_954 | 来源：互联网 | 2023-06-14 12:33
今天看element-ui的css文件时看到了非常牛逼的写css的方法，先贴下代码，下面是其中的一个collapse组件，只要看html的class和css的选择器就可以了html:123456789
今天看element-ui的css文件时看到了非常牛逼的写css的方法，先贴下代码，下面是其中的一个collapse组件，只要看html的class和css的选择器就可以了
html:
css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| @component-namespace el {
@b collapse {
border: 1px solid var(--collapse-border-color);
border-radius: var(--collapse-border-radius);
}
@b collapse-item {
@e header {
height: var(--collapse-header-height);
line-height: @height;
padding-left: 15px;
background-color: var(--collapse-header-fill);
color: var(--collapse-header-color);
cursor: pointer;
border-bottom: 1px solid var(--collapse-border-color);
font-size: var(--collapse-header-size);
@e arrow {
margin-right: 8px;
transition: transform .3s;
}
}
@e wrap {
will-change: height;
background-color: var(--collapse-content-fill);
overflow: hidden;
box-sizing: border-box;
border-bottom: 1px solid var(--collapse-border-color);
}
@e content {
padding: 10px 15px;
font-size: var(--collapse-content-size);
color: var(--collapse-content-color);
line-height: 1.769230769230769;
}
@when active {
> .el-collapse-item__header {
.el-collapse-item__header__arrow {
transform: rotate(90deg);
}
}
}
&:last-child {
margin-bottom: -1px;
}
}
} |
编译后的css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| @charset "UTF-8";
.el-collapse{border:1px solid #dfe6ec;border-radius:0}
.el-collapse-item:last-child{margin-bottom:-1px}
.el-collapse-item.is-active>.el-collapse-item__header
.el-collapse-item__header__arrow{-ms-transform:rotate(90deg);transform:rotate(90deg)}
.el-collapse-item__header{height:43px;line-height:43px;padding-left:15px;background-color:#fff;color:#48576a;cursor:pointer;border-bottom:1px solid #dfe6ec;font-size:13px}
.el-collapse-item__header__arrow{margin-right:8px;transition:transform .3s}
.el-collapse-item__wrap{will-change:height;background-color:#fbfdff;overflow:hidden;box-sizing:border-box;border-bottom:1px solid #dfe6ec}
.el-collapse-item__content{padding:10px 15px;font-size:13px;color:#1f2d3d;line-height:1.769230769230769} |
element-ui 将像el-collapse-item这样的class根据连接符分成了3段，@b表示‘-’，@e表示‘_’,这和我一直用的scss相比，我觉得有两个优势
按el-collapse-item__header这个样式来说，用scss写的话，我会这样写，
html：
scss:
1
2
3
| .el-collapse-item {
.header {}
} |
首先直接写header这种简单的样式可能会被全局的.header样式覆盖，导致莫名奇妙的bug
第二是嵌套深的话会提高样式权重，比较大的组件一不小就3.4层嵌套下去了，相比较没有嵌套的结构，渲染速度也较慢
感觉element-ui这样的写法完美解决了我之前的困扰，但是问题在于，我翻遍了css3也没找到这样的写法是怎么实现的，希望知道的大佬可以告诉我下，万分感谢。
京公网安备 11010802041100号