Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="pillar">
  <div class="overview">
  <div class="banner">
    <h2 class="title">
      Check out our new deal
    </h2>
    <p class="content">
      100% off until 13/13/23
    </p>
  </div>
  </div>
</body>

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

.pillar {
  font-size: large;
  background-color: gray;
  padding: 20px;
  .overview {
    font-family: sans-serif;
    color: white;
    .banner {
      background-color: navy;
      padding: 6px;
      
      .title {
        font-size: 150%;
        &:hover {
            background-color: purple;
        }
      }
      .content {
        font-size: 125%;
      }
    }
  }
}

SassMeister-output.css

.pillar {
  font-size: large;
  background-color: gray;
  padding: 20px;
}

.pillar .overview {
  font-family: sans-serif;
  color: white;
}

.pillar .overview .banner {
  background-color: navy;
  padding: 6px;
}

.pillar .overview .banner .title {
  font-size: 150%;
}

.pillar .overview .banner .title:hover {
  background-color: purple;
}

.pillar .overview .banner .content {
  font-size: 125%;
}

SassMeister-rendered.html

<div class="pillar">
  <div class="overview">
  <div class="banner">
    <h2 class="title">
      Check out our new deal
    </h2>
    <p class="content">
      100% off until 13/13/23
    </p>
  </div>
  </div>
</body>