maintain-ratio.scss

/*
  Maintain ratio mixin. Great for responsive grids, or videos.
  https://gist.github.com/brianmcallister/2932463
  
  $ratio - Ratio the element needs to maintain.
  
  Examples
  
    // A 16:9 ratio would look like this:
    .element {
      @include maintain-ratio(16 9);
    }
*/
@mixin maintain-ratio($ratio: 1 1) {
  @if length($ratio) < 2 or length($ratio) > 2 {
    @warn "$ratio must be a list with two values."
  }

  $width: 100%;
  $height: percentage(nth($ratio, 2) / nth($ratio, 1));
  
  width: $width;
  height: 0;
  padding-bottom: $height;
}