correcting poorly scoped Sass variables set in xmodules' .scss files to adhere to Sass 3.3 scoping

see http://blog.sass-lang.com/posts/184094-sass-33-is-released for more information on 3.3+ variable scoping

common/lib/xmodule/xmodule/css/annotatable/display.scss

@@ -1,11 +1,11 @@
-/* TODO: move top-level variables to a common _variables.scss. 
+/* TODO: move top-level variables to a common _variables.scss.
  * NOTE: These variables were only added here because when this was integrated with the CMS,
  * SASS compilation errors were triggered because the CMS didn't have the same variables defined
  * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS.
  * -Abarrett and Vshnayder
  */
-$border-color: #C8C8C8;
-$body-font-size: em(14);
+$annotatable--border-color: #C8C8C8;
+$annotatable--body-font-size: em(14);
 
 .annotatable-wrapper {
   position: relative;
@@ -23,7 +23,7 @@ $body-font-size: em(14);
 .annotatable-section {
   position: relative;
   padding: .5em 1em;
-  border: 1px solid $border-color;
+  border: 1px solid $annotatable--border-color;
   border-radius: .5em;
   margin-bottom: .5em;
 
@@ -34,7 +34,7 @@ $body-font-size: em(14);
     a { font-weight: normal; }
   }
   .annotatable-section-body {
-    border-top: 1px solid $border-color;
+    border-top: 1px solid $annotatable--border-color;
     margin-top: .5em;
     padding-top: .5em;
     @include clearfix;
@@ -45,9 +45,9 @@ $body-font-size: em(14);
     margin-left: 4em;
     b { font-weight: bold; }
     i { font-style: italic; }
-    code { 
+    code {
       display: inline;
-      white-space: pre; 
+      white-space: pre;
       font-family: Courier New, monospace;
     }
   }
@@ -105,7 +105,7 @@ $body-font-size: em(14);
 }
 
 .ui-tooltip.qtip.ui-tooltip {
-  font-size: $body-font-size;
+  font-size: $annotatable--body-font-size;
   border: 1px solid #333;
   border-radius: 1em;
   background-color: rgba(0,0,0,.85);
@@ -123,7 +123,7 @@ $body-font-size: em(14);
       border-bottom: 2px solid #333;
       font-weight: bold;
     }
-    .ui-tooltip-icon { 
+    .ui-tooltip-icon {
       right: 10px;
       background: #333;
     }
@@ -140,16 +140,16 @@ $body-font-size: em(14);
     padding: 0 10px 10px 10px;
     background-color: transparent;
     border-color: transparent;
-  } 
-  p { 
-      color: inherit; 
+  }
+  p {
+      color: inherit;
       line-height: normal;
   }
 }
 
 .ui-tooltip.qtip.ui-tooltip-annotatable {
   max-width: 375px;
-  .ui-tooltip-content {  
+  .ui-tooltip-content {
     padding: 0 10px;
     .annotatable-comment {
       display: block;

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -1,3 +1,5 @@
+$annotation-yellow: rgba(255,255,10,0.3);
+
 h2 {
   margin-top: 0;
   margin-bottom: 15px;
@@ -929,7 +931,6 @@ div.problem {
   }
 
   .annotation-input {
-    $yellow: rgba(255,255,10,0.3);
     margin: 0 0 1em 0;
     border: 1px solid #ccc;
     border-radius: 1em;
@@ -957,8 +958,8 @@ div.problem {
 
     .block-highlight {
       padding: .5em;
-      border: 1px solid darken($yellow, 10%);
-      background-color: $yellow;
+      border: 1px solid darken($annotation-yellow, 10%);
+      background-color: $annotation-yellow;
       color:  #333;
       font-style: normal;
     }
@@ -982,7 +983,7 @@ div.problem {
           cursor: pointer;
 
           &.selected {
-            background-color: $yellow;
+            background-color: $annotation-yellow;
           }
         }
         .tag-status {

common/lib/xmodule/xmodule/css/sequence/display.scss

@@ -1,8 +1,8 @@
-$border-color: #C8C8C8;
+$sequence--border-color: #C8C8C8;
 
 // repeated extends - needed since LMS styling was referenced
 .block-link {
-  border-left: 1px solid lighten($border-color, 10%);
+  border-left: 1px solid lighten($sequence--border-color, 10%);
   display: block;
 
   &:hover, &:focus {
@@ -12,7 +12,7 @@ $border-color: #C8C8C8;
 
 .topbar {
   @include clearfix();
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $sequence--border-color;
 
   @media print {
     display: none;
@@ -20,7 +20,7 @@ $border-color: #C8C8C8;
 
   a {
     &.block-link {
-      border-left: 1px solid lighten($border-color, 10%);
+      border-left: 1px solid lighten($sequence--border-color, 10%);
       display: block;
 
       &:hover, &:focus {

common/lib/xmodule/xmodule/css/video/accessible_menu.scss

@@ -1,9 +1,9 @@
-$gray: rgb(127, 127, 127);
-$blue: rgb(0, 159, 230);
-$gray-d1: shade($gray,20%);
-$gray-l2: tint($gray,40%);
-$gray-l3: tint($gray,60%);
-$blue-s1: saturate($blue,15%);
+$a11y--gray: rgb(127, 127, 127);
+$a11y--blue: rgb(0, 159, 230);
+$a11y--gray-d1: shade($gray,20%);
+$a11y--gray-l2: tint($gray,40%);
+$a11y--gray-l3: tint($gray,60%);
+$a11y--blue-s1: saturate($blue,15%);
 
 %use-font-awesome {
   font-family: FontAwesome;
@@ -44,18 +44,18 @@ $blue-s1: saturate($blue,15%);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        color: $gray-l2;
+        color: $a11y--gray-l2;
         font-size: 14px;
         line-height: 23px;
 
         &:hover, &:focus {
-          color: $gray-d1;
+          color: $a11y--gray-d1;
         }
       }
 
       &.active{
         a {
-          color: $blue;
+          color: $a11y--blue;
         }
       }
 
@@ -96,7 +96,7 @@ $blue-s1: saturate($blue,15%);
       border-radius: 0 3px 3px 0;
       background-color: $very-light-text;
       padding: ($baseline*.75 $baseline*1.25 $baseline*.75 $baseline*.75);
-      color: $gray-l2;
+      color: $a11y--gray-l2;
       min-width: 1.5em;
       line-height: 14px;
       text-align: center;