iOS 7 vh unit workaround MIXIN

SassMeister-input.scss

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

/*

 _            ______           _            __ _
(_)          |___  /          | |          / _(_)
 _  ___  ___    / /_______   _| |__ ______| |_ ___  __
| |/ _ \/ __|  / /______\ \ / / '_ \______|  _| \ \/ /
| | (_) \__ \./ /        \ V /| | | |     | | | |>  <
|_|\___/|___/\_/          \_/ |_| |_|     |_| |_/_/\_\


This is a list of data maps and a mixin, to automate 
the workaround for iOS 7's non-support of the 'vh' unit.

REFERENCES

http://caniuse.com/#feat=viewport-units
https://gist.github.com/pburtchaell/e702f441ba9b3f76f587
http://stephen.io/mediaqueries/#iPhone
http://www.paulund.co.uk/ios-media-queries-boilerplate

*/

$ios-height: 0;
$ios-width: 0;

$ios-media: (
  // iPads in landscape
  (
    query-string: 'only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape)',
    width: 1024px,
    height: 768px
  ),
  // iPads in portrait
  (
    query-string: 'only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait)',
    width: 768px,
    height: 1024px
  ),
  // iPhone 6 in landscape
  (
    query-string: 'only screen and (device-width: 375px) and (device-height: 667px) and (orientation: landscape)',
    width: 667px,
    height: 375px
  ),
  // iPhone 6 in portrait
  (
    query-string: 'only screen and (device-width: 375px) and (device-height: 667px) and (orientation: portrait)',
    width: 375px,
    height: 667px
  ),
  // iPhone 6 Plus in landscape
  (
    query-string: 'only screen and (device-width: 414px) and (device-height: 736px) and (orientation: landscape)',
    width: 736px,
    height: 414px
  ),
  // iPhone 6 Plus in portrait
  (
    query-string: 'only screen and (device-width: 414px) and (device-height: 736px) and (orientation: portrait)',
    width: 414px,
    height: 736px
  ),
  // iPhone 5 & 5S in landscape
  (
    query-string: 'only screen and (device-width: 320px) and (device-height: 568px) and (orientation: landscape)',
    width: 568px,
    height: 320px
  ),
  // iPhone 5 & 5S in portrait
  (
    query-string: 'only screen and (device-width: 320px) and (device-height: 568px) and (orientation: portrait)',
    width: 320px,
    height: 568px
  ),
  // iPhone 2G-4S in landscape
  (
    query-string: 'only screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape)',
    width: 480px,
    height: 320px
  ),
  // iPhone 2G-4S in portrait
  (
    query-string: 'only screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait)',
    width: 320px,
    height: 480px
  )
);

@mixin ios-media() {
  @each $medium in $ios-media {
    $ios-height: map-get($medium, 'height') !global;
    $ios-width: map-get($medium, 'width') !global;
    @media #{map-get($medium, 'query-string')} {
      @content;
    }
  }
}

//  _            _
// | |          | |
// | |_ ___  ___| |_
// | __/ _ \/ __| __|
// | ||  __/\__ \ |_
//  \__\___||___/\__|

.test {
  height: 60vh;
  @include ios-media() {
    height: $ios-height * 0.6;
  }
}

SassMeister-output.css

/*

 _            ______           _            __ _
(_)          |___  /          | |          / _(_)
 _  ___  ___    / /_______   _| |__ ______| |_ ___  __
| |/ _ \/ __|  / /______\ \ / / '_ \______|  _| \ \/ /
| | (_) \__ \./ /        \ V /| | | |     | | | |>  <
|_|\___/|___/\_/          \_/ |_| |_|     |_| |_/_/\_\


This is a list of data maps and a mixin, to automate 
the workaround for iOS 7's non-support of the 'vh' unit.

REFERENCES

http://caniuse.com/#feat=viewport-units
https://gist.github.com/pburtchaell/e702f441ba9b3f76f587
http://stephen.io/mediaqueries/#iPhone
http://www.paulund.co.uk/ios-media-queries-boilerplate

*/
.test {
  height: 60vh;
}
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  .test {
    height: 460.8px;
  }
}
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  .test {
    height: 614.4px;
  }
}
@media only screen and (device-width: 375px) and (device-height: 667px) and (orientation: landscape) {
  .test {
    height: 225px;
  }
}
@media only screen and (device-width: 375px) and (device-height: 667px) and (orientation: portrait) {
  .test {
    height: 400.2px;
  }
}
@media only screen and (device-width: 414px) and (device-height: 736px) and (orientation: landscape) {
  .test {
    height: 248.4px;
  }
}
@media only screen and (device-width: 414px) and (device-height: 736px) and (orientation: portrait) {
  .test {
    height: 441.6px;
  }
}
@media only screen and (device-width: 320px) and (device-height: 568px) and (orientation: landscape) {
  .test {
    height: 192px;
  }
}
@media only screen and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
  .test {
    height: 340.8px;
  }
}
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) {
  .test {
    height: 192px;
  }
}
@media only screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) {
  .test {
    height: 288px;
  }
}