Skip to content

Instantly share code, notes, and snippets.

@bryanburgers
Created March 27, 2014 16:00
Show Gist options
  • Save bryanburgers/9810925 to your computer and use it in GitHub Desktop.
Save bryanburgers/9810925 to your computer and use it in GitHub Desktop.
Media Query mixin
.some-element {
// Default to mobile first.
color: blue;
@include mq(medium) {
// Styles for medium and up.
color: red;
}
@include mq(large) {
// styles for large and up.
color: green;
}
@include mq(small, only) {
// Styles for ONLY small. I don't use this often.
}
@include mq(medium, only) {
// Styles for ONLY medium. I'm going to omit large, only.
}
}
// Set these to your media queries.
$break-small: 650px;
$break-medium: 900px;
$ie8-size: false !default;
/**
* Use:
*
* @include mq(medium) {
* font-size: 100px;
* }
*
* If you want something to ONLY be used at that size, then the second
* parameter should be 'only'.
*
* @include mq(small, only) {
* font-size: 200px;
* }
*/
@mixin mq($size, $only: false) {
@if $size == small {
@if $only == only {
@include mq-helper(none, $break-small) {
@content;
}
}
@else if $only == medium {
@include mq-helper(none, $break-medium) {
@content;
}
}
@else {
@include mq-helper(none, none) {
@content;
}
}
}
@else if $size == medium {
@if $only == only {
@include mq-helper($break-small + 1, $break-medium) {
@content;
}
}
@else {
@include mq-helper($break-small + 1, none) {
@content;
}
}
}
@else if $size == large {
@if $only == only {
@include mq-helper($break-medium + 1, none) {
@content;
}
}
@else {
@include mq-helper($break-medium + 1, none) {
@content;
}
}
}
}
@mixin mq-helper($min: none, $max: none) {
@if $ie8-size {
@if (($min == none or $ie8-size > $min) and ($max == none or $ie8-size < $max)) {
@content;
}
}
@else {
@if $min == none and $max == none {
@content;
}
@else if $min and $max == none {
@media screen and (min-width: $min) {
@content
}
}
@else if $max and $min == none {
@media screen and (max-width: $max) {
@content;
}
}
@else {
@media screen and (min-width: $min) and (max-width: $max) {
@content;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment