Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="wrapperclass">
  <span> 16:9 </span>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// Toolkit (v2.0.0.alpha.10)
// ----

@import "toolkit";
@import "toolkit/kickstart";

.wrapperclass {
  @include intrinsic-ratio(16/9, 33%);
  background-color: red;
  text-align: center;
  color: white;
  font-size: 15em;
  margin: 0 auto;

  span {
    padding-top: 50px;
    background-color: green;
  }
}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
}

.wrapperclass {
  position: relative;
  height: 0;
  padding-top: 18.5625%;
  width: 33%;
  background-color: red;
  text-align: center;
  color: white;
  font-size: 15em;
  margin: 0 auto;
}
.wrapperclass > * {
  display: block;
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  top: 0;
  margin: 0;
  padding: 0;
}
.wrapperclass span {
  padding-top: 50px;
  background-color: green;
}

SassMeister-rendered.html

<div class="wrapperclass">
  <span> 16:9 </span>
</div>