BEM example

SassMeister-input-HTML.html

<div class="block">
  <div class="block--element">
    <h3>Headline Level 3</h3>
    <div class="block--element_modifier">
      <p>Other stuff you might need to know</p>  
    </div>
  </div>
  <div class="block--element">
    <h3>Headline Level 3</h3>
    <div class="block--element_modifier">
      <p>Other stuff you might need to know</p>  
    </div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

$mango: mix(gold, tomato, 100%);
$radius: .25rem;

.block {
  font-family: Avenir;
  background: $mango;
  padding: .5rem;
  max-width: 25rem;
  border-radius: $radius;
  color: goldenrod;
  h3 {
    font-weight: 300;
    text-transform: uppercase;
  }
  &--element {
    background: lighten($mango, 25%);
    border-radius: $radius;
    padding: .5rem;
    margin-bottom: 2rem;
    &:last-of-type { margin-bottom: 0; }
    &_modifier {
      border-top: 3px solid tomato;
    }
  }
}

SassMeister-output.css

.block {
  font-family: Avenir;
  background: gold;
  padding: .5rem;
  max-width: 25rem;
  border-radius: 0.25rem;
  color: goldenrod;
}
.block h3 {
  font-weight: 300;
  text-transform: uppercase;
}
.block--element {
  background: #ffeb80;
  border-radius: 0.25rem;
  padding: .5rem;
  margin-bottom: 2rem;
}
.block--element:last-of-type {
  margin-bottom: 0;
}
.block--element_modifier {
  border-top: 3px solid tomato;
}

SassMeister-rendered.html

<div class="block">
  <div class="block--element">
    <h3>Headline Level 3</h3>
    <div class="block--element_modifier">
      <p>Other stuff you might need to know</p>  
    </div>
  </div>
  <div class="block--element">
    <h3>Headline Level 3</h3>
    <div class="block--element_modifier">
      <p>Other stuff you might need to know</p>  
    </div>
  </div>
</div>