Skip to content

Instantly share code, notes, and snippets.

@SimplGy

SimplGy/screenSizeHelpers.sass

Last active December 20, 2015 21:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SimplGy/6197533 to your computer and use it in GitHub Desktop.
Save SimplGy/6197533 to your computer and use it in GitHub Desktop.
Download ZIP
Allows you to use simple block statements to conditionally target +phone, +desktop, and +tablet
Raw
screenSizeHelpers.sass
$sizePhone: 603px
$sizeTablet: 1024px
@mixin phone
@media (max-width: $sizePhone)
@content
@mixin tablet
@media (min-width: $sizePhone+1) and (max-width: $sizeTablet)
@content
@mixin desktop
@media (min-width: $sizeTablet+1)
@content
@SimplGy
Copy link
Author

SimplGy commented Aug 9, 2013

Usage:

h1
  font-size: 50px
  +phone
    font-size: 25px

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment