Fix odd import issue with individual Sass files

Seems like these individual Sass files are compiled individually despite
being imported by the main application.css.sass file which means we now have
to import the variables.sass file with all the Sass variable declaration in
each of them.
# Title

# Tell me everything!

# Co-authors (they will be credited on GitHub as well)
# Co-authored-by: Carolina Powers <carolinapoloni@gmail.com>
# Co-authored-by: Meg Kline-Tuls <meglktuls@gmail.com>
# Co-authored-by: Will <will-soto@pluralsight.com>
# Co-authored-by: thatchej <jaron-thatcher@pluralsight.com>

source/assets/stylesheets/anchors.sass

@@ -1,3 +1,5 @@
+@import "variables"
+
 .anchor
   display: none
   font-style: normal

source/assets/stylesheets/application.css.sass

@@ -1,14 +1,4 @@
-$base-font-family: 'Muli', "Helvetica Neue", Helvetica, Arial, sans-serif
-$source-code-font-family: "Source Code Pro", monospace
-
-$color-black: #342828
-$color-white: #FFFFFF
-$color-ocre: #E05735
-$color-gold: #faa930
-$color-bark: #3F2B2D
-$color-sand: #FEECD3
-$color-light-sand: lighten($color-sand, 10%)
-
+@import "variables"
 @import "layout"
 @import "anchors"
 @import "sections"

source/assets/stylesheets/layout.sass

@@ -1,3 +1,5 @@
+@import "variables"
+
 $break-small: em(480px)
 $break-medium: em(800px)
 $break-large: em(1024px)

source/assets/stylesheets/sections.sass

@@ -1,3 +1,5 @@
+@import "variables"
+
 div.header
   padding-top: 5em
   padding-bottom: 0.1em

source/assets/stylesheets/table-of-contents.sass

@@ -1,3 +1,5 @@
+@import "variables"
+
 .toc
   position: fixed
   z-index: 9999

source/assets/stylesheets/variables.sass

@@ -0,0 +1,10 @@
+$base-font-family: 'Muli', "Helvetica Neue", Helvetica, Arial, sans-serif
+$source-code-font-family: "Source Code Pro", monospace
+
+$color-black: #342828
+$color-white: #FFFFFF
+$color-ocre: #E05735
+$color-gold: #faa930
+$color-bark: #3F2B2D
+$color-sand: #FEECD3
+$color-light-sand: lighten($color-sand, 10%)