divide styles into categories

app/styles/_variables.sass

@@ -1,2 +0,0 @@
-$blue: #0088cc
-$green: #a4c540

app/styles/app.sass

@@ -1,13 +1,17 @@
 @import compass/reset
 @import compass/css3
 
-@import variables
-@import mixins
-@import layout
-@import modal
-@import header
-@import footer
-@import users
-@import media
-@import popover
-@import glyphicons-filetypes
+@import base/variables
+@import base/mixins
+@import base/element_defaults
+@import base/glyphicons_filetypes
+
+@import modules/modules
+@import modules/modal
+@import modules/users
+@import modules/popover
+
+@import layout/header
+@import layout/footer
+@import layout/media
+

app/styles/base/_element_defaults.sass

@@ -0,0 +1,23 @@
+*
+  +box-sizing(border-box)
+  &::before, &::after
+    +box-sizing(border-box)
+
+html
+  height: 100%
+  font-family: $font-family
+  font-size: 10px
+
+body
+  height: 100%
+
+a
+  text-decoration: none
+
+b, strong
+  font-weight: bold
+
+.invisible
+  height: 0
+  width: 0
+  opacity: 0

app/styles/base/_mixins.sass

@@ -12,7 +12,7 @@
   outline: none
   width: auto
   cursor: pointer
-  font-family: Helvetica, Arial, sans-serif
+  font-family: $font-family
 
 =circle($size)
   display: inline-block

app/styles/base/_variables.sass

@@ -0,0 +1,4 @@
+$font-family: "Helvetica Neue", sans-serif
+
+$blue: #0088cc
+$green: #a4c540

app/styles/layout/_header.sass

@@ -6,7 +6,7 @@
     width: 100%
     height: 60px
     background: transparent
-    color: #000
+    color: black
     +user-select(none)
     .logo
       position: relative
@@ -37,13 +37,13 @@
         a
           display: inline-block
           transition: opacity .2s linear
-          color: #000
+          color: black
           img
             vertical-align: middle
 
     .about
       +circle(18px)
-      border: 1px solid #000
+      border: 1px solid black
       font-size: 12px
       opacity: .18
       margin-top: -2px

app/styles/modules/_modules.sass

@@ -1,22 +1,3 @@
-*
-  +box-sizing(border-box)
-  &::before, &::after
-    +box-sizing(border-box)
-
-html
-  height: 100%
-  font-family: "Helvetica Neue", sans-serif
-  font-size: 10px
-
-body
-  height: 100%
-
-a
-  text-decoration: none
-
-b, strong
-  font-weight: bold
-
 .preloader
   position: absolute
   left: 0
@@ -40,11 +21,6 @@ b, strong
   .preloader
     opacity: 0
 
-.invisible
-  height: 0
-  width: 0
-  opacity: 0
-
 .error
   position: absolute
   top: 0

app/styles/modules/_users.sass

@@ -143,8 +143,6 @@ $user-size: 76px
           &::after
             opacity: 1
 
-
-
 +keyframes(shadow)
   0%
     opacity: 0