Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.20)
// Compass (v1.0.3)
// ----

// See in action @ http://www.sassmeister.com/gist/43a347037bf0afa447ae

///
// Mixin to make-up for bad VH support in iOS
// @param {string}  $property - CSS Property to style
// @param {number}  $vh       - Unitless, desired vh
// @param {number}  $add      - Amount to add to vh, can be negative
///
@mixin vh-polyfill($property, $vh, $add: null) {
  $media-queries:
    "all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)", // iPad with portrait orientation.
    "all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)", // iPad with landscape orientation.
    "screen and (device-aspect-ratio: 40/71)", // iPhone 5 You can also target devices with aspect ratio.
    "screen and (device-width: 320px) and (device-aspect-ratio: 2/3) and (orientation:portrait)"; // iPhone 4

  $heights: 1024px, 768px, 500px, 480px;

  $i: 1;
  @if $add == null {
    #{$property}: $vh * 1vh;

    @each $media-query in $media-queries {
      @media #{$media-query} {
        #{$property}: round(nth($heights, $i) * $vh / 100);
      }
      $i: $i + 1;
    }
  }
  @else {
    @if $add > 0 {
      #{$property}: calc(#{$vh * 1vh} + #{$add});
    }
    @else {
      #{$property}: calc(#{$vh * 1vh} - #{$add * -1});
    }

    @each $media-query in $media-queries {
      @media #{$media-query} {
        #{$property}: #{round(nth($heights, $i) * $vh / 100) + $add};
      }
      $i: $i + 1;
    }
  }
}

.foo {
  @include vh-polyfill(height, 100);
}

.bar {
  @include vh-polyfill(height, 90, -10px);
}

.baz {
  @include vh-polyfill(height, 50);
}

SassMeister-output.css

.foo {
  height: 100vh;
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  .foo {
    height: 1024px;
  }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  .foo {
    height: 768px;
  }
}
@media screen and (device-aspect-ratio: 40 / 71) {
  .foo {
    height: 500px;
  }
}
@media screen and (device-width: 320px) and (device-aspect-ratio: 2 / 3) and (orientation: portrait) {
  .foo {
    height: 480px;
  }
}

.bar {
  height: calc(90vh - 10px);
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  .bar {
    height: 912px;
  }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  .bar {
    height: 681px;
  }
}
@media screen and (device-aspect-ratio: 40 / 71) {
  .bar {
    height: 440px;
  }
}
@media screen and (device-width: 320px) and (device-aspect-ratio: 2 / 3) and (orientation: portrait) {
  .bar {
    height: 422px;
  }
}

.baz {
  height: 50vh;
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  .baz {
    height: 512px;
  }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  .baz {
    height: 384px;
  }
}
@media screen and (device-aspect-ratio: 40 / 71) {
  .baz {
    height: 250px;
  }
}
@media screen and (device-width: 320px) and (device-aspect-ratio: 2 / 3) and (orientation: portrait) {
  .baz {
    height: 240px;
  }
}