Generated by SassMeister.com.

SassMeister-input-HTML.jade

.three-by-two
    p 3:2
    
.four-by-three
    p 4:3
    
.sixteen-by-nine
    p 16:9

SassMeister-input.sass

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

@mixin aspect-ratio($result)
  position: relative
  
  &:before
    content: ''
    display: block
    padding-bottom: percentage($result)
  
  > *
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 0

.three-by-two
  @include aspect-ratio(2/3)
  background-color: pink
  
.four-by-three
  @include aspect-ratio(3/4)
  background-color: green
  
.sixteen-by-nine
  @include aspect-ratio(9/16)
  background-color: blue
  
body > *
  float: left
  position: relative
  width: 25%
  margin: 10px
  color: white
  text-align: center

SassMeister-output.css

.three-by-two {
  position: relative;
  background-color: pink;
}
.three-by-two:before {
  content: "";
  display: block;
  padding-bottom: 66.66667%;
}
.three-by-two > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.four-by-three {
  position: relative;
  background-color: green;
}
.four-by-three:before {
  content: "";
  display: block;
  padding-bottom: 75%;
}
.four-by-three > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.sixteen-by-nine {
  position: relative;
  background-color: blue;
}
.sixteen-by-nine:before {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}
.sixteen-by-nine > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

body > * {
  float: left;
  position: relative;
  width: 25%;
  margin: 10px;
  color: white;
  text-align: center;
}

SassMeister-rendered.html

<div class="three-by-two">
  <p>3:2</p>
</div>
<div class="four-by-three">
  <p>4:3</p>
</div>
<div class="sixteen-by-nine">
  <p>16:9</p>
</div>