diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss
index 42f5fb1211..1c3da1c0f8 100644
--- a/lms/static/sass/_shame.scss
+++ b/lms/static/sass/_shame.scss
@@ -5,7 +5,7 @@
 // edx.org marketing site - 7/2013 visual button revamp
 
 // extends btn
-.m-btn {
+%m-btn {
   @include box-sizing(border-box);
   @include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
   display: inline-block;
@@ -22,22 +22,22 @@
   }
 }
 
-.m-btn-pill {
+%m-btn-pill {
   border-radius: ($baseline/5);
 }
 
-.m-btn-rounded {
+%m-btn-rounded {
   border-radius: ($baseline/2);
 }
 
-.m-btn-edged {
+%m-btn-edged {
   border-radius: ($baseline/10);
 }
 
 // primary button
-.m-btn-base {
-  @extend .m-btn;
-  @extend .m-btn-edged;
+%m-btn-base {
+  @extend %m-btn;
+  @extend %m-btn-edged;
   border: none;
   padding:($baseline/2) ($baseline);
   text-align: center;
@@ -55,8 +55,8 @@
 }
 
 // primary button
-.m-btn-primary {
-  @extend .m-btn-base;
+%m-btn-primary {
+  @extend %m-btn-base;
   box-shadow: 0 2px 1px 0 $action-primary-shadow;
   background: $action-primary-bg;
   color: $action-primary-fg;
@@ -83,8 +83,8 @@
 }
 
 // secondary button
-.m-btn-secondary {
-  @extend .m-btn-base;
+%m-btn-secondary {
+  @extend %m-btn-base;
   box-shadow: 0 2px 1px 0 $action-secondary-shadow;
   background: $action-secondary-bg;
   color: $action-secondary-fg;
@@ -160,7 +160,7 @@
 
     // register or access courseware
     &.action-register, &.access-courseware {
-      @extend .m-btn-primary;
+      @extend %m-btn-primary;
       display: block;
 
       .track {
@@ -183,14 +183,14 @@
 
     // already registered but course not started or registration is closed
     &.is-registered, &.registration-closed {
-      @extend .m-btn-secondary;
+      @extend %m-btn-secondary;
       pointer-events: none !important;
       display: block;
     }
 
     // coming soon
     &.coming-soon {
-      @extend .m-btn-secondary;
+      @extend %m-btn-secondary;
       pointer-events: none !important;
       outline: none;
       display: block;
diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss
index d244eff55f..5c87548127 100644
--- a/lms/static/sass/base/_extends.scss
+++ b/lms/static/sass/base/_extends.scss
@@ -1,40 +1,40 @@
-.faded-hr-divider {
+%faded-hr-divider {
   @include background-image($faded-hr-image-1);
   height: 1px;
   width: 100%;
 }
 
-.faded-hr-divider-medium {
+%faded-hr-divider-medium {
   @include background-image($faded-hr-image-4);
   height: 1px;
   width: 100%;
 }
 
-.faded-hr-divider-light {
+%faded-hr-divider-light {
   @include background-image($faded-hr-image-5);
   height: 1px;
   width: 100%;
 }
 
-.faded-vertical-divider {
+%faded-vertical-divider {
   @include background-image($faded-hr-image-1);
   height: 100%;
   width: 1px;
 }
 
-.faded-vertical-divider-light {
+%faded-vertical-divider-light {
   @include background-image($faded-hr-image-6);
   background: transparent;
   height: 100%;
   width: 1px;
 }
 
-.vertical-divider {
-  @extend .faded-vertical-divider;
+%vertical-divider {
+  @extend %faded-vertical-divider;
   position: relative;
 
   &::after {
-    @extend .faded-vertical-divider-light;
+    @extend %faded-vertical-divider-light;
     content: "";
     display: block;
     position: absolute;
@@ -42,13 +42,13 @@
   }
 }
 
-.horizontal-divider {
+%horizontal-divider {
   border: none;
-  @extend .faded-hr-divider;
+  @extend %faded-hr-divider;
   position: relative;
 
   &::after {
-    @extend .faded-hr-divider-light;
+    @extend %faded-hr-divider-light;
     content: "";
     display: block;
     position: absolute;
@@ -56,24 +56,24 @@
   }
 }
 
-.fade-right-hr-divider {
+%fade-right-hr-divider {
   @include background-image($faded-hr-image-2);
   border: none;
 }
 
-.fade-left-hr-divider {
+%fade-left-hr-divider {
   @include background-image($faded-hr-image-3);
   border: none;
 }
 
 //Styles for Error messages
-.error-message-colors {
+%error-message-colors {
   background: $error-red;
   border: 1px solid rgb(202, 17, 17);
   color: rgb(143, 14, 14);
 }
 
-.success-message-colors {
+%success-message-colors {
   background: rgb(19, 159, 58);
   border: 1px solid rgb(6, 65, 18);
   color: rgb(255, 255, 255);
@@ -83,4 +83,4 @@
   h2 {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss
index 8cdf0b0b21..77a80b481c 100644
--- a/lms/static/sass/course/layout/_courseware_header.scss
+++ b/lms/static/sass/course/layout/_courseware_header.scss
@@ -112,7 +112,7 @@ header.global.slim {
     padding-right: 20px;
 
     &:before {
-      @extend .faded-vertical-divider;
+      @extend %faded-vertical-divider;
       content: "";
       display: block;
       height: 35px;
@@ -123,7 +123,7 @@ header.global.slim {
     }
 
     &:after {
-      @extend .faded-vertical-divider-light;
+      @extend %faded-vertical-divider-light;
       content: "";
       display: block;
       height: 35px;
diff --git a/lms/static/sass/multicourse/_about_pages.scss b/lms/static/sass/multicourse/_about_pages.scss
index 6c6bcfb01b..ca573377ec 100644
--- a/lms/static/sass/multicourse/_about_pages.scss
+++ b/lms/static/sass/multicourse/_about_pages.scss
@@ -7,7 +7,7 @@
     width: flex-grid(12);
 
     &::after {
-      @extend .faded-hr-divider;
+      @extend %faded-hr-divider;
       content: "";
       display: block;
     }
diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index 2ec9f50dba..8b103fb99c 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -11,13 +11,13 @@
 
 
   // edx.org - marketing typography
-  .heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .body-text-emphasized, .body-text, .button-primary, .button-secondary {
+  %heading-1, %heading-2, %heading-3, %heading-4, %heading-5, %body-text-emphasized, %body-text, %button-primary, %button-secondary {
     display: block;
     font-family: $sans-serif;
     line-height: lh(1);
   }
 
-  .heading-2 {
+  %heading-2 {
     font-size: 25px;
     margin: 0 0 $baseline 0;
     font-weight: 300;
@@ -25,14 +25,14 @@
     color: $link-color-d1;
   }
 
-  .heading-3 {
+  %heading-3 {
     font-size: 21px;
     margin: 0 0 $baseline 0;
     font-weight: 300;
     color: $base-font-color;
   }
 
-  .heading-4 {
+  %heading-4 {
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
@@ -40,11 +40,11 @@
     color: $m-gray-d2;
   }
 
-  .heading-5 {
+  %heading-5 {
   }
 
   // specific examples - body
-  .body-text-emphasized {
+  %body-text-emphasized {
     font-size: 18px;
     margin: 0 0 $baseline 0;
     font-weight: 300;
@@ -53,7 +53,7 @@
     line-height: lh(1.1);
   }
 
-  .body-text {
+  %body-text {
     font-size: 15px;
     margin: 0 0 $baseline 0;
     color: $base-font-color;
@@ -61,7 +61,7 @@
   }
 
   // specific examples - buttons
-  .button-primary {
+  %button-primary {
     border-radius: 0;
     @include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%);
     display: inline-block;
@@ -79,7 +79,7 @@
     box-shadow: none !important;
   }
 
-  .button-secondary {
+  %button-secondary {
     @include linear-gradient($outer-border-color 5%, $lighter-base-font-color 95%);
     display: inline-block;
     padding: $baseline/2 $baseline*2.5;
@@ -97,7 +97,7 @@
   }
 
   // layout
-  .content-wrapper {
+  %content-wrapper {
     background: $account-content-wrapper-bg;
     padding-bottom: 0;
   }
@@ -118,7 +118,7 @@
     padding: ($baseline*2) $baseline 0 $baseline;
 
     header h1 {
-      @extend .heading-2;
+      @extend %heading-2;
       margin-bottom: $baseline;
       padding-bottom: $baseline;
       text-align: left;
@@ -131,7 +131,7 @@
 
   // reset - horrible, but necessary
   p, ol, ul, h1, h2, h3, h4, h5, h6, label, input, textarea {
-    @extend .body-text;
+    @extend %body-text;
   }
 
   h1, h2, h3, h4, h5, h6 {
@@ -194,7 +194,7 @@
       }
 
       h3 {
-        @extend .heading-4;
+        @extend %heading-4;
         margin: 0 0 ($baseline/4) 0;
       }
     }
@@ -204,7 +204,7 @@
   form {
 
     .instructions {
-      @extend .body-text-emphasized;
+      @extend %body-text-emphasized;
       margin-bottom: $baseline;
     }
 
@@ -390,7 +390,7 @@
     @include clearfix();
 
     button[type="submit"] {
-      @extend .m-btn-primary;
+      @extend %m-btn-primary;
 
       &:disabled, &.is-disabled {
         opacity: 0.3;
@@ -427,14 +427,14 @@
     background: tint($yellow,20%);
 
     .message-title {
-      @extend .heading-4;
+      @extend %heading-4;
       margin: 0 0 ($baseline/4) 0;
       font-size: em(14);
       font-weight: 600;
     }
 
     .message-copy {
-      @extend .body-text;
+      @extend %body-text;
       margin: 0 !important;
       padding: 0;
       list-style: none;
@@ -559,7 +559,7 @@
       }
 
       h2 {
-        @extend .heading-2;
+        @extend %heading-2;
         text-align: left;
       }
     }
@@ -608,7 +608,7 @@
   }
 
   .modal-form-error {
-    @extend .body-text;
+    @extend %body-text;
     box-shadow: inset 0 -1px 2px 0 tint($red, 85%);
     @include box-sizing(border-box);
     margin: $baseline 0 ($baseline/2) 0 !important;
diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index bceaaa280a..4f1831cc7f 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -242,7 +242,7 @@
       width: flex-grid(12);
 
       &::after {
-        @extend .faded-hr-divider;
+        @extend %faded-hr-divider;
         content: "";
         display: none;
       }
@@ -390,7 +390,7 @@
       text-align: center;
 
       &::after {
-        @extend .faded-hr-divider;
+        @extend %faded-hr-divider;
         content: "";
         display: block;
         height: 1px;
diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss
index 3b349db950..12e2bb888b 100644
--- a/lms/static/sass/multicourse/_courses.scss
+++ b/lms/static/sass/multicourse/_courses.scss
@@ -49,7 +49,7 @@
           vertical-align: middle;
 
           &::after {
-            @extend .faded-vertical-divider;
+            @extend %faded-vertical-divider;
             content: "";
             display: block;
             height: 80px;
diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss
index 1d0c543fa4..881437da04 100644
--- a/lms/static/sass/multicourse/_home.scss
+++ b/lms/static/sass/multicourse/_home.scss
@@ -187,27 +187,27 @@
     width: flex-grid(12);
 
     &::before {
-      @extend .faded-hr-divider-medium;
+      @extend %faded-hr-divider-medium;
       content: "";
       display: block;
     }
 
     &::after {
-      @extend .faded-hr-divider-medium;
+      @extend %faded-hr-divider-medium;
       content: "";
       display: block;
     }
 
 
     hr {
-      @extend .faded-hr-divider-light;
+      @extend %faded-hr-divider-light;
       border: none;
       margin: 0px;
       position: relative;
       z-index: 2;
 
       &::after {
-        @extend .faded-hr-divider;
+        @extend %faded-hr-divider;
         bottom: 0px;
         content: "";
         display: block;
@@ -229,7 +229,7 @@
         overflow: hidden;
 
         &::before {
-          @extend .faded-vertical-divider;
+          @extend %faded-vertical-divider;
           content: "";
           display: block;
           height: 80px;
@@ -240,7 +240,7 @@
         }
 
         &::after {
-          @extend .faded-vertical-divider-light;
+          @extend %faded-vertical-divider-light;
           content: "";
           display: block;
           height: 80px;
diff --git a/lms/static/sass/multicourse/_media-kit.scss b/lms/static/sass/multicourse/_media-kit.scss
index ef6abc3696..1c6d787760 100644
--- a/lms/static/sass/multicourse/_media-kit.scss
+++ b/lms/static/sass/multicourse/_media-kit.scss
@@ -36,14 +36,14 @@ $white: rgb(255,255,255);
   }
 
   hr {
-    @extend .faded-hr-divider-light;
+    @extend %faded-hr-divider-light;
     border: none;
     margin: 0px;
     position: relative;
     z-index: 2;
 
     &::after {
-      @extend .faded-hr-divider;
+      @extend %faded-hr-divider;
       bottom: 0px;
       content: "";
       display: block;
diff --git a/lms/static/sass/multicourse/_password_reset.scss b/lms/static/sass/multicourse/_password_reset.scss
index 0e3ea15573..14c6d4ecc5 100644
--- a/lms/static/sass/multicourse/_password_reset.scss
+++ b/lms/static/sass/multicourse/_password_reset.scss
@@ -29,14 +29,14 @@
     }
 
     hr {
-      @extend .faded-hr-divider-light;
+      @extend %faded-hr-divider-light;
       border: none;
       margin: 0px;
       position: relative;
       z-index: 2;
 
       &::after {
-        @extend .faded-hr-divider;
+        @extend %faded-hr-divider;
         bottom: 0px;
         content: "";
         display: block;
diff --git a/lms/static/sass/shared/_activation_messages.scss b/lms/static/sass/shared/_activation_messages.scss
index c9f61f12fb..fbc02ef4a8 100644
--- a/lms/static/sass/shared/_activation_messages.scss
+++ b/lms/static/sass/shared/_activation_messages.scss
@@ -6,11 +6,11 @@
     padding: 10px;
 
     &.invalid {
-      @extend .error-message-colors;
+      @extend %error-message-colors;
     }
 
     &.valid {
-      @extend .success-message-colors;
+      @extend %success-message-colors;
     }
   }
 
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 3f2daccf52..a649cb43d9 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -279,7 +279,7 @@ header.global {
       display: inline-block;
 
       .cta {
-        @extend .m-btn-primary;
+        @extend %m-btn-primary;
       }
     }
 
diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss
index 19036a769f..8b9ad63836 100644
--- a/lms/static/sass/shared/_modal.scss
+++ b/lms/static/sass/shared/_modal.scss
@@ -84,14 +84,14 @@
       }
 
       hr {
-        @extend .faded-hr-divider-light;
+        @extend %faded-hr-divider-light;
         border: none;
         margin: 0px;
         position: relative;
         z-index: 2;
 
         &::after {
-          @extend .faded-hr-divider;
+          @extend %faded-hr-divider;
           bottom: 0px;
           content: "";
           display: block;
diff --git a/lms/static/sass/shared/_unsubscribe.scss b/lms/static/sass/shared/_unsubscribe.scss
index 4d870704a2..a1369da239 100644
--- a/lms/static/sass/shared/_unsubscribe.scss
+++ b/lms/static/sass/shared/_unsubscribe.scss
@@ -4,7 +4,7 @@
   h1 {
     margin-bottom: 20px;
     padding: 10px;
-    @extend .success-message-colors;
+    @extend %success-message-colors;
   }
 
   h1 + hr {