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

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

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

// Usage:

// p {
//   font-size: 16px;
//   @include tablet {
//     font-size: 18px;
//   }
//   @include desktop {
//     font-size: 20px;
//   }
// }

tabletWidth = 768px;
desktopSWidth = 1024px;
desktopLWidth = 1440px;

mobile()
  @media ( max-width: tabletWidth - 1 )
    {block}

tablet( up = true)
  if up is false // only tablets
    @media (min-width: tabletWidth) and (max-width: desktopSWidth - 1)
      {block}
  else
    @media (min-width: tabletWidth)
      {block}

desktop(size = '')
  if size is 'S'
    @media (min-width: desktopSWidth) and (max-width: desktopLWidth - 1)
      {block}
  else if size is 'L'
    @media (min-width: desktopLWidth)
      {block}
  else
    @media (min-width: desktopSWidth)
      {block}

/**
 * Now, we can rewrite our example above to use these new mixins.
 *
 * p
 *   font-size: 16px;
 *
 *   +tablet()
 *     font-size: 18px;
 *
 *   +desktop()
 *     font-size: 20px;
 *
 * Renders:
 * p {
 *   font-size: 16px;
 *   @media ()
 * }
 */