sass responsive layout mixins

layout.scss

$tablet-width: 768px;
$desktop-width: 1024px;

@mixin tablet {
  @media (max-width: #{$tablet-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$tablet-width}) {
    @content;
  }
}

@mixin retina {
  @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
    @content;
  }
}

@mixin print {
  @media print {
    @content;
  }
}

main.sass

.main {
  @include tablet {
    background-color: '#ccc'
  }

  @include desktop {
    backgound-color: '#fff'
  }

}