Skip to content

Instantly share code, notes, and snippets.

@alexcabrera
Created May 16, 2012 22:00
Show Gist options
  • Select an option

  • Save alexcabrera/2714322 to your computer and use it in GitHub Desktop.

Select an option

Save alexcabrera/2714322 to your computer and use it in GitHub Desktop.
Best. Mixin. Ever.
$break_small: 320px
$break_large: 1024px
@mixin respond-to($media)
@if $media == handhelds
@media only screen and (max-width: $break_small)
@content
@else if $media == medium-screens
@media only screen and (min-width: $break_small + 1) and (max-width: $break_large - 1)
@content
@else if $media == wide-screens
@media only screen and (min-width: $break_large)
@content
img.avatar
+border-radius(50em)
+respond-to(handhelds)
width: 70px
+respond-to(medium-screens)
max-width: 100%
+respond-to(wide-screens)
max-width: 120px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment