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

鹿俊
  • 699

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

  <div class="el-collapse-item" :class="{'is-active': isActive}">
    <div class="el-collapse-item__header" @click="handleHeaderClick">
      <i class="el-collapse-item__header__arrow el-icon-arrow-right">
      </i>
      <slot name="title">{{title}}</slot>
    </div>
    <el-collapse-transition>
      <div class="el-collapse-item__wrap" v-show="isActive">
        <div class="el-collapse-item__content">
          <slot></slot>
        </div>
      </div>
    </el-collapse-transition>
  </div>

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:

<div class="el-collapse-item">
    <div class="header"></div>
</div>

scss:

.el-collapse-item {
    .header {}
}

首先直接写header这种简单的样式可能会被全局的.header样式覆盖,导致莫名奇妙的bug
第二是嵌套深的话会提高样式权重,比较大的组件一不小就3.4层嵌套下去了,相比较没有嵌套的结构,渲染速度也较慢

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

回复
阅读 5.8k
1 个回答

谷歌或百度或知乎搜索:BEM, 你就知道为什么这么写了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏