Skip to content

Instantly share code, notes, and snippets.

@ffdead

ffdead/if-resolution.scss

Created December 5, 2012 12:32
Download ZIP

Revisions

  1. ffdead revised this gist Dec 5, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion if-resolution.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    /* @author 14islands.com
    * SASS Functions to output a future proof min-resolution media query
    * SASS mixins for future proof resolution media query
    */

    @mixin if-min-resolution($dppx) {
    @@ -13,6 +13,7 @@
    @content;
    }
    }

    @mixin if-resolution($prefix, $dppx) {
    // 1px = 96dpi
    $dpi: $dppx * 96;
  2. ffdead renamed this gist Dec 5, 2012. 1 changed file with 0 additions and 0 deletions.
    0 if-resolution.js → if-resolution.scss
    View file
    File renamed without changes.
  3. ffdead revised this gist Dec 5, 2012. 1 changed file with 23 additions and 26 deletions.
    49 changes: 23 additions & 26 deletions if-resolution.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,31 +1,28 @@
    /* @author 14islands.com
    * SASS Function to output a future proof min-resolution media query
    *
    * Inspired by:
    * - http://alwaystwisted.com/post.php?s=2012-08-06-a-sass-mixin-for-media-queries-and-ie
    * - http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
    * - http://css-tricks.com/snippets/css/retina-display-media-query/
    /* @author 14islands.com
    * SASS Functions to output a future proof min-resolution media query
    */
    @mixin if-resolution($prefix, $dppx) {
    // 1px = 96dpi
    $dpi: $dppx * 96;
    @media
    (-webkit-#{$prefix}-device-pixel-ratio: #{$dppx}),
    ( #{$prefix}--moz-device-pixel-ratio: #{$dppx}),
    ( -o-#{$prefix}-device-pixel-ratio: #{$dppx*2}/2),
    ( #{$prefix}-device-pixel-ratio: #{$dppx}),
    ( #{$prefix}-resolution: #{$dpi}dpi),
    ( #{$prefix}-resolution: #{$dppx}dppx) {
    @content;
    }
    }

    @mixin if-min-resolution($dppx) {
    @include if-resolution(min, $dppx) {
    @content;
    }
    @include if-resolution(min, $dppx) {
    @content;
    }
    }

    @mixin if-max-resolution($dppx) {
    @include if-resolution(max, $dppx) {
    @content;
    }
    @include if-resolution(max, $dppx) {
    @content;
    }
    }
    @mixin if-resolution($prefix, $dppx) {
    // 1px = 96dpi
    $dpi: $dppx * 96;
    @media
    (-webkit-#{$prefix}-device-pixel-ratio: #{$dppx}),
    ( #{$prefix}--moz-device-pixel-ratio: #{$dppx}),
    ( -o-#{$prefix}-device-pixel-ratio: #{$dppx*2}/2),
    ( #{$prefix}-device-pixel-ratio: #{$dppx}),
    ( #{$prefix}-resolution: #{$dpi}dpi),
    ( #{$prefix}-resolution: #{$dppx}dppx) {
    @content;
    }
    }
  4. ffdead renamed this gist Dec 5, 2012. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.js → if-resolution.js
    View file
    File renamed without changes.
  5. ffdead renamed this gist Dec 5, 2012. 1 changed file with 0 additions and 0 deletions.
    0 if-resolution.js → gistfile1.js
    View file
    File renamed without changes.
  6. ffdead created this gist Dec 5, 2012.
    31 changes: 31 additions & 0 deletions if-resolution.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    /* @author 14islands.com
    * SASS Function to output a future proof min-resolution media query
    *
    * Inspired by:
    * - http://alwaystwisted.com/post.php?s=2012-08-06-a-sass-mixin-for-media-queries-and-ie
    * - http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
    * - http://css-tricks.com/snippets/css/retina-display-media-query/
    */
    @mixin if-resolution($prefix, $dppx) {
    // 1px = 96dpi
    $dpi: $dppx * 96;
    @media
    (-webkit-#{$prefix}-device-pixel-ratio: #{$dppx}),
    ( #{$prefix}--moz-device-pixel-ratio: #{$dppx}),
    ( -o-#{$prefix}-device-pixel-ratio: #{$dppx*2}/2),
    ( #{$prefix}-device-pixel-ratio: #{$dppx}),
    ( #{$prefix}-resolution: #{$dpi}dpi),
    ( #{$prefix}-resolution: #{$dppx}dppx) {
    @content;
    }
    }
    @mixin if-min-resolution($dppx) {
    @include if-resolution(min, $dppx) {
    @content;
    }
    }
    @mixin if-max-resolution($dppx) {
    @include if-resolution(max, $dppx) {
    @content;
    }
    }