基于scss构建BEM体系，快速书写class

基于scss基础下构建BEM体系，可以更快的完成class书写。
在项目中新建一个文件夹mixins，在该文件夹下新建3个文件，分别是mixins.scss文件、config.scss文件和vars.scss文件。

在mixins.scss文件中：

@import "config";
@import "vars";

/**
构建 BEM 体系
*/

@mixin b($block) {
    $B: $namespace+'-'+$block !global;
    .#{$B} {
        @content;
    }
}

@mixin e($element) {
    $E: $element !global;
    $selector: &;
    $currentSelector: "";

    @each $unit in $element {
        $currentSelector: #{ $currentSelector + "." + $B + $element-separator + $unit + "," };
    }

    #{$currentSelector}{
        @content;
    }
}

@mixin m($modifier) {
    $selector:&;
    $currentSelector:"";
    @each $unit in $modifier {
        $currentSelector: #{  $currentSelector+&+$modifier-separator+$unit + "," }
    }

    @at-root{
        #{$currentSelector}{
            @content;
        }
    }
}

@mixin when($state) {
    @at-root {
        &.#{$state-prefix + $state}{
            @content;
        }
    }
}


//响应式相关的API
@mixin res($key,$map:$--breakpoints) {
    @if map-has-key($map, $key) {
        @media only screen and #{inspect(map-get($map,$key))}{
            @content;
        }
    }@else{
        @warn "key不存在"+#{$key};
    }
}

@mixin icon_select_active($background,$margin){
    display: inline-block;
    width:3px;
    height:32px;
    background:$background;
    margin-right:$margin;
}

@mixin tab_select_active($borderWidth,$borderHeight,$background){
    display: inline-block;
    width:$borderWidth;
    height:$borderHeight;
    background:$background;
    position: absolute;
    bottom: 0;
    left: 0;
}

在config.scss文件中定义好class使用的连接符：

$namespace: 'xm';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix:'is-';

在vars.scss文件中提前定义好一些颜色变量、字体大小变量、padding大小变量、margin大小变量等：

$primary-color:#3199F5;
$primary-color-light:#66b1ff;
$primary-color-dark:#3a8ee6;

 /* 按钮的常规边框颜色 */
$border-color-gray:#45B6E5;

$color-success:#45B6E5;
$color-success-light:#4DCBFF;
$color-success-dark:#3DA2CC;


$color-info:#909399;
$color-info-light:#a6a9ad;
$color-info-dark:#82848a;

$color-warning:#e6a23c;
$color-warning-light:#050504;
$color-warning-dark:#cf9236;

$color-danger:#f56c6c;
$color-danger-light:#f78989;
$color-danger-dark:#dd6161;
$userBg:#e1e4e6;

/* Break-point
--------------------------*/
$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;

$--breakpoints: (
  'xs' : (max-width: $--sm - 1),
  'sm' : (min-width: $--sm),
  'md' : (min-width: $--md),
  'lg' : (min-width: $--lg),
  'xl' : (min-width: $--xl)
);

/* 登录页面的变量颜色 */

/* 输入框的默认背景色 */
$color-input:#1F5166;
/* 输入框的提示语颜色 */
$color-input-placeholder:#9AABB3;

/* 字体颜色 */
$color-font-default:#fff;
$color-font-login:#45B6E5;
$color-font-login-msg: #849399;
$color-upload:#3199F5;//上传文字颜色
/* 弹框字体颜色 */
$color-font-detail:#484B4D;

/* 变量颜色的存放点 */
/* menu */
$menuBackground: #292B36;
$menuHoverColor: #FAFAFC;
$menuTextColor: #ACAFBF;
$menuIsActiveBackground: #1E212E;
$menuIsActiveborder: #45B6E5;
$mainRightBackground:#fff;

/* head */
$headBackground: #fff;
$headTextColor: #606664;
$headIconColor:#C0C8CC;
$headIconBorder:#D8E6E1;
/* 消息蓝点颜色*/
$headRedColor:#45B6E5;
$headCountColor:#fff;

/* homebody */
$bodyBackground:#F7F9FA;
$tip-font-color: #909699;
$bodyPaddingBackground:#F5F6FA;
$redColor: #FF3246;
$orangeColor: #FF9B00;
$fontDefaultColor: #303233;
$greenColor: #27BD7E;
$buleColor: #45B6E5;
$fontNumColor: #606466;
$tabsBorderColor: #DCDFE0;
$fontTimeColor: #BBBEBF;
$wechatBackground: #FAFBFC;
$tagBackground: #F0F3F5;
$boxShadow:rgba(0,78,129,0.1);
$boxBg:#edf1f2;

/* select-input */
$selectHoverBackground:#E6F7FF;
$selectDefalutBackground: #fff;
$selectHoverColor:#45B6E5;
$selectTextColor:#323333;
$tableHoveBackground: #F5F7FA;
$selectUnableBackground: #F5F8FA;
$selectBorderShadow: rgba(0,54,77,0.1);
$selectHoverBackground: #EBF9FF;
$selectIconColor:#B4BCBF;

/* 表格标题的背景颜色 */
$tableTitleBackground:#F7F9FA;
$tableUserRemarks: #909699;

/* 标题label and content字体颜色 */
$el-from-item-label-color: #606466;
$el-from-item-content-color: #303233;
$el-from-item-border-color: #DCDFE0;

/* 用户管理tabs */
$userMenuBackground: #EBF9FF;
$userMenuBorder: #EDEFF0;


/* button */
$buleBtn :#45B6E5;
$text999999: #999999;
$text33: #333;
$buttonBorder: #C0C8CC;
$grayBg:#F5F8FA;
$HighlightBg:#E0F6FF;

/*table*/
$textWarning: #FF9B00;
$textSuccess:#27BD7E;
$textDanger: #FF3246;
$paginationActiveBack:#45B6E5;
$paginationBack:#fff;
$paginationBorder:#D7DADB;

/*icon颜色*/
$iconDefault:#b4bcbf;
$iconYellow:#ffd545;
$iconNoClick:#d8e1e6;

/* 卡片 颜色 */
$card-shadow-color:#00364D;
$card-font-color: #303233;
$card-label-color: #606466;
$card-time-color: #909699;
$card-picture-time-color: #A8AFB3;
$card-more-icon: #B4BCBF;

/* tab 颜色 */
$tab-font-color: #9DACB3;
$tab-active-color: #303233;
$tab-border-color: #45B6E5;
$tab-bottom-border: #EDEFF0;

$li-border-color: #EBEEF0;

/*checkBox*/
$checkboxColor:#27BD7E;

//列表边框
$lineBorder:#EDEFF0;
$fontSize:14px ;





/**
scss for循环
 */
//@for $i from 1 through 3 {
//.item-#{$i} { width: 2em * $i; }
//}

/**
less for循环
 */
//.generate-fonts(40);
//.generate-fonts(@n, @i: 10) when (@i =< @n) {
//  .font@{i} {
//    font-size: 10px + @i;
//  }
//  .generate-fonts(@n, (@i+2));
//}

在userInfo.vue文件中简单的使用：

<template>
  <div class='xm-bottom'>
    <div class="xm-bottom__btn">
      <span class="xm-bottom__btn--button">确定</span>
      <span class="xm-bottom__btn--button">取消</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '~@/mixins/mixins.scss';
@include b(btnBox) {
  width: 240px;
  padding: 20px;
  @include e(btn) {
    display: flex;
    justify-content: center;
    align-items: center;
    @include m(button) {
      padding: 8px 12px;
      margin: 0 12px;
      text-align: center;
      background: #4DCBFF;
      color: #fff;
    }
  }
}
</style>