Modular-Sass-One-Media-Query: A CSS repository from Bushwazi

##Modular Sass using One Media Query demo

I create my folder structure and have a modules folder, but then once I get into the media queries, I find myself adding the addition layouts into a different file then the module file. I don't want to have media queries called all over my css and I don't want my module SASS broken into different files.

The solution I've decided to use is adding mixins into my module file and then calling them in another area, so then all the sass related to the module is in one file.

Is there a smarter solution?

Below is a basic breakdown to my solution

sass
-- base
---- [all base files]
-- layout
---- desktop.scss
---- tablet.scss
---- mobile.scss
-- modules
---- columns.scss
---- modulesDesktop.scss
---- modulesTablet.scss
---- modulesMobile.scss
screen.scss

the module.scss (columns.scss) has the default sass plus the resizes as mixins.
the modules.scss (modulesDesktop, modulesTablet, modulesMobile) files in turn, call the mixins in the module.scss (columns.scss) files
the layout.scss files (dekstop, tablet, mobile) have the actual media queries in them, in those media queries, I call the related modules.scss (modulesDesktop, modulesTablet, modulesMobile) file.
screen.scss calls all the layout.scss files.

SAMPLE MODULE *I just wrote this out as and example but I didn't QA this:

/*
 * columns.scss
 * default styles => desktop first
 */
.columns {
  overflow:hidden;
  .column {
    display:inline-block;
    float:left;
  }
}
.col-two .column {
  width:50%;
}
.col-three .column {
  width:33.33333%;
}
.col-four .column {
  width:25%;
}
@mixin columnsTablet(){
  /* tablet styles */
  .col-four .column {
    width:50%;
  }	
}
@mixin columnsMobile(){
  /* mobile styles */
  .columns {
    overflow:hidden;
    .column {
      float:none;
    }
  }
  .col-two .column,
  .col-three .column,
  .col-four .column {
    width:100%;
  }
}

MODULE INDEXES:
DESKTOP

/*
 * modulesDesktop.scss
 * 
 */
@import 'columns.scss'
/* ... and any other modules */

TABLET

/*
 * modulesTablet.scss
 * 
 */
@include columnsTablet
/* ... and any other tablet module mixins */

MOBILE

/*
 * modulesMobile.scss
 * 
 */
@include columnsMobile
/* ... and any other mobile module mixins */

LAYOUT SASS:
DESKTOP

/* Normal css workflow ... */
/*
 * MODULES
 */
@import '../modules/modulesDesktop';
/* ... Normal css workflow */

TABLET

@media all and (max-width:960px){
  /* styles for 960px and smaller */
  /* Normal css workflow ... */
  /*
   * MODULES
   */
  @import '../modules/modulesTablet';
  /* ... Normal css workflow */
}

MOBILE

@media all and (max-width:600px){
  /* styles for 600px and smaller */
  /* Normal css workflow ... */
  /*
   * MODULES
   */
  @import '../modules/modulesMobile';
  /* ... Normal css workflow */
}

and then screen.scss calls all the layouts and groups them into one file.

####* Sublime Snippet is to create a default module

Bushwazi/Modular-Sass-One-Media-Query