Skip to content

Instantly share code, notes, and snippets.

@ralgh
Created December 4, 2012 17:51
Show Gist options
  • Select an option

  • Save ralgh/4206814 to your computer and use it in GitHub Desktop.

Select an option

Save ralgh/4206814 to your computer and use it in GitHub Desktop.
Yet another variation of a respond-to mixin.
// sass 3.2 or higher required
@mixin respond-to($min-width, $max-width: null) {
$fix-mqs: false !default;
// If we're outputting for a fixed media query set...
@if $fix-mqs {
// ...and if we should apply these rules...
@if $max-width != null {
@if (($fix-mqs >= $min-width) and ($fix-mqs <= $max-width)) {
// ...output the content the user gave us.
@content;
}
} @elseif ($fix-mqs >= $min-width) and $max-width == null {
// ...output the content the user gave us.
@content;
}
} @else {
// Otherwise, output it using a regular media query
$mq: "only screen and (min-width: #{$min-width})";
@if $max-width{
$mq: "#{$mq} and (max-width: #{$max-width})";
}
@media #{$mq} {
@content;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment