Generated by SassMeister.com.

demo.css

.box, .announcement {
  background: gray;
  padding: 5px;
  margin: 10px;
}

.box__header {
  background: orange;
  padding: 5px;
  margin: 10px;
}

.box__content {
  background: yellow;
  padding: 5px;
  margin: 10px;
}

demo.html

<div class="box">
  <div class="box__header">
    <p>.box__header</p>
  </div>
  <div class="box__content">
    <p>.box__content</p>
  </div>
</div>

<div class="announcement">
  <div class="announcement__header">
    <p>.announcement__header</p>
  </div>
  <div class="announcement__content">
    <p>.announcement__content</p>
  </div>
</div>

demo.scss

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

.box {
 background: gray;
 padding: 5px;
 margin: 10px;
 &__header {
   background: orange;
   padding: 5px;
   margin: 10px;
 }
 &__content {
   background: yellow;
   padding: 5px;
   margin: 10px;
 }
}

.announcement {
  @extend .box;
}