样式中的bem架构以及sass的基本使用

1. bem 样式架构

什么是bem： block element modify
饿了么ui的样式都是通过el开头（name splace），

el-input__wrapper
// - : 表示一个整体的块
// __ : 表示该element是一个元素

el-button--primary
// -- ：用于修饰的类名(某个状态不同)

2. sass

1. 插值语句 #{}

通过 #{} 可以在选择器 或者 属性名中使用变量

// 动态类名 / 动态属性 必须要结合插值语句
$foo: foo
p.#{$foo}{
    color: red
}

2. 跳出嵌套 @at-root，不想让父类名追加到子类名上

.parent {
    @at-root .child {
     // some styles
    } 
}
// 会被编译为 .parent{}  .child{}

3. 混入 @mixin

3.1 基本使用

// 1. 定义混入
@mixin foo {}
// 2. 使用混入
.parent {
    @include foo;
}

3.2 定义参数

参数用于给混入指令中的样式设定变量，并且赋值使用， 定义混入指令时，多个参数之间用逗号分隔。 引用指令时，按照参数的顺服，再将所赋的值对应写进括号

@mixin sexy-border($color, $width) {
    border: $width solid $color;
}
p{@include sexy-border(red, 2px);}

4. 使用sass

4.1 安装scss

npm i sass

4.2 编写全局的bem规则样式

$namespace: 'hy' !default; // 默认为hy
$block-sel: '-' !default; // 默认为-
$elem-sel: '__' !default; // 默认为__
$mod-sel: '--' !default; // 默认为--

// 定义block
@mixin b($block) {
    $b: $namespace + $block-sel + $block;

    // 初始化
    .#{$b} {
        @content; // 占位符，用于替换成真正的样式
    }
}

// 定义element
@mixin e($element) {
    $selector: &; // 获取父级类名

    // 跳出嵌套，否则 => .parent .parent__element {}
    @at-root {
        #{$selector + $elem-sel + $element} {
            @content;
        }
    }

}

// 定义modifier
@mixin m($modifier) {
    $selector: &; // 获取父级类名
    @at-root {
        #{$selector + $mod-sel + $modifier} {
            @content;
        }
    }
}

4.3 配置预处理器 -- 增加全局样式

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import './src/bem.scss';`
      }
    }
  }

4.4 基本使用

5. 总结

bem架构可以在有效防止类名污染，对于样式规范很有用。