Skip to content

Instantly share code, notes, and snippets.

@jacquescrocker

jacquescrocker/_screens.sass

Created January 17, 2013 21:34
Download ZIP

Revisions

  1. Jacques Crocker revised this gist Jan 17, 2013. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions _screens.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,10 @@
    // defines some media block mixins for use
    //
    // e.g.
    // +phone-landscape-and-down
    // float: none
    // margin-left: 20px
    //
    $media-phone-landscape: 480px
    $media-tablet-portrait: 768px
  2. Jacques Crocker created this gist Jan 17, 2013.
    54 changes: 54 additions & 0 deletions _screens.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    // defines some media block mixins for use
    $media-phone-landscape: 480px
    $media-tablet-portrait: 768px
    $media-tablet-landscape: 980px

    @mixin tablet-portrait-and-up
    @media only screen and (min-width: $media-tablet-portrait)
    @content

    @mixin tablet-portrait-and-down
    @media only screen and (max-width: ($media-tablet-landscape - 1px))
    @content

    @mixin tablet-landscape-and-up
    @media only screen and (min-width: $media-tablet-landscape)
    @content

    @mixin phone-landscape-and-down
    @media only screen and (max-width: ($media-tablet-portrait - 1px))
    @content

    @mixin phone-portrait-and-down
    @media only screen and (max-width: ($media-phone-landscape - 1px))
    @content

    @mixin tablet-landscape
    +tablet-landscape-and-up
    @content

    @mixin tablet-portrait
    @media only screen and (min-width: ($media-tablet-portrait)) and (max-width: ($media-tablet-landscape - 1px))
    @content

    @mixin touch-disabled
    body.touch-disabled
    @content

    @mixin touch-enabled
    body.touch-enabled
    @content

    @mixin phone-landscape
    @media only screen and (min-width: ($media-phone-landscape)) and (max-width: ($media-tablet-portrait - 1px))
    @content

    @mixin phone-portrait
    +phone-portrait-and-down
    @content

    @mixin retina-only
    @media only screen and (-webkit-min-device-pixel-ratio: 2)
    @content