title: SASS code structure for media queries
body: <p>I'm using SASS to create a responsive site. At the moment, my code is structured into a number of partials:</p>
  
  <ul>
  <li>Some default colours and sizes </li>
  <li>Overall Layout</li>
  <li>Partial for each element</li>
  </ul>
  
  <p>As a result of this organisation I'm finding that I'm ending up with the media queries being declared numerous times through the resulting CSS - it just feels messy. As a result I've been working with a few ideas to keep the current structure, but end up with a simpler resulting code.</p>
  
  <p>My idea goes something like this:</p>
  
  <ol>
  <li>A variable contains a list of the partials to <code>@import</code></li>
  <li>A variable contains a list of the media query sizes (always using min-width, therefore this list is nothing more than a string of numbers)</li>
  <li>Each partial (<code>_footer.scss</code>, <code>_header.scss</code>) would then contain a <code>@mixin</code> titles something like - content-footer, content-header, etc</li>
  <li>Those <code>@mixin</code>'s would take a single variable relating to the media-query and output the appropriate code for that condition.</li>
  <li><code>style.scss</code> would <code>@import</code> each partial from the list,</li>
  <li>then cycle through each media-size and partial respectively, calling the function and media size.</li>
  </ol>
  
  <p>The above process would result in something like this being effected...</p>
  
  <pre><code>@import 'footer';
  @import 'header';
  @include content-footer(0);
  @include content-header(0);
  @include content-footer(320);
  @include content-header(320);
  @include content-footer(640);
  @include content-header(640);
  </code></pre>
  
  <p>etc..</p>
  
  <p>My question is this - how do I call the dynamically titled <code>@mixin</code>? Something like <code>content-#{$partial}</code> seems like it should work, but doesn't.</p>
  
  <p>I suppose if this doesn't work, then I could re-import the partial each time, but this seems overkill...</p>
  
  <pre><code>@import 'footer';
  @include content(0);
  @import 'header';
  @include content(0);
  @import 'footer';
  @include content(320);
  @import 'header';
  @include content(320);
  @import 'footer';
  @include content(640);
  @import 'header';
  @include content(640);
  </code></pre>