Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="teaser">
  <div class=teaser__img>
    <img src=http://placehold.it/350x100   
  </div>
  <p class=teaser__text>
    lorem ipsum
  </p>
</div>

<div class="teaser--small no-js">
  <div class=teaser__img>
    <img src=http://placehold.it/350x100   
  </div>
  <p class=teaser__text>
    lorem ipsum
  </p>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

.teaser{
  max-width: 400px;
  display: inline-block;
  &--small{
    @extend .teaser;
    max-width: 200px;
  } 
  &__img{
    padding: 1rem;
    .no-js &{
      padding: 5rem;
    }
  }
  &__text{
    color: green;
  }
}

SassMeister-output.css

.teaser, .teaser--small {
  max-width: 400px;
  display: inline-block;
}

.teaser--small {
  max-width: 200px;
}

.teaser__img {
  padding: 1rem;
}

.no-js .teaser__img {
  padding: 5rem;
}

.teaser__text {
  color: green;
}

SassMeister-rendered.html

<div class="teaser">
  <div class=teaser__img>
    <img src=http://placehold.it/350x100   
  </div>
  <p class=teaser__text>
    lorem ipsum
  </p>
</div>

<div class="teaser--small no-js">
  <div class=teaser__img>
    <img src=http://placehold.it/350x100   
  </div>
  <p class=teaser__text>
    lorem ipsum
  </p>
</div>