Responsive CSS implementation in SASS

I just started looking in to SASS. Mixins looked like a nice feature, so I made some simple ones to handle my responsive CSS:

$phone-width: 420px;
$desktop-width: 1024px;

@mixin phone {
  @media (max-width: #{$phone-width}) {
    @content;
  }
}

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

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

I use them like this:

#header {
    width: auto;
    @include phone{
        width: 200px;
    }
}

I figured that I will probably need to define elements that should only be visible on some of the devices, so I made this implementation:

.phone, .tablet, .desktop { 
    display: none; 
} 

@include phone{
    .phone { display: block; } 
};

@include tablet{
    .tablet { display: block; } 
};

@include desktop{
    .desktop { display: block; } 
};

<div class="phone">visible on: phone</div>
<div class="tablet">visible on: tablet</div>
<div class="desktop">visible on: dekstop</div>
<div class="phone tablet">visible on: phone and tablet</div>

Works fine as far as I can tell. Any thoughts on improvements?