Sass Responsive Mixins

responsive.scss

@function percentage-vw($num) {
  $per: ($num * 100);
  @return #{$per}vw;
}

@mixin responsive-width($width, $base: 750px) {
  width: percentage($width / $base);
  max-width: $width;
}

@mixin responsive-height($width, $height) {
  height: percentage($height / $width);
  max-height: $height;
}

@mixin responsive-spacer($width, $height) {
  &::before {
    content: '';
    display: block;
    padding-top: percentage($height / $width);
    float: left;
  }
}

//@include responsive(image-width($img), image-height($img));
@mixin responsive($width, $height, $base: 750px, $size: true, $spacer: true) {
  @if ($size == true) {
    background-size: contain;
  }
  width: percentage($width / $base);
  max-width: $width;
  max-height: $height;
  overflow: hidden;

  @if($spacer == true) {
    @include responsive-spacer($width, $height);
  }
}

@mixin clear-responsive() {
  max-width: 100%;
  max-height: 100%;
  &::before {
    display: none;
  }
}