Screen sizes Mobile first

//*** SCREEN SIZES ***//

// 320 - 479 px
$screen-ts-max: 479px;

// 480 - 767 px
$screen-xs-min: 480px;
$screen-xs-max: 767px;

// 768 - 991 px
$screen-sm-min: 768px;
$screen-sm-max: 991px;

// 992 - 1199px
$screen-md-min: 992px;
$screen-md-max: 1199px;

// 1200 - inf px
$screen-lg-min: 1200px;

// Screen media breakpoints
$screen-ts: "screen and (min-width: 0) and (max-width: #{$screen-ts-max})";
$screen-xs: "screen and (min-width: #{$screen-xs-min}) and (max-width: #{$screen-xs-max})";
$screen-sm: "screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})";
$screen-md: "screen and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})";
$screen-lg: "screen and (min-width: #{$screen-lg-min})";

// Screen media mixin
// How to use? Like this:
//
// @include smMin{
//   p{
//     color: red;
//   }
// }
//
// .class{
//   text-align: left;
//   @include mdMin{
//     text-align: right;
//   }
// }
//

@mixin respondFromTo ($size_from, $size_to){
  @media screen and (min-width: $size_from) and (max-width: $size_to){
    @content;
  }
}

@mixin tsMax {
  @media screen and (max-width: #{$screen-ts-max}) {
    @content;
  }
}

@mixin xsMin {
  @media screen and (min-width: #{$screen-xs-min}) {
    @content;
  }
}

@mixin xsMax {
  @media screen and (max-width: #{$screen-xs-max}) {
    @content;
  }
}

@mixin smMin {
  @media screen and (min-width: #{$screen-sm-min}) {
    @content;
  }
}

@mixin smMax {
  @media screen and (max-width: #{$screen-sm-max}) {
    @content;
  }
}

@mixin mdMin {
  @media screen and (min-width: #{$screen-md-min}) {
    @content;
  }
}

@mixin mdMax {
  @media screen and (max-width: #{$screen-md-max}) {
    @content;
  }
}

@mixin lgMin {
  @media screen and (min-width: #{$screen-lg-min}) {
    @content;
  }
}

@mixin tsOnly {
  @include respondFromTo(0,$screen-ts-max) {
    @content;
  }
}

@mixin xsOnly {
  @include respondFromTo($screen-xs-min,$screen-xs-max) {
    @content;
  }
}

@mixin smOnly {
  @include respondFromTo($screen-sm-min,$screen-sm-max) {
    @content;
  }
}

@mixin mdOnly {
  @include respondFromTo($screen-md-min,$screen-md-max) {
    @content;
  }
}

@mixin lgOnly {
  @media #{ $screen-lg } {
    @content;
  }
}


// BOOTSTRAP CONTAINER 970PX;
.container {
  @include lgMin {
    width: 970px;
  }
}

// Retina media query
@mixin retinaDisplay {
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
         only screen and (-o-min-device-pixel-ratio: 3/2),
         only screen and (min--moz-device-pixel-ratio: 1.5),
         only screen and (min-device-pixel-ratio: 1.5) {
    @content
  }
}