Cacher is the code snippet organizer for pro developers

<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>

.carousel {
  max-width: 400px;
  display: inline-block;
}

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

.carousel__img {
  padding: 1rem;
}

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

.carousel__text {
  color: green;
}

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

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

<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>