feat(app generator): reorganize sass tree structure and @imports

generators/app/index.js

@@ -331,6 +331,9 @@ var AppGenerator = generators.Base.extend(
                         //  Style and Compass:
 
                     ,   'src/sass'
+                    ,   'src/sass/overrides'
+                    ,   'src/sass/settings'
+                    ,   'src/sass/views'
 
                     ,   'src/style'
                     ,   'src/style/images/'
@@ -385,9 +388,14 @@ var AppGenerator = generators.Base.extend(
 
                         //  Style and Compass:
 
-                    ,   [ 'src/sass/app.sass' ]
+                    ,   'src/sass/settings/_compass.sass'
+                    ,   'src/sass/settings/_fonts.sass'
+                    ,   'src/sass/settings/_icons.scss'
+                    ,   'src/sass/settings/_layout.sass'
+                    ,   'src/sass/_overrides.sass'
                     ,   'src/sass/_settings.sass'
                     ,   'src/sass/_views.sass'
+                    ,   [ 'src/sass/app.sass' ]
                     ,   'src/style/images/sprites/check-green.png'
                     ]
                 ;

generators/app/templates/src/sass/_overrides.sass

@@ -0,0 +1,7 @@
+//
+//  Define only CSS overrides here.
+//
+//  Variable definitions are best done in a corresponding 'settings/*' section.
+//
+
+//  @import "overrides/..."

generators/app/templates/src/sass/_settings.sass

@@ -1,22 +1,44 @@
-// All variables and loading of mixins should be done here
+
+//
+//  Define only variables and mixins here.
+//
+//  Variable definitions are best done in a corresponding 'settings/*' section.
+//
+
+//
+//  Compass's mixins and variables definitions.
 //
 
+@import "settings/_compass"
 
-// Load default compass mixins
+
+//
+//  Font definitions.
 //
-@import "compass/utilities/general/clearfix"
-@import "compass/utilities/general/hacks"
-@import "compass/css3"
-@import "compass/css3/box-shadow"
-@import "compass/css3/user-interface"
 
-// Setup the automatic spriting
+@import "settings/_fonts"
+
+
+//
+//  Icon definitions.
 //
-// Want to use a sprite?
-// Step 1: Add the image to the sprites folder
-// Step 2: Use example:  "background: sprite( $sprites-sprite, name-of-file-without-extension ) no-repeat"
-// Step 3: Sit back and relax, when compass compiles it generates the sprite for you and
-//         does the heavy lifting for you....
+
+@import "settings/_icons"
+
+
+//
+//  App variables definitions.
+//
+
+@import "settings/_layout"
+
+//  ... add more as needed...
+
+
+//
+//  Framework variable defaults.
+//
+
+//  For instance:
 //
-$sprites-path:    "images/sprites/"
-$sprites-sprite:  sprite-map( "sprites/*.png" )
+//  @import "settings/_bootstrap"

generators/app/templates/src/sass/app.sass

@@ -1,12 +1,34 @@
 .<%- packageName %>
 
-    @import _settings
+    //
+    //  App variables definitions.
+    //  Fonts definitions.
+    //  Compass's mixins and variables definitions.
+    //  Defaults for framework variables.
+    //
+
+    @import "_settings"
+
+    //
+    //  Frameworks.
+    //
+
+    //  For instance:
+    //
+    //  @import "bootstrap/_bootstrap"
+
+    //
+    //  CSS overrides.
+    //
+
+    @import "_overrides"
 
     //
+    //  App views' CSS.
     //  Every view should have it's own style file in the `views` folder and be `@import`-ed in '_views.sass'.
     //
 
-    @import _views
+    @import "_views"
 
 //
 //  Only really global styling should be here.

generators/app/templates/src/sass/settings/_compass.sass

@@ -0,0 +1,21 @@
+
+//
+//  Compass mixins.
+//
+
+@import "compass/utilities/general/clearfix"
+@import "compass/utilities/general/hacks"
+@import "compass/css3"
+@import "compass/css3/box-shadow"
+@import "compass/css3/user-interface"
+
+//  Setup the automatic spriting
+//
+//  Want to use a sprite?
+//  Step 1: Add the image to the sprites folder
+//  Step 2: Use example:  "background: sprite( $sprites-sprite, name-of-file-without-extension ) no-repeat"
+//  Step 3: Sit back and relax, when compass compiles it generates the sprite for you and
+//          does the heavy lifting for you....
+//
+$sprites-path:              "images/sprites/"
+$sprites-sprite:            sprite-map( "sprites/*.png" )

generators/app/templates/src/sass/settings/_fonts.sass

@@ -0,0 +1,8 @@
+
+//  For instance:
+//
+//  Comfortaa
+//
+//  http://webfonts.ffonts.net/Comfortaa.font
+//
+// +font-face( 'Comfortaa', font-files('comfortaa/comfortaa.ttf.woff','comfortaa/comfortaa.ttf.svg'), 'comfortaa/comfortaa.ttf.eot', 'normal', 'normal' )

generators/app/templates/src/sass/settings/_icons.scss

@@ -0,0 +1,18 @@
+
+//
+//  Perhaps create your own icon font at:
+//
+//  http://fontastic.me/
+//
+
+//
+//  Include the generated font, say, `my-icons` like so:
+//
+//  @at-root {
+//      @include font-face( 'my-icons', font-files('my-icons/my-icons.woff','my-icons/my-icons.ttf','my-icons/my-icons.svg'), 'my-icons/my-icons.eot', 'normal', 'normal' );
+//  }
+//
+
+//
+//  Include the css mappings to the font's 'characters here.
+//

generators/app/templates/src/sass/settings/_layout.sass

@@ -0,0 +1,4 @@
+
+//
+//  Global layout dependent settings (dimensions, positioning, etc) can go here.
+//