title: extend Compass breakpoint mixin to avoid duplicates
body: <p>I am using Compass mixin to create media queries for retina like in example:</p>
  
  <pre><code>header {
    height: $header-image-height;
    text-align: center;
    position: relative;
    @include breakpoint($standard-resolution) {
      background:
              linear-gradient(
                              rgba(0, 0, 0, 0.1),
                              rgba(0, 0, 0, 0.1)
              ),
              url(../../img/dist/xxx.jpg) center center no-repeat;
    }
    @include breakpoint($retina-resolution) {
  
      background:
              linear-gradient(
                              rgba(0, 0, 0, 0.1),
                              rgba(0, 0, 0, 0.1)
              ),
              url(../../img/dist/xxx_2x.jpg) center center no-repeat;
      background-size: 1176px auto;
    }
    color: $header-color;
    @extend %montserrat-bold;
  }
  </code></pre>
  
  <p>It works well. But if I put the same mixin into another element, I will get duplicated output of @media at the end - one for each element:</p>
  
  <pre><code>@media screen and (max-resolution: 1.9999dppx), screen and (-webkit-max-device-pixel-ratio: 1.9999), screen and (max--moz-device-pixel-ratio: 1.9999), screen and (max-resolution: 191.9904dpi) {
    header {
      background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../../img/dist/xxx.jpg) center center no-repeat;
    }
  }
  </code></pre>
  
  <p>And the same output for another elements. Is there any way I could somehow make placeholder from this mixin, so all elements would be under the same single @media directive?</p>