Bem.scss with Generated by SassMeister.com.

bem.css

@charset "UTF-8";
/*-------------------------------- demo upload --------------------------*/
.kfc-upload {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
  /* 照片墙模式 */
}
.kfc-upload__input {
  display: none;
}

.kfc-upload__tip {
  font-size: 12px;
  color: #ccc;
  margin-top: 7px;
}

.kfc-upload iframe {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}
.kfc-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
}
.kfc-upload--picture-card i {
  font-size: 28px;
  color: #8c939d;
}
.kfc-upload--picture-card:hover {
  border-color: #f00;
  color: #f00;
}

.kfc-upload:focus {
  border-color: #f00;
  color: #f00;
}
.kfc-upload:focus .el-upload-dragger {
  border-color: #f00;
}

bem.scss

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

$--color-text-regular: #ccc;
$--color-primary: #f00;

// function
@function selectorToString($selector) {
    $selector: inspect($selector);
    $selector: str-slice($selector, 2, -2);
    @return $selector;
}

@function containsModifier($selector) {
    $selector: selectorToString($selector);
    
    @if str-index($selector, $modifier-separator) {
        @return true;
    } @else {
        @return false;
    }
}

@function containWhenFlag($selector) {
    $selector: selectorToString($selector);
    
    @if str-index($selector, '.' + $state-prefix) {
        @return true;
    } @else {
        @return false;
    }
}

@function containPseudoClass($selector) {
    $selector: selectorToString($selector);
    
    @if str-index($selector, ':') {
        @return true;
    } @else {
        @return false;
    }
}

@function hitAllSpecialNestRule($selector) {
    @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
}

// bem mixin
@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 + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

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

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


/*-------------------------------- demo upload --------------------------*/
@include b(upload) {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
  @include e(input) {
    display: none;
  }

  @include e(tip) {
    font-size: 12px;
    color: $--color-text-regular;
    margin-top: 7px;
  }

  iframe {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
  }

  /* 照片墙模式 */
  @include m(picture-card) {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;

    i {
      font-size: 28px;
      color: #8c939d;
    }

    &:hover {
      border-color: $--color-primary;
      color: $--color-primary;
    }
  }
  &:focus {
    border-color: $--color-primary;
    color: $--color-primary;

    .el-upload-dragger {
      border-color: $--color-primary;
    }
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}