element-ui源码--结合sass采用bem命名

1.bem即block-element-modify，B意思是Block 块，E意思是Element 元素，M意思是Modifier 修饰器,就是将命名按照层级进行命名。

我们可以借鉴将此结构应用到我们的项目中，比如由如下的结构,el为命名空间

<div class="el-page">
    <div class="el-page__head">
        <div class="el-page__head--tag"></div>
        <div class="el-page__head--left"></div>
    </div>
    <div class="el-page__body">
        <div class="el-page__body">
            <div class="el-page__body--hover"></div>
            <div class="el-page__body--modified"></div>
        </div>
    </div>
</div>

2.我们可以使用sass语言，我们的css可以写为以下：

 <style lang="scss">
    @b(page){
       @e(head){
            @m(tag){font-size:18px;}
            @m(left){color:red;}
       }
       @e(body){
            font-size:14px;
            @m(hover){font-size:18px;}
            @m(modified){backgroud-color:red;}
       }
    }
 <style>

3.实现关键步骤，全局引入sass变量

$namepage:'rm';
$block-separate:'-';
$element-separate:'__';
$modifier-separate:'--';

@mixin b($block){
    .#{$namepage + $block-separate + $block}{
        @content;
    }
}
@mixin e($element){
    @at-root #{& + $element-separate + $element}{
        @content;
    }
}
@mixin m($modifier){
    @at-root #{& + $modifier-separate + $modifier}{
        @content;
    }
}

4.总结一下sass关键用法

@mixin和@include
    @mixin b($color){
        background-color:$color;
    }
    .bg{
        @include b(#fff);
    }
    
    @minxin e(){
        @content;
    }
    .rm{
        @include e(){
            border:1px solid red;
        }
    }