Skip to content

Instantly share code, notes, and snippets.

@carambula
Created October 17, 2012 19:33
Show Gist options
  • Select an option

  • Save carambula/3907614 to your computer and use it in GitHub Desktop.

Select an option

Save carambula/3907614 to your computer and use it in GitHub Desktop.
Make any attribute responsive in one line
@mixin responsive($property: width, $wide: null, $full: null, $ipad-landscape: null, $ipad-portrait: null, $iphone-landscape: null, $iphone-portrait: null)
#{$property}: $full
@if $wide != null
@media only screen and (min-width: 1280px)
#{$property}: $wide
@if $ipad-landscape != null
@media only screen and (min-width: 1024px) and (max-width: 1124px)
#{$property}: $ipad-landscape
@if $ipad-portrait != null
@media only screen and (min-width: 768px) and (max-width: 1024px)
#{$property}: $ipad-portrait
@if $iphone-landscape != null
@media only screen and (min-width: 464px) and (max-width: 767px)
#{$property}: $iphone-landscape
@if $iphone-portrait != null
@media only screen and (max-width: 463px)
#{$property}: $iphone-portrait
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment