vue中css写法_超越scss嵌套的vue element-ui使用的css写法中自定义的at-rule是怎么实现的...

今天看element-ui的css文件时看到了非常牛逼的写css的方法，先贴下代码，下面是其中的一个collapse组件，只要看html的class和css的选择器就可以了

html:

{{title}}

css:

@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:

@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:

.el-collapse-item {

.header {}

}

首先直接写header这种简单的样式可能会被全局的.header样式覆盖，导致莫名奇妙的bug

第二是嵌套深的话会提高样式权重，比较大的组件一不小就3.4层嵌套下去了，相比较没有嵌套的结构，渲染速度也较慢

感觉element-ui这样的写法完美解决了我之前的困扰，但是问题在于，我翻遍了css3也没找到这样的写法是怎么实现的，希望知道的大佬可以告诉我下，万分感谢。