Skip to content

Instantly share code, notes, and snippets.

@lajlev
Created April 11, 2012 16:12
Show Gist options
  • Save lajlev/2360294 to your computer and use it in GitHub Desktop.
Save lajlev/2360294 to your computer and use it in GitHub Desktop.
Sass - Media queries made simple
//
// sass - Media queries made simple
//
// @require sass-3.2 (you need eventually to do "sudo gem install sass --pre")
//
// Inspired by Maxime Thirouin & Mason Wendell
/* How to use it?
.class-name {
@include mq(phone) { color:pink }
@include mq(tablet) { color:blue }
@include mq(phone) { color:green }
}
*/
// Breakpoints
$small: 960px !default; // 1024 eg. common resolution PC
$medium: 520px !default; // eg. portrait iPad
@mixin mq($media) {
@if $media == phone {
@media (max-width: $small) { @content; }
}
@else if $media == tablet {
@media (min-width: $small + 1) and (max-width: $medium - 1) { @content; }
}
@else if $media == labtop {
@media (min-width: $medium) { @content; }
}
}
// orientation (horizontal & vertical)
@mixin mq-portrait { @media (orientation:portrait) { @content } }
@mixin mq-landscape { @media (orientation:landscape) { @content } }
// shortcuts
@mixin mq-h { @include media-portrait { @content } }
@mixin mq-v { @include media-landscape { @content } }
// high resolution screen
@mixin mq-highres($coefficient: 2)
{
$oCoef: $coefficient*2;
@media
(-webkit-min-device-pixel-ratio: $coefficient),
(-moz-min-device-pixel-ratio: $coefficient),
(-o-min-device-pixel-ratio: $oCoef/2),
(min-device-pixel-ratio: $coefficient)
{
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment