DroidPinkman
3/24/2019 - 12:18 AM

Aspect Ratio

Sass function to do the math of an aspect ratio given a width argument of either px by default or percentage or blank form em values.

aspect-ratio.scss
content_copyfile_download
// ----------------------------------------- Aspect Ratio
// Pixels are used by default if no $unit argument is passed.
//
// Examples use a 16:9 aspect ratio (i.e. 9/16)
// PIXEL
// height: aspect(500, 9/16);
//
// PERCENT
// height: aspect(500, 9/16, '%');
//
// EMs
// height: aspect(500, 9/16, '');
//
@function aspect($width, $ratio, $unit:px) {
  @if ($unit == px) {
  	@return ($width * ($ratio) + px);
  }@elseif ($unit == '%') {
    @return ($width * ($ratio) * 1.00%);
  }@else {
    @return ($width * ($ratio) * 1em);
  }
}