Building BEM system based on SCSS can complete class writing faster. Create a new folder mixins in your project and create three files in this folder: mixins. SCSS, config. SCSS, and vars.scss.

In the mixins.scss file:

@import "config"; @import "vars"; / * * * / @ BEM system constructed a 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; @mixin res($key,$map:$--breakpoints) {@if map-has-key($map, $map); $key) { @media only screen and #{inspect(map-get($map,$key))}{ @content; }}@else{@warn "key does not exist "+#{$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; }Copy the code

Define the concatenators used by the class in the config. SCSS file:

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

Define color variables, font size variables, padding variables, margin variables, and so on in vars. SCSS:

$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:#1F5166; /* $color-input-placeholder: $color-input-placeholder; $color = # FFF; $color = # FFF; $color-font-login:#45B6E5; $color-font-login-msg: #849399; $color-upload:#3199F5; $color- > detail:#484B4D; $color- > detail:#484B4D; / / menu */ $menuBackground: #292B36; / / menu */ $menuBackground: #292B36; $menuHoverColor: #FAFAFC; $menuTextColor: #ACAFBF; $menuIsActiveBackground: #1E212E; $menuIsActiveborder: #45B6E5; $mainRightBackground:#fff; /* head */ $headBackground: #fff; $headTextColor: #606664; $headIconColor:#C0C8CC; $headIconBorder:#D8E6E1; $headRedColor:#45B6E5; $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; $el-from-item-label-color: #606466; $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; $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-color: # 1; $tab-active-color: #303233; $tab-border-color: #45B6E5; $tab-bottom-border: #EDEFF0; $li-border-color: #EBEEF0; /*checkBox*/ $checkboxColor:#27BD7E; $lineBorder:#EDEFF0; $fontSize:14px ; // /@for $I from 1 through 3 {//. Item -#{$I} {width: 2em * $I; } //} /** less for loop */ /. Generate-fonts (40); //.generate-fonts(@n, @i: 10) when (@i =< @n) { // .font@{i} { // font-size: 10px + @i; // } // .generate-fonts(@n, (@i+2)); / /}Copy the code

Simple use in the userinfo.vue file:

<template> <div class='xm-bottom'> <span class="xm-bottom__btn"> <span class="xm-bottom__btn--button" 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>Copy the code