Skip to content

Instantly share code, notes, and snippets.

@simmo
Created March 29, 2012 08:49
Show Gist options
  • Save simmo/2235117 to your computer and use it in GitHub Desktop.
Save simmo/2235117 to your computer and use it in GitHub Desktop.
SASS: Using @content (3.2) - responding to devices
@mixin respond_to($device) {
@if $device == handheld {
@media only screen and (max-width: 767px) {
@content
}
} @else if $device == handheld-landscape {
@media only screen and (max-width: 767px) and (orientation: landscape) {
@content
}
} @else if $device == handheld-portrait {
@media only screen and (max-width: 767px) and (orientation: portrait) {
@content
}
} @else if $device == tablet {
@media only screen and (min-width: 768px) and (max-width: 980px) {
@content
}
} @else if $device == tablet-landscape {
@media only screen and (min-width: 768px) and (max-width: 980px) and (orientation: landscape) {
@content
}
} @else if $device == tablet-portrait {
@media only screen and (min-width: 768px) and (max-width: 980px) and (orientation: portrait) {
@content
}
} @else if $device == large {
@media only screen and (min-width: 1210px) {
@content
}
}
}
// USAGE
body {
background: #fff;
}
@include respond_to(large) {
body {
background: green;
}
}
@include respond_to(tablet) {
body {
background: orange;
}
}
@include respond_to(handheld) {
body {
background: red;
}
}
@krisbulman
Copy link

Oops! forgot to upgrade to Sass 3.2, disregard :P

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