Generated by SassMeister.com.

BEM-singleclass.html

<div class="app-card">
  <div class="app-card__title"></div>
  <div class="app-card__content"></div>
</div>

<!-- a variation -->
<div class="app-card--tall">
  <div class="app-card__title"></div>
  <div class="app-card__content"></div>
</div>

y.sass

.app-card
  height: 400px
  
  &__title
    font-weight: bold
  
  &__content
    color: #ccc

  /* a variation */
  &--tall
    @extend .app-card
    height: 800px
    
    .app-card__title
      font-size: 1.5em
    
    .app-card__content
      font-size: 1.1em

z.css

.app-card, .app-card--tall {
  height: 400px;
}
.app-card__title {
  font-weight: bold;
}
.app-card__content {
  color: #ccc;
}

/* a variation */
.app-card--tall {
  height: 800px;
}
.app-card--tall .app-card__title {
  font-size: 1.5em;
}
.app-card--tall .app-card__content {
  font-size: 1.1em;
}