Sass Modularity - import additional partial inside a partial media request

Question

All (hopefully) strive for code modularity. What I'm trying to do is 1 main Sass file, which imports all my modules, which are partial, and these partial parts can invoke their own partition groups if necessary. I would like that instead of calling media queries throughout my code base (as described here: http://css-tricks.com/media-queries-sass-3-2-and-codekit/ ), there is one media file .sass which manages all the different styles for each module of different screen sizes.

Here is my file structure for 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, files compile without errors; however, nested, imported modules in the media file do not appear in compiled CSS.

Answer 1

Note the space indentation in the .sass file. This is problem. Solvable.

Is it amazing that he did not give me any compilation errors? Maybe because he was invested in something already commented on?