Sass scope with BEM

bem-card.html

<div class="card">
  <div class="card__value">
    Original
  </div>
</div>

<div class="card card--large">
  <div class="card__value">
    Large
  </div>
</div>


<div class="card card--large card--red">
  <div class="card__value">
    Large Red
  </div>
</div>

bem-card.scss

$black: #000;
$red: #E60000;
$pink: #FFC0CB;

.card {
  $el: &;
  padding: 2rem;
  margin: 3rem;
  text-align: center;
  border: 1px solid $black;
  border-radius: 12px;

  &__value {
    font-size: 1.5rem;
    color: $black;
  }

  // in this way we only need to modify the block instead of the elements one by one
  &--large {
    padding: 3rem;

    #{$el}__value {
      font-size: 3rem;
    }
  }
  
  // this is another way how to use it
  &--red #{$el} {
    border-color: $red;

    &__value {
      color: $red;
    }
  }
  
  // this is how you can combine 2 modifiers
  &--red#{$el}--disabled {
    border-color: $pink;
  }
}

bem-sass.css

.card {
  padding: 2rem;
  margin: 3rem;
  text-align: center;
  border: 1px solid #000;
  border-radius: 12px;
}
.card__value {
  font-size: 1.5rem;
  color: #000;
}
.card--large {
  padding: 3rem;
}
.card--large .card__value {
  font-size: 3rem;
}
.card--red {
  border-color: #e60000;
}
.card--red .card__value {
  color: #e60000;
}