Sass Media Queries Mixins

Instead of writing long css expressions you can do it simpler with these mixins. You can learn more here: https://github.com/paranoida/sass-mediaqueries

$units: 1px !default;

@mixin screen($res-first, $res-last: $res-first)
{
  @if $res-first == $res-last
  {
    @media screen and ( max-width: if(unitless($res-first), $res-first*$units, $res-first) )
    {
      @content;
    }
  }
  @else if $res-first < $res-last
  {
    @media screen and ( min-width: if(unitless($res-first), $res-first*$units, $res-first) ) and ( max-width: if(unitless($res-last), $res-last*$units, $res-last) )
    {
      @content;
    }
  }
}

@mixin min-screen($res)
{
  @media screen and ( min-width: if(unitless($res), $res*$units, $res) )
  {
    @content;
  }
}

Example 1:

.example
{
    @include min-screen(320) { width: 300px; }
}

Will be compiled to:

@media screen and ( min-width: 320px) )
{
  .example
  {
    width: 300px;
  }
}

Example 2:

.example
{  
    @include screen(1024) { background: red; }
}

Will be compiled to:

@media screen and ( max-width: 1024px )
{
  .example
  {
    color: red;
  }
}

Example 3:

.example
{  
    @include screen(768, 1280) { background: black; }
}

Will be compiled to:

@media screen and ( min-width: 768px ) and ( max-width: 1280px )
{
  .example
  {
    background: black;
  }
}