Skip to content

Instantly share code, notes, and snippets.

@jacquescrocker
Created January 17, 2013 21:34
Show Gist options
  • Save jacquescrocker/4559993 to your computer and use it in GitHub Desktop.
Save jacquescrocker/4559993 to your computer and use it in GitHub Desktop.
Block Mixins (sass 3.2). You can use these like:
// 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
$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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment