Cacher is the code snippet organizer for pro developers

@mixin respond-at($media) {
    @media (min-width: $media){ @content; }
}

//Usage:
.selector {
  //...mobile first stuff
  @include respond-at(600px) {
    //.... do something
  }
}

.container { width: 320px; background: black;
  @include respond-at(30em) {
    width: 480px; background: $b;
  }
  @include respond-at(40em) {
    width: 640px; background: $y;    
  }
  @include respond-at(50em) {
    width: 800px; background: $g;
  }
  @include respond-at(61.25em) {
    width: 980px; background: $r;
  }
  
  &:after { content: '320px'; padding:4px 12px 6px 12px; font-weight: bold; font-size: 18px; border-radius: 2px; background: rgba(black,.3);
    @include respond-at(480px) {
      & { content: '480px'; }
    }
    @include respond-at(640px) {
      & { content: '640px'; }
    }
    @include respond-at(800px) {
      & { content: '800px'; }
    }
    @include respond-at(980px) {
      & { content: '980px'; }
    }
  }
  
}

//Styling stuff not needed for demo
.container { margin: 0 auto 20px; padding: 20px; }
pre { display: inline-block; padding: 20px; text-align: left; }
h4 { margin: 0; }

<h1>Damn Simple Sass Mixin for Content-Based Media Queries</h1>
<p>Good bye  <a href="http://css-tricks.com/naming-media-queries/" target="_blank">naming media queries!</a> - <a href="http://css-tricks.com/approaches-media-queries-sass/#comment-1587899"  target="_blank">Original comment on CSS-Tricks.com</a></p>
<hr>
<h2>Demo:</h2>
<p>For demo purposes, I had to choose certain widths (  320, 480, 640, 800 and 980), <br>
  but the mixin allows you to put <strong>ANY</strong> value and that value should always be defined by the width the content breaks at.</p>
<div class="container">Container @ </div>
<hr>
<h4>Mixin:</h4>
<pre>
@mixin respond-at($media) {
  @media (min-width: $media){ @content; }
}
</pre>
<h4>Usage:</h4>
<pre>
.selector {
  //&hellip;mobile first stuff
  @include respond-at(600px) { //Content-based breakpoint
    //&hellip;do something
  }
}
</pre>
<hr>
<p>Created by <a href="http://ricardozea.me/" target="_blank">Ricardo Zea</a></p>
<time datetime="1-5-2015">On: January 5, 2015</time>