Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="badge">
  <span class="up-to">Up to</span>
  <span class="sale-text">40% off</span>
</div>

SassMeister-input.scss

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

.badge {
  background: #c30c30;
  border-radius: 40px;
  color: #fff;
  display: inline-block;
  font: 18px/1 sans-serif;
  padding: 20px;
  text-align: center;
  
  span {
    display: block;
  }
  
  .up-to {
    font-size: 13px;
  }
  .sale-text {
    
    font-size: 13px;
    
    &:first-line {
      display: block;
      font-size: 25px;
    }
  }
}

SassMeister-output.css

.badge {
  background: #c30c30;
  border-radius: 40px;
  color: #fff;
  display: inline-block;
  font: 18px/1 sans-serif;
  padding: 20px;
  text-align: center;
}

.badge span {
  display: block;
}

.badge .up-to {
  font-size: 13px;
}

.badge .sale-text {
  font-size: 13px;
}

.badge .sale-text:first-line {
  display: block;
  font-size: 25px;
}

SassMeister-rendered.html

<div class="badge">
  <span class="up-to">Up to</span>
  <span class="sale-text">40% off</span>
</div>