Sass Modularity -- Import additional partial within in a media query partial

Question

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: http://css-tricks.com/media-queries-sass-3-2-and-codekit/), have one media.sass file which manages all the different styles for each module's different screen sizes.

Here is my file structure for the Sass files:

    sass
      | styles.sass
      | _media.sass
      | base
          | _variables.sass
          | _mixins.sass
      | menu
          | _menu.sass
          | _menu_mobile_portrait.sass
      | modal
          | _modal.sass
          | _modal_mobile_portrait.sass

Here is my main Sass file:

styles.sass

    @import "base/variables"
    @import "base/mixins"
    @import "menu"
    @import "modal"
    ...
    @import "media"

The last line here is aimed at _media.sass, which I would LIKE to look like this:

    // #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"

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.

Answer 1

Note the indented whitespace in the .sass file. That's the problem. Solved.

Surprising that it didn't give me any compilation errors? Maybe because it was nested within something already commented out?