title: Styles for multiple breakpoints in SASS
body: <p>I've defined two mixins in SASS that allow me to place media queries easily. The problem I'm encountering is that I'm repeating myself frequently across many queries. That is to say, some of my style changes are the same for tablet and mobile breakpoints and others are different. Example:</p>
  
  <pre><code>.foo
    float: left
    width: 50%
    +tablet()
      float: none
      display: block
      width: 100%
    +mobile()
      float: none
      display: block
      width: 100%
  </code></pre>
  
  <p>Where my mixins are defined like this:</p>
  
  <pre><code>=tablet
    @media (min-width: #{$mobile-width} + 1) and (max-width: #{$tablet-width})
      @content
  
  =mobile
    @media (max-width: #{$mobile-width})
      @content
  </code></pre>
  
  <p>I'd love to do something like this:</p>
  
  <pre><code>...
  +tablet(), +mobile
    float: none
    display: block
    width: 100%
  </code></pre>
  
  <p>That doesn't compile, so what is the best way to keep my SASS stylesheets DRY?</p>