public
Last active

  • Download Gist
README.md
Markdown

Media Query Variables

@author Cristian Ferrari <cristianferrarig@gmail.com> || @energettico

Licensed under WTFPL.

SCSS usage:

// Usage
@import "vendor/mediaquery";

// SCSS usage
@media screen #{$to-phone} { /* CSS here */ }

// Or mixin usage:
@include respond($to-small)   { /* CSS here ... */ };
@include respond($from-small) { /* CSS here ... */ };

@include respond(to 320px)   { /* CSS here ... */ };
@include respond(from 320px) { /* CSS here ... */ };

@include respond(from 320px, $portrait)            { /* CSS here ... */ };
@include respond(from 320px, to 500px, $landscape) { /* CSS here ... */ };

@include respond(from 320px, to 500px)   { /* CSS here ... */ };
@include respond(from 320px, $to-medium) { /* CSS here ... */ };

Changelog:

  • DEC/04/2013

    • Add to() function for don't repeat 'and (max-width: #{$size})'.
    • Add from() function for don't repeat 'and (min-width: #{1 + $size})'.
    • Add orientation() function for don't repeat 'and (orientation: #{$orientation})'.
    • Upgrade respond() mixin for make it more useful.
    • Remove From/To variables, with new respond() mixin don't need it any more.
    • Update mixin usage
  • OCT/11/2013

    • Change some variables names
    • Add devices variables
    • Upgrade respond() mixin
    • Update usage
  • JUL/23/2013

    • Change variables names
    • Add respond() mixin
    • Update usage
  • FEB/11/2013

    • Add orientations.
    • Bug fixes.
    • First release.
_mediaquery.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
//
// MEDIA QUERY VARIABLES, FUNCTIONS AND MIXIN
// gist.github.com/cristianferrarig/4755293
//
// @author Cristian Ferrari
// @email cristianferrarig@gmail.com
// @github cristianferrarig
//
// # Usage
// @import "vendor/mediaquery";
//
// # SCSS usage:
// @media screen #{$to-phone} { /* CSS here */ }
//
// # Or mixin usage:
// @include respond($to-small) { /* CSS here ... */ };
// @include respond($from-small) { /* CSS here ... */ };
//
// @include respond(to 320px) { /* CSS here ... */ };
// @include respond(from 320px) { /* CSS here ... */ };
//
// @include respond(from 320px, $portrait) { /* CSS here ... */ };
// @include respond(from 320px, to 500px, $landscape) { /* CSS here ... */ };
//
// @include respond(from 320px, to 500px) { /* CSS here ... */ };
// @include respond(from 320px, $to-medium) { /* CSS here ... */ };
//
 
 
 
@function to($size) {
@return unquote('and (max-width: #{$size})');
}
@function from($size) {
@return unquote('and (min-width: #{1 + $size})');
}
@function orientation($orientation) {
@return unquote('and (orientation: #{$orientation})');
}
 
 
 
@mixin respond($breakpoints...) {
$mediaquery: null;
 
@each $breakpoint in $breakpoints {
@if type-of($breakpoint) == list {
$respond: nth($breakpoint, 1);
$size: nth($breakpoint, 2);
 
@if $respond == 'from' { $breakpoint: from($size); }
@else if $respond == 'to' { $breakpoint: to($size); }
}
 
$mediaquery: append($mediaquery, $breakpoint, space);
}
 
@media screen #{$mediaquery} {
@content;
}
}
 
 
 
// Generic names
// ---------------------------------------------------
 
// Supported sizes
$size-mini: 480px !default;
$size-small: 768px !default;
$size-medium: 992px !default;
$size-large: 1200px !default;
$size-oversized: 1500px !default;
 
// To queries
$to-mini: to($size-mini);
$to-small: to($size-small);
$to-medium: to($size-medium);
$to-large: to($size-large);
$to-oversized: to($size-oversized);
 
// From queries
$from-mini: from($size-mini);
$from-small: from($size-small);
$from-medium: from($size-medium);
$from-large: from($size-large);
$from-oversized: from($size-oversized);
 
 
 
// Devices names
// ---------------------------------------------------
 
// Supported sizes
$screen-phone: $size-mini;
$screen-tablet: $size-small;
$screen-laptop: $size-medium;
$screen-desktop: $size-large;
$screen-cinema: $size-oversized;
 
// To queries
$to-phone: to($screen-phone);
$to-tablet: to($screen-tablet);
$to-laptop: to($screen-laptop);
$to-desktop: to($screen-desktop);
$to-cinema: to($screen-cinema);
 
// From queries
$from-phone: from($screen-phone);
$from-tablet: from($screen-tablet);
$from-laptop: from($screen-laptop);
$from-desktop: from($screen-desktop);
$from-cinema: from($screen-cinema);
 
 
 
// Others
// ---------------------------------------------------
 
// Container
$size-container: 960px !default;
$to-container: to($size-container);
$from-container: from($size-container);
 
// Orientation
$portrait: orientation(portrait);
$landscape: orientation(landscape);

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.