MQsize

gistfile1.txt

// conditions map
$condMap: (
 "screen": "only screen",
  "print": "only print",
  "retina": "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 120dpi)"
);

//set value by key in scss map
@function map-set($map, $key, $value) {
  $new: ($key: $value);
  @return map-merge($map, $new);
}

// generate MediaQuery strings
@each $size in $sizesList {
  $condMap: map-set($condMap, "<#{nth($size,1)}", "(max-width: #{nth($size,2) - 1})");
  $condMap: map-set($condMap, ">#{nth($size,1)}", "(min-width: #{nth($size,2)})");
}

// media query mixin
@mixin mq($args...) {
  $query: "";
  @for $i from 1 through length($args) {
    $tmp: map-get( $condMap, nth($args, $i));
    $op: "";
        @if ( $i > 1 ) {
          $op: "";
          $query: append(unquote($query), unquote("and"), 'space');
          $query: append(unquote($query), unquote(#{$tmp}), 'space');
        }@else {
          $query: append(unquote($query), #{$tmp}, 'space');
        }
  }
  @media #{$query} { @content; }
}




@if($developer == "true") {
  @each $size in $sizesList {
    @media screen and (min-width: #{nth($size,2)}) {
      body:after {
        content: '#{nth($size,1)}';
      }
      body:before {
        $sli:'';
        @each $size in $sizesList {
          @if($sli != '') {
            $sli: '#{append($sli, '-')}';
          }
          $sli: '#{append($sli, '#{nth($size,1)}')}';
        }
        //content: '#{nth($size,1)}';
        content: $sli;
      }
    }
  }
}

// display current MQ name
@if($developer == "true") {
  @each $size in $sizesList {
    @media screen and (min-width: #{nth($size,2)}) {
      body:after {
        content: '#{nth($size,1)}';
      }
      body:before {
        $sli:'';
        @each $size in $sizesList {
          @if($sli != '') {
            $sli: '#{append($sli, '-')}';
          }
          $sli: '#{append($sli, '#{nth($size,1)}')}';
        }
        //content: '#{nth($size,1)}';
        content: $sli;
      }
    }
  }
}