get c-common.scss parseable by node-sass

This is the hardest one, it was not too bad though.
Things I found you need to do:

1. You can't have a "//" comment on the same line in .sass syntax
so the following line:

.foo //a comment about foo

would need to be:
//a comment about #foo
.foo

2. in .sass, you have to use double quotes for @import
so:      @import 'foo'
becomes: @import "foo"

things you do NOT have to do:

1. don't have to add the extension or the underscore
in front of filename for @import.
e.g, DON'T have to convert:
@import "foo"
to:
@import "_foo.scss"

2: don't have to convert the leading colon syntax
   of super old sass to colon between syntax
e.g:
.foo
  :width 100%
is just fine

(Hallelujah on not having to do those 2, it
makes this a lot smaller of a change)

test plan:
`npm install node-sass` then
within the /app/stylesheets directory,
run this command and see that it works:

../../node_modules/.bin/node-sass --include-path variants/new_styles_high_contrast base/c-common.scss

Change-Id: I73e382560e3dcbf55c32e97bb245b5ec262d4cb0
Reviewed-on: https://gerrit.instructure.com/38414
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
Tested-by: Jenkins <jenkins@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>

app/stylesheets/base/_#header.sass

@@ -71,7 +71,8 @@
   float: right
   font-size: 12px
   margin-right: $right_side_margin
-  margin-bottom: 4px /*make room for the drop shadow*/
+  /*make room for the drop shadow*/
+  margin-bottom: 4px
   padding: 0 11px
   @if $use_high_contrast
     background-color: #555
@@ -147,7 +148,8 @@
       background-color: $menu-background-color
 
     .menu-item-drop
-      left: 0 // bring it back on screen so you can see it
+      // bring it back on screen so you can see it
+      left: 0
 
   .menu-item-drop
     border: 1px solid $menu-border-color

app/stylesheets/base/_#right-side.sass

@@ -9,7 +9,8 @@
   width: $right_side_width - ($right_side_margin * 2)
   color: $right_side_text_color
   min-height: 20px
-  z-index: 10 // puts it equal with #main, used so datepickers that pop up from #right-side pop up on top
+  // puts it equal with #main, used so datepickers that pop up from #right-side pop up on top
+  z-index: 10
   margin: $right_side_margin $right_side_margin 0
 
   hr
@@ -61,7 +62,8 @@
       border-bottom: none
       box-shadow: none
 
-    small // this is for things like "nothing for the next week"
+    // this is for things like "nothing for the next week"
+    small
       padding: 3px 0 0px 31px
       display: block
       color: #666

app/stylesheets/base/mixins/_compile_mixins.sass

@@ -1,4 +1,4 @@
 @import "compass_replacements"
-@import 'misc'
+@import "misc"
-@import 'blue'
+@import "blue"
-@import 'bubbles'
+@import "bubbles"

app/stylesheets/components/_g_instructure.sass

@@ -26,7 +26,8 @@
   left: 0
   width: 100%
 
-#flash_message_buffer // contains copies of all static messages so that we reserve enough height in the ui
+// contains copies of all static messages so that we reserve enough height in the ui
+#flash_message_buffer
   visibility: hidden
 
 #flash_message_holder

app/stylesheets/themes/_variables.sass

@@ -1,11 +1,11 @@
 // there is magic that happens here, see the docs at the top of assets.yml for more info
-@import 'variant_variables'
+@import "variant_variables"
 
 $iconSpritePath:      "canvas_does_not_use_boostraps_default_sprit_based_icons_so_this_is_meaningless" !default
 $iconWhiteSpritePath: $iconSpritePath !default
 
-@import 'vendor/bootstrap/variables'
+@import "vendor/bootstrap/variables"
-@import 'vendor/jqueryui/variables'
+@import "vendor/jqueryui/variables"
 
 
 $right_side_width: 286px

app/stylesheets/vendor/bootstrap/_variables.scss

@@ -1,5 +1,5 @@
 // there is magic that happens here, see the docs at the top of assets.yml for more info
-@import 'variant_variables';
+@import "variant_variables";
 
 
 //