title: Sass Modularity -- Import additional partial within in a media query partial
body: <p>Everybody (hopefully) strives for code modularity. What I am trying to do is have 1 main Sass file which imports all of my modules, which are partials, and these partials can call their own groups of partials if need be. What I would like is, instead of calling media queries all over my codebase (as described here: <a href="http://css-tricks.com/media-queries-sass-3-2-and-codekit/" rel="noreferrer">http://css-tricks.com/media-queries-sass-3-2-and-codekit/</a>), have one media.sass file which manages all the different styles for each module's different screen sizes.</p>
  
  <p>Here is my file structure for the Sass files:</p>
  
  <pre><code>    sass
        | styles.sass
        | _media.sass
        | base
            | _variables.sass
            | _mixins.sass
        | menu
            | _menu.sass
            | _menu_mobile_portrait.sass
        | modal
            | _modal.sass
            | _modal_mobile_portrait.sass
  </code></pre>
  
  <p>Here is my main Sass file:</p>
  
  <p>styles.sass</p>
  
  <pre><code>    @import "base/variables"
      @import "base/mixins"
      @import "menu"
      @import "modal"
      ...
      @import "media"
  </code></pre>
  
  <p>The last line here is aimed at _media.sass, which I would LIKE to look like this:</p>
  
  <pre><code>    // #Mobile (Portrait)
      // ==================================================
  
          // Note: Design for a width of 320px
  
          @media only screen and (max-width: 767px)
            @import "menu/menu_mobile_portrait"
            @import "modal/modal_mobile_portrait"
  </code></pre>
  
  <p>Using the latest CodeKit, the files compile without any errors; however, the nested, imported modules in the media file don't show up in the compiled CSS.</p>