diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index e4495d0248..93c2c0fa6f 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -8,7 +8,7 @@ html {
 }
 
 body {
-  @extend .t-copy-base;
+  @extend %t-copy-base;
   min-width: $fg-min-width;
   background: $gray-l5;
   color: $gray-d2;
@@ -29,7 +29,7 @@ a {
 }
 
 h1 {
-  @extend .t-title4;
+  @extend %t-title4;
   font-weight: 300;
 }
 
@@ -51,13 +51,13 @@ h1 {
 
 // typography - basic
 .page-header {
-  @extend .t-title3;
+  @extend %t-title3;
   display: block;
   font-weight: 600;
   color: $gray-d3;
 
   .subtitle {
-    @extend .t-title7;
+    @extend %t-title7;
     position: relative;
     top: ($baseline/4);
     display: block;
@@ -67,29 +67,29 @@ h1 {
 }
 
 .section-header {
-  @extend .t-title4;
+  @extend %t-title4;
   font-weight: 600;
 
   .subtitle {
-    @extend .t-title7;
+    @extend %t-title7;
   }
 }
 
 .area-header {
-  @extend .t-title6;
+  @extend %t-title6;
   font-weight: 600;
 
   .subtitle {
-    @extend .t-title8;
+    @extend %t-title8;
   }
 }
 
 .area-subheader {
-  @extend .t-title7;
+  @extend %t-title7;
   font-weight: 600;
 
   .subtitle {
-    @extend .t-title9;
+    @extend %t-title9;
   }
 }
 
@@ -198,35 +198,35 @@ h1 {
 
 // typography - loose headings (BT: needs to be removed once html is clean)
 .title-1 {
-  @extend .t-title3;
+  @extend %t-title3;
   margin-bottom: ($baseline*1.5);
 }
 
 .title-2 {
-  @extend .t-title4;
+  @extend %t-title4;
   margin-bottom: $baseline;
 }
 
 .title-3 {
-  @extend .t-title5;
+  @extend %t-title5;
   margin-bottom: ($baseline/2);
 }
 
 .title-4 {
-  @extend .t-title7;
+  @extend %t-title7;
   margin-bottom: $baseline;
   font-weight: 500
 }
 
 .title-5 {
-  @extend .t-title7;
+  @extend %t-title7;
   color: $gray-l1;
   margin-bottom: $baseline;
   font-weight: 500
 }
 
 .title-6 {
-  @extend .t-title7;
+  @extend %t-title7;
   color: $gray-l2;
   margin-bottom: $baseline;
   font-weight: 500
@@ -340,7 +340,7 @@ p, ul, ol, dl {
 
 .content {
   @include clearfix();
-  @extend .t-copy-base;
+  @extend %t-copy-base;
   max-width: $fg-max-width;
   min-width: $fg-min-width;
   width: flex-grid(12);
@@ -354,14 +354,14 @@ p, ul, ol, dl {
     padding-bottom: ($baseline/2);
 
     .title-sub {
-      @extend .t-copy-sub1;
+      @extend %t-copy-sub1;
       display: block;
       margin: 0;
       color: $gray-l2;
     }
 
     .title-1 {
-      @extend .t-title3;
+      @extend %t-title3;
       margin: 0;
       padding: 0;
       font-weight: 600;
@@ -378,16 +378,16 @@ p, ul, ol, dl {
 .content-primary {
 
   .title-1 {
-    @extend .t-title3;
+    @extend %t-title3;
   }
 
   .title-2 {
-    @extend .t-title4;
+    @extend %t-title4;
     margin: 0 0 ($baseline/2) 0;
   }
 
   .title-3 {
-    @extend .t-title6;
+    @extend %t-title6;
     margin: 0 0 ($baseline/2) 0;
   }
 
@@ -401,7 +401,7 @@ p, ul, ol, dl {
     }
 
     .tip {
-      @extend .t-copy-sub2;
+      @extend %t-copy-sub2;
       width: flex-grid(7, 12);
       float: right;
       margin-top: ($baseline/2);
@@ -419,7 +419,7 @@ p, ul, ol, dl {
   }
 
   .bit {
-    @extend .t-copy-sub1;
+    @extend %t-copy-sub1;
     margin: 0 0 $baseline 0;
     border-bottom: 1px solid $gray-l4;
     padding: 0 0 $baseline 0;
@@ -432,7 +432,7 @@ p, ul, ol, dl {
     }
 
     h3 {
-      @extend .t-title7;
+      @extend %t-title7;
       margin: 0 0 ($baseline/4) 0;
       color: $gray-d2;
       font-weight: 600;
@@ -448,7 +448,7 @@ p, ul, ol, dl {
 
     // actions
     .list-actions {
-      @extend .cont-no-list;
+      @extend %cont-no-list;
 
       .action-item {
         margin-bottom: ($baseline/4);
@@ -558,7 +558,7 @@ p, ul, ol, dl {
 
 // misc
 hr.divide {
-  @extend .cont-text-sr;
+  @extend %cont-text-sr;
 }
 
 .item-details {
@@ -719,7 +719,7 @@ hr.divide {
 
 .new-button {
   @include green-button;
-  @extend .t-action4;
+  @extend %t-action4;
   padding: 8px 20px 10px;
   text-align: center;
 
@@ -735,7 +735,7 @@ hr.divide {
 
 .view-button {
   @include blue-button;
-  @extend .t-copy-base;
+  @extend %t-action4;
   text-align: center;
 
   &.big {
@@ -754,7 +754,7 @@ hr.divide {
 
 .edit-button.standard,
 .delete-button.standard {
-  @extend .t-action4;
+  @extend %t-action4;
   @include white-button;
   float: left;
   padding: 3px 10px 4px;
@@ -806,7 +806,7 @@ hr.divide {
 
 // basic utility
 .sr {
-  @extend .cont-text-sr;
+  @extend %cont-text-sr;
 }
 
 .fake-link {
@@ -827,7 +827,7 @@ hr.divide {
 }
 
 hr.divider {
-  @extend .sr;
+  @extend %cont-text-sr;
 }
 
 // ====================
@@ -859,7 +859,7 @@ body.js {
       text-align: center;
 
       .label {
-        @extend .cont-text-sr;
+        @extend %cont-text-sr;
       }
 
       [class^="icon-"] {
@@ -882,14 +882,14 @@ body.js {
     }
 
     .title {
-      @extend .t-title5;
+      @extend %t-title5;
       margin: 0 0 ($baseline/2) 0;
       font-weight: 600;
       color: $gray-d3;
     }
 
     .description {
-      @extend .t-copy-sub2;
+      @extend %t-copy-sub2;
       margin-top: ($baseline/2);
       color: $gray-l1;
     }
diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss
index 08fd487c13..6e69f6c3df 100644
--- a/cms/static/sass/assets/_anims.scss
+++ b/cms/static/sass/assets/_anims.scss
@@ -17,7 +17,7 @@
 }
 
 // canned animation - use if you want out of the box/non-customized anim
-.anim-fadeIn {
+%anim-fadeIn {
   @include animation(fadeIn $tmg-f2 linear 1);
 }
 
@@ -38,7 +38,7 @@
 }
 
 // canned animation - use if you want out of the box/non-customized anim
-.anim-fadeOut {
+%anim-fadeOut {
   @include animation(fadeOut $tmg-f2 linear 1);
 }
 
@@ -62,7 +62,7 @@
 }
 
 // canned animation - use if you want out of the box/non-customized anim
-.anim-rotateUp {
+%anim-rotateUp {
   @include animation(rotateUp $tmg-f2 ease-in-out 1);
 }
 
@@ -83,7 +83,7 @@
 }
 
 // canned animation - use if you want out of the box/non-customized anim
-.anim-rotateDown {
+%anim-rotateDown {
   @include animation(rotateDown $tmg-f2 ease-in-out 1);
 }
 
@@ -104,7 +104,7 @@
 }
 
 // canned animation - use if you want out of the box/non-customized anim
-.anim-rotateCW {
+%anim-rotateCW {
   @include animation(rotateCW $tmg-s1 linear infinite);
 }
 
@@ -125,7 +125,7 @@
 }
 
 // canned  animation - use if you want out of the box/non-customized anim
-.anim-rotateCCW {
+%anim-rotateCCW {
   @include animation(rotateCCW $tmg-s1 linear infinite);
 }
 
@@ -185,7 +185,7 @@
 }
 
 // canned animation - use if you want out of the box/non-customized anim
-.anim-bounceIn {
+%anim-bounceIn {
   @include animation(bounceIn $tmg-f1 ease-in-out 1);
 }
 
@@ -208,6 +208,6 @@
 }
 
 // canned animation - use if you want out of the box/non-customized anim
-.anim-bounceOut {
+%anim-bounceOut {
   @include animation(bounceOut $tmg-f1 ease-in-out 1);
 }
diff --git a/cms/static/sass/assets/_content-types.scss b/cms/static/sass/assets/_content-types.scss
index 7cca469350..5ca067bf40 100644
--- a/cms/static/sass/assets/_content-types.scss
+++ b/cms/static/sass/assets/_content-types.scss
@@ -1,4 +1,4 @@
-.content-type {
+%content-type {
   display: inline-block;
   width: 14px;
   height: 16px;
@@ -9,61 +9,61 @@
 }
 
 .videosequence-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/videosequence.png');
 }
 
 .video-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/video.png');
 }
 
 .problemset-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/problemset.png');
 }
 
 .problem-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/problem.png');
 }
 
 .lab-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/lab.png');
 }
 
 .tab-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/lab.png');
 }
 
 .html-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/html.png');
 }
 
 .vertical-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/vertical.png');
 }
 
 .sequential-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/sequential.png');
 }
 
 .chapter-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/chapter.png');
 }
 
 .module-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/module.png');
 }
 
 .module-icon {
-  @extend .content-type;
+  @extend %content-type;
   background-image: url('../img/content-types/module.png');
 }
diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index 226603b81d..3aa1d0ff8b 100644
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -2,8 +2,8 @@
 // ====================
 
 // gray primary button
-.btn-primary-gray {
-  @extend .ui-btn-primary;
+%btn-primary-gray {
+  @extend %ui-btn-primary;
   background: $gray-l1;
   border-color: $gray-l2;
   color: $white;
@@ -24,8 +24,8 @@
 }
 
 // blue primary button
-.btn-primary-blue {
-  @extend .ui-btn-primary;
+%btn-primary-blue {
+  @extend %ui-btn-primary;
   background: $blue;
   border-color: $blue-s1;
   color: $white;
@@ -47,8 +47,8 @@
 }
 
 // green primary button
-.btn-primary-green {
-  @extend .ui-btn-primary;
+%btn-primary-green {
+  @extend %ui-btn-primary;
   background: $green;
   border-color: $green;
   color: $white;
@@ -70,8 +70,8 @@
 }
 
 // gray secondary button
-.btn-secondary-gray {
-  @extend .ui-btn-secondary;
+%btn-secondary-gray {
+  @extend %ui-btn-secondary;
   border-color: $gray-l3;
   color: $gray-l1;
 
@@ -91,8 +91,8 @@
 }
 
 // blue secondary button
-.btn-secondary-blue {
-  @extend .ui-btn-secondary;
+%btn-secondary-blue {
+  @extend %ui-btn-secondary;
   border-color: $blue-l3;
   color: $blue;
 
@@ -113,8 +113,8 @@
 }
 
 // green secondary button
-.btn-secondary-green {
-  @extend .ui-btn-secondary;
+%btn-secondary-green {
+  @extend %ui-btn-secondary;
   border-color: $green-l4;
   color: $green-l2;
 
@@ -148,9 +148,9 @@
 // ====================
 
 // simple dropdown button styling - should we move this elsewhere?
-.ui-btn-dd {
-  @extend .ui-btn;
-  @extend .ui-btn-pill;
+%ui-btn-dd {
+  @extend %ui-btn;
+  @extend %ui-btn-pill;
   padding:($baseline/4) ($baseline/2);
   border-width: 1px;
   border-style: solid;
@@ -158,7 +158,7 @@
   text-align: center;
 
   &:hover, &:active {
-    @extend .ui-fake-link;
+    @extend %ui-fake-link;
     border-color: $gray-l3;
   }
 
@@ -169,8 +169,8 @@
 }
 
 // layout-based buttons - nav dd
-.ui-btn-dd-nav-primary {
-  @extend .ui-btn-dd;
+%ui-btn-dd-nav-primary {
+  @extend %ui-btn-dd;
   background: $white;
   border-color: $white;
   color: $gray-d1;
@@ -197,6 +197,6 @@
 // ====================
 
 // specific buttons - view live
-.view-live-button {
-  @extend .t-action4;
+%view-live-button {
+  @extend %t-action4;
 }
diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss
index 3233fdbdb7..94085ea7c1 100644
--- a/cms/static/sass/elements/_footer.scss
+++ b/cms/static/sass/elements/_footer.scss
@@ -8,7 +8,7 @@
   padding: $baseline;
 
   footer.primary {
-    @extend .t-copy-sub2;
+    @extend %t-copy-sub2;
     @include clearfix();
     max-width: $fg-max-width;
     min-width: $fg-min-width;
diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss
index 69bf3a6566..94eb4591f9 100644
--- a/cms/static/sass/elements/_forms.scss
+++ b/cms/static/sass/elements/_forms.scss
@@ -115,10 +115,10 @@ form {
 // ELEM: form
 // form styling for creating a new content item (course, user, textbook)
 form[class^="create-"] {
-  @extend .ui-window;
+  @extend %ui-window;
 
   .title {
-    @extend .t-title4;
+    @extend %t-title4;
     font-weight: 600;
     padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
   }
@@ -129,7 +129,7 @@ form[class^="create-"] {
 
 
   .list-input {
-    @extend .cont-no-list;
+    @extend %cont-no-list;
 
     .field {
       margin: 0 0 ($baseline*0.75) 0;
@@ -155,7 +155,7 @@ form[class^="create-"] {
       }
 
       label {
-        @extend  .t-copy-sub1;
+        @extend %t-copy-sub1;
         @include transition(color $tmg-f3 ease-in-out 0s);
         margin: 0 0 ($baseline/4) 0;
 
@@ -166,7 +166,7 @@ form[class^="create-"] {
 
 
       input, textarea {
-        @extend .t-copy-base;
+        @extend %t-copy-base;
         @include transition(all $tmg-f2 ease-in-out 0s);
         height: 100%;
         width: 100%;
@@ -208,7 +208,7 @@ form[class^="create-"] {
       }
 
       .tip {
-        @extend .t-copy-sub2;
+        @extend %t-copy-sub2;
         @include transition(color, 0.15s, ease-in-out);
         display: block;
         margin-top: ($baseline/4);
@@ -226,11 +226,11 @@ form[class^="create-"] {
         }
 
         .is-showing {
-            @extend .anim-fadeIn;
+            @extend %anim-fadeIn;
         }
 
         .is-hiding {
-            @extend .anim-fadeOut;
+            @extend %anim-fadeOut;
         }
 
         .tip-error {
@@ -311,12 +311,12 @@ form[class^="create-"] {
 
     .action-primary {
       @include blue-button;
-      @extend .t-action2;
+      @extend %t-action2;
     }
 
     .action-secondary {
       @include grey-button;
-      @extend .t-action2;
+      @extend %t-action2;
     }
   }
 }
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index 56b2a0f061..ede424804f 100644
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -2,7 +2,7 @@
 // ====================
 
 .wrapper-header {
-  @extend .ui-depth3;
+  @extend %ui-depth3;
   position: relative;
   width: 100%;
   box-shadow: 0 1px 2px 0 $shadow-l1;
@@ -51,7 +51,7 @@
   nav {
 
     > ol > .nav-item {
-      @extend .t-action3;
+      @extend %t-action3;
       display: inline-block;
       vertical-align: middle;
       font-weight: 600;
@@ -74,8 +74,8 @@
   .nav-dd {
 
     .title {
-      @extend .t-action2;
-      @extend .ui-btn-dd-nav-primary;
+      @extend %t-action2;
+      @extend %ui-btn-dd-nav-primary;
       @include transition(all $tmg-f2 ease-in-out 0s);
 
       .label, .icon-caret-down {
@@ -133,7 +133,7 @@
     padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
 
     .course-org, .course-number {
-      @extend .t-action4;
+      @extend %t-action4;
       display: inline-block;
       vertical-align: middle;
       max-width: 45%;
@@ -148,7 +148,7 @@
     }
 
     .course-title {
-      @extend .t-action2;
+      @extend %t-action2;
       display: block;
       width: 100%;
       overflow: hidden;
diff --git a/cms/static/sass/elements/_icons.scss b/cms/static/sass/elements/_icons.scss
index 9bbb72d67e..1ab50b5a13 100644
--- a/cms/static/sass/elements/_icons.scss
+++ b/cms/static/sass/elements/_icons.scss
@@ -23,8 +23,8 @@
   width: 100%;
 }
 
-.ui-badge {
-  @extend .t-title9;
+%ui-badge {
+  @extend %t-title9;
   position: relative;
   border-bottom-right-radius: ($baseline/10);
   border-bottom-left-radius: ($baseline/10);
@@ -39,7 +39,7 @@
   // OPTION: add this class for a visual hanging display
   &.is-hanging {
     @include box-sizing(border-box);
-    @extend .ui-depth2;
+    @extend %ui-depth2;
     top: -($baseline/4);
 
     &:after {
diff --git a/cms/static/sass/elements/_modal.scss b/cms/static/sass/elements/_modal.scss
index 72c2d93734..812542515a 100644
--- a/cms/static/sass/elements/_modal.scss
+++ b/cms/static/sass/elements/_modal.scss
@@ -2,7 +2,7 @@
 // ====================
 
 .modal-cover {
-	@extend .ui-depth3;
+	@extend %ui-depth3;
 	display: none;
 	position: fixed;
 	top: 0;
@@ -13,7 +13,7 @@
 }
 
 .modal {
-	@extend .ui-depth4;
+	@extend %ui-depth4;
 	display: none;
 	position: fixed;
 	top: 60px;
@@ -61,7 +61,7 @@
 
 // lean modal alternative
 #lean_overlay {
-	@extend .ui-depth4;
+	@extend %ui-depth4;
 	position: fixed;
 	top: 0px;
 	left: 0px;
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index a9e2f45533..5c743ca4c6 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -5,7 +5,7 @@
 nav {
 
   ol, ul {
-    @extend .cont-no-list;
+    @extend %cont-no-list;
   }
 
   .nav-item {
@@ -111,7 +111,7 @@ nav {
     }
 
     .nav-item {
-      @extend .t-action3;
+      @extend %t-action3;
       display: block;
       margin: 0 0 ($baseline/4) 0;
       border-bottom: 1px solid $gray-l5;
diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss
index ff79cb10ef..66b797f530 100644
--- a/cms/static/sass/elements/_sock.scss
+++ b/cms/static/sass/elements/_sock.scss
@@ -10,7 +10,7 @@
 
   .wrapper-inner {
     @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
-    @extend .ui-depth0;
+    @extend %ui-depth0;
     display: none;
     width: 100% !important;
     border-bottom: 1px solid $white;
@@ -19,7 +19,7 @@
 
   // sock - actions
   .list-cta {
-    @extend .ui-depth1;
+    @extend %ui-depth1;
     position: absolute;
     top: -($baseline*0.75);
     width: 100%;
@@ -27,8 +27,8 @@
     text-align: center;
 
     .cta-show-sock {
-      @extend .ui-btn-pill;
-      @extend .t-action4;
+      @extend %ui-btn-pill;
+      @extend %t-action4;
       background: $gray-l5;
       padding: ($baseline/2) $baseline;
       color: $gray;
@@ -48,7 +48,7 @@
   // sock - additional help
   .sock {
     @include clearfix();
-    @extend .t-copy-sub2;
+    @extend %t-copy-sub2;
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
@@ -60,7 +60,7 @@
     header {
 
       .title {
-        @extend .t-title4;
+        @extend %t-title4;
       }
 
     }
@@ -70,13 +70,13 @@
       @include box-sizing(border-box);
 
       .title {
-        @extend .t-title6;
+        @extend %t-title6;
         color: $white;
         margin-bottom: ($baseline/2);
       }
 
       .copy {
-        @extend .t-copy-sub2;
+        @extend %t-copy-sub2;
         margin: 0 0 $baseline 0;
       }
 
@@ -92,7 +92,7 @@
           }
 
           .action {
-            @extend .t-action4;
+            @extend %t-action4;
             display: block;
 
             [class^="icon-"] {
@@ -108,13 +108,13 @@
           }
 
           .tip {
-            @extend .sr;
+            @extend %cont-text-sr;
           }
         }
 
         .action-primary {
-          @extend .btn-primary-blue;
-          @extend .t-action3;
+          @extend %btn-primary-blue;
+          @extend %t-action3;
         }
       }
     }
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 74187aca62..188fd28251 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -3,7 +3,7 @@
 
 // messages
 .message {
-  @extend .t-copy-sub1;
+  @extend %t-copy-sub1;
   display: block;
 }
 
@@ -49,7 +49,7 @@
   @include box-sizing(border-box);
 
   .copy {
-    @extend .t-copy-sub1;
+    @extend %t-copy-sub1;
   }
 }
 
@@ -186,7 +186,7 @@
 
 // prompts
 .wrapper-prompt {
-  @extend .ui-depth5;
+  @extend %ui-depth5;
   @include transition(all $tmg-f3 ease-in-out  0s);
   position: fixed;
   top: 0;
@@ -233,12 +233,12 @@
       }
 
       .action-primary {
-        @extend .t-action4;
+        @extend %t-action4;
         font-weight: 600;
       }
 
       .action-secondary {
-        @extend .t-action4;
+        @extend %t-action4;
       }
     }
   }
@@ -284,7 +284,7 @@
 
 // notifications
 .wrapper-notification {
-  @extend .ui-depth5;
+  @extend %ui-depth5;
   @include clearfix();
   box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
   position: fixed;
@@ -417,12 +417,12 @@
   }
 
   .copy {
-    @extend .t-copy-sub1;
+    @extend %t-copy-sub1;
     width: flex-grid(10, 12);
     color: $gray-l2;
 
     .title {
-      @extend .t-title7;
+      @extend %t-title7;
       margin-bottom: 0;
       color: $white;
     }
@@ -465,7 +465,7 @@
 
     .action-secondary {
 
-      @extend .t-action4;
+      @extend %t-action4;
     }
   }
 
@@ -486,7 +486,7 @@
     }
 
     .copy p {
-      @extend .cont-text-sr;
+      @extend %cont-text-sr;
     }
   }
 }
@@ -495,7 +495,7 @@
 
 // alerts
 .wrapper-alert {
-  @extend .ui-depth2;
+  @extend %ui-depth2;
   @include box-sizing(border-box);
   box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
   position: relative;
@@ -585,7 +585,7 @@
     color: $gray-l2;
 
     .title {
-      @extend .t-title7;
+      @extend %t-title7;
       margin-bottom: 0;
       color: $white;
     }
@@ -619,12 +619,12 @@
   	    }
 
         .action-primary {
-          @extend .t-action4;
+          @extend %t-action4;
           font-weight: 600;
         }
 
         .action-secondary {
-          @extend .t-action4;
+          @extend %t-action4;
         }
   	  }
   	}
@@ -641,7 +641,7 @@
     text-align: center;
 
     .label {
-      @extend .cont-text-sr;
+      @extend %cont-text-sr;
     }
 
     [class^="icon"] {
@@ -738,7 +738,7 @@ body.uxdesign.alerts {
   }
 
   .content-primary {
-    @extend .ui-window;
+    @extend %ui-window;
     width: flex-grid(12, 12);
     margin-right: flex-gutter();
     padding: $baseline ($baseline*1.5);
diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss
index c5fcc6a0ec..121518b187 100644
--- a/cms/static/sass/elements/_system-help.scss
+++ b/cms/static/sass/elements/_system-help.scss
@@ -7,12 +7,12 @@
   margin-bottom: $baseline;
 
   .title {
-    @extend .t-title4;
+    @extend %t-title4;
     font-weight: 600;
   }
 
   .copy {
-    @extend .t-copy-sub1;
+    @extend %t-copy-sub1;
   }
 
   strong {
@@ -30,14 +30,14 @@
     }
 
     .nav-introduction-supplementary {
-      @extend .t-copy-sub2;
+      @extend %t-copy-sub2;
       float: right;
       width: flex-grid(4,12);
       display: block;
       text-align: right;
 
       .icon {
-        @extend .t-action3;
+        @extend %t-action3;
         display: inline-block;
         vertical-align: middle;
         margin-right: ($baseline/4);
@@ -48,20 +48,20 @@
 
 // notices - in-context: to be used as notices to users within the context of a form/action
 .notice-incontext {
-  @extend .ui-well;
+  @extend %ui-well;
   border-radius: ($baseline/10);
   position: relative;
   overflow: hidden;
   margin-bottom: $baseline;
 
   .title {
-    @extend .t-title6;
+    @extend %t-title6;
     margin-bottom: ($baseline/2);
     font-weight: 700;
   }
 
   .copy {
-    @extend .t-copy-sub1;
+    @extend %t-copy-sub1;
     @include transition(opacity $tmg-f2 ease-in-out 0s);
     opacity: 0.75;
     margin-bottom: $baseline;
@@ -99,8 +99,8 @@
       }
 
       .action-primary {
-        @extend .btn-primary-blue;
-        @extend .t-action3;
+        @extend %btn-primary-blue;
+        @extend %t-action3;
       }
     }
   }
@@ -160,8 +160,8 @@
       }
 
       .action-primary {
-        @extend .btn-primary-blue;
-        @extend .t-action3;
+        @extend %btn-primary-blue;
+        @extend %t-action3;
       }
     }
   }
@@ -188,8 +188,8 @@
       }
 
       .action-primary {
-        @extend .btn-primary-green;
-        @extend .t-action3;
+        @extend %btn-primary-green;
+        @extend %t-action3;
       }
     }
   }
diff --git a/cms/static/sass/elements/_typography.scss b/cms/static/sass/elements/_typography.scss
index 55d7d01f2c..2d0ff05412 100644
--- a/cms/static/sass/elements/_typography.scss
+++ b/cms/static/sass/elements/_typography.scss
@@ -4,59 +4,59 @@
 // Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
 
 // headings/titles
-.t-title {
+%t-title {
   font-family: $f-sans-serif;
 }
 
-.t-title1 {
-  @extend .t-title;
+%t-title1 {
+  @extend %t-title;
   @include font-size(60);
   @include line-height(60);
 }
 
-.t-title2 {
-  @extend .t-title;
+%t-title2 {
+  @extend %t-title;
   @include font-size(48);
   @include line-height(48);
 }
 
-.t-title3 {
+%t-title3 {
   @include font-size(36);
   @include line-height(36);
 }
 
-.t-title4 {
-  @extend .t-title;
+%t-title4 {
+  @extend %t-title;
   @include font-size(24);
   @include line-height(24);
 }
 
-.t-title5 {
-  @extend .t-title;
+%t-title5 {
+  @extend %t-title;
   @include font-size(18);
   @include line-height(18);
 }
 
-.t-title6 {
-  @extend .t-title;
+%t-title6 {
+  @extend %t-title;
   @include font-size(16);
   @include line-height(16);
 }
 
-.t-title7 {
-  @extend .t-title;
+%t-title7 {
+  @extend %t-title;
   @include font-size(14);
   @include line-height(14);
 }
 
-.t-title8 {
-  @extend .t-title;
+%t-title8 {
+  @extend %t-title;
   @include font-size(12);
   @include line-height(12);
 }
 
-.t-title9 {
-  @extend .t-title;
+%t-title9 {
+  @extend %t-title;
   @include font-size(11);
   @include line-height(11);
 }
@@ -64,36 +64,36 @@
 // ====================
 
 // copy
-.t-copy {
+%t-copy {
   font-family: $f-sans-serif;
 }
 
-.t-copy-base {
-  @extend .t-copy;
+%t-copy-base {
+  @extend %t-copy;
   @include font-size(16);
   @include line-height(16);
 }
 
-.t-copy-lead1 {
-  @extend .t-copy;
+%t-copy-lead1 {
+  @extend %t-copy;
   @include font-size(18);
   @include line-height(18);
 }
 
-.t-copy-lead2 {
-  @extend .t-copy;
+%t-copy-lead2 {
+  @extend %t-copy;
   @include font-size(24);
   @include line-height(24);
 }
 
-.t-copy-sub1 {
-  @extend .t-copy;
+%t-copy-sub1 {
+  @extend %t-copy;
   @include font-size(14);
   @include line-height(14);
 }
 
-.t-copy-sub2 {
-  @extend .t-copy;
+%t-copy-sub2 {
+  @extend %t-copy;
   @include font-size(12);
   @include line-height(12);
 }
@@ -101,22 +101,22 @@
 // ====================
 
 // actions/labels
-.t-action1 {
+%t-action1 {
   @include font-size(18);
   @include line-height(18);
 }
 
-.t-action2 {
+%t-action2 {
   @include font-size(16);
   @include line-height(16);
 }
 
-.t-action3 {
+%t-action3 {
   @include font-size(14);
   @include line-height(14);
 }
 
-.t-action4 {
+%t-action4 {
   @include font-size(12);
   @include line-height(12);
 }
@@ -125,54 +125,54 @@
 // ====================
 
 // code
-.t-code {
+%t-code {
   font-family: $f-monospace;
 }
 
 // ====================
 
 // icons
-.t-icon1 {
+%t-icon1 {
   @include font-size(48);
   @include line-height(48);
 }
 
-.t-icon2 {
+%t-icon2 {
   @include font-size(36);
   @include line-height(36);
 }
 
-.t-icon3 {
+%t-icon3 {
   @include font-size(24);
   @include line-height(24);
 }
 
-.t-icon4 {
+%t-icon4 {
   @include font-size(18);
   @include line-height(18);
 }
 
-.t-icon5 {
+%t-icon5 {
   @include font-size(16);
   @include line-height(16);
 }
 
-.t-icon6 {
+%t-icon6 {
   @include font-size(14);
   @include line-height(14);
 }
 
-.t-icon7 {
+%t-icon7 {
   @include font-size(12);
   @include line-height(12);
 }
 
-.t-icon8 {
+%t-icon8 {
   @include font-size(11);
   @include line-height(11);
 }
 
-.t-icon9 {
+%t-icon9 {
   @include font-size(10);
   @include line-height(10);
 }
diff --git a/cms/static/sass/elements/_uploads.scss b/cms/static/sass/elements/_uploads.scss
index a94a9e52ee..f5437033fb 100644
--- a/cms/static/sass/elements/_uploads.scss
+++ b/cms/static/sass/elements/_uploads.scss
@@ -5,7 +5,7 @@ body.course.feature-upload {
 
   // dialog
   .wrapper-dialog {
-    @extend .ui-depth5;
+    @extend %ui-depth5;
     @include transition(all 0.05s ease-in-out);
     position: fixed;
     top: 0;
@@ -34,14 +34,14 @@ body.course.feature-upload {
       text-align: left;
 
       .title {
-        @extend .t-title5;
+        @extend %t-title5;
         margin-bottom: ($baseline/2);
         font-weight: 600;
         color: $black;
       }
 
       .message {
-        @extend .t-copy-sub2;
+        @extend %t-copy-sub2;
         color: $gray;
       }
 
@@ -59,7 +59,7 @@ body.course.feature-upload {
         }
 
         input[type="file"] {
-          @extend .t-copy-sub2;
+          @extend %t-copy-sub2;
         }
 
         .status-upload {
@@ -140,7 +140,7 @@ body.course.feature-upload {
 
 
           .action-item {
-            @extend .t-action4;
+            @extend %t-action4;
             display: inline-block;
             margin-right: ($baseline*0.75);
 
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index c2cf139400..ab6fa25eeb 100644
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -12,7 +12,7 @@ body.signup, body.signin {
 
   .content {
     @include clearfix();
-    @extend .t-copy-base;
+    @extend %t-copy-base;
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
@@ -26,14 +26,14 @@ body.signup, body.signin {
       padding-bottom: ($baseline/2);
 
       h1 {
-        @extend .t-title3;
+        @extend %t-title3;
         margin: 0;
         padding: 0;
         font-weight: 600;
       }
 
       .action {
-        @extend .t-action3;
+        @extend %t-action3;
         position: absolute;
         right: 0;
         top: 40%;
@@ -41,7 +41,7 @@ body.signup, body.signin {
     }
 
     .introduction {
-      @extend .t-copy-sub1;
+      @extend %t-copy-sub1;
       margin: 0 0 $baseline 0;
     }
   }
@@ -69,7 +69,7 @@ body.signup, body.signin {
 
         .action-primary {
           @include blue-button;
-          @extend .t-action2;
+          @extend %t-action2;
           @include transition(all $tmg-f3 linear 0s);
           display: block;
           width: 100%;
@@ -108,7 +108,7 @@ body.signup, body.signin {
           }
 
           label {
-            @extend  .t-copy-sub1;
+            @extend %t-copy-sub1;
             @include transition(color $tmg-f3 ease-in-out 0s);
             margin: 0 0 ($baseline/4) 0;
 
@@ -118,7 +118,7 @@ body.signup, body.signin {
           }
 
           input, textarea {
-            @extend .t-copy-base;
+            @extend %t-copy-base;
             height: 100%;
             width: 100%;
             padding: ($baseline/2);
@@ -171,7 +171,7 @@ body.signup, body.signin {
           }
 
           .tip {
-            @extend .t-copy-sub2;
+            @extend %t-copy-sub2;
             @include transition(color $tmg-f3 ease-in-out 0s);
             display: block;
             margin-top: ($baseline/4);
@@ -212,7 +212,7 @@ body.signup, body.signin {
     width: flex-grid(4, 12);
 
     .bit {
-      @extend .t-copy-sub1;
+      @extend %t-copy-sub1;
       margin: 0 0 $baseline 0;
       border-bottom: 1px solid $gray-l4;
       padding: 0 0 $baseline 0;
@@ -225,7 +225,7 @@ body.signup, body.signin {
       }
 
       h3 {
-        @extend .t-title7;
+        @extend %t-title7;
         margin: 0 0 ($baseline/4) 0;
         color: $gray-d2;
         font-weight: 600;
@@ -245,7 +245,7 @@ body.signup, body.signin {
     position: relative;
 
     .action-forgotpassword {
-      @extend .t-action3;
+      @extend %t-action3;
       position: absolute;
       top: 0;
       right: 0;
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index f2e134c32e..b2676e36a1 100644
--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -14,7 +14,7 @@ body.course.checklists {
 
   // checklists - general
   .course-checklist {
-    @extend .ui-window;
+    @extend %ui-window;
     margin: 0 0 ($baseline*2) 0;
 
     &:last-child {
@@ -23,7 +23,7 @@ body.course.checklists {
 
     // visual status
     .viz-checklist-status {
-      @extend .cont-text-hide;
+      @extend %cont-text-hide;
       @include size(100%,($baseline/4));
       position: relative;
       display: block;
@@ -40,7 +40,7 @@ body.course.checklists {
         background: $green;
 
         .int {
-          @extend .cont-text-sr;
+          @extend %cont-text-sr;
         }
       }
     }
@@ -83,7 +83,7 @@ body.course.checklists {
       }
 
       .checklist-status {
-        @extend .t-copy-sub1;
+        @extend %t-copy-sub1;
         width: flex-grid(3, 9);
         float: right;
         margin-top: ($baseline/2);
@@ -99,7 +99,7 @@ body.course.checklists {
         }
 
         .status-count {
-          @extend .t-copy-base;
+          @extend %t-copy-base;
           margin-left: ($baseline/4);
           margin-right: ($baseline/4);
           color: $gray-d3;
@@ -107,7 +107,7 @@ body.course.checklists {
         }
 
         .status-amount {
-          @extend .t-copy-base;
+          @extend %t-copy-base;
           margin-left: ($baseline/4);
           color: $gray-d3;
           font-weight: 600;
@@ -138,7 +138,7 @@ body.course.checklists {
 
       .action-secondary {
         @include grey-button();
-        @extend .t-action3;
+        @extend %t-action3;
         font-weight: 400;
         float: right;
 
@@ -245,13 +245,13 @@ body.course.checklists {
         }
 
         .task-description {
-          @extend .t-copy-sub1;
+          @extend %t-copy-sub1;
           @include transition(color $tmg-f2 ease-in-out 0s);
           color: $gray-l2;
         }
 
         .task-support {
-          @extend .t-copy-sub2;
+          @extend %t-copy-sub2;
           @include transition(opacity $tmg-f2 ease-in-out 0s);
           opacity: 0.0;
           pointer-events: none;
@@ -272,13 +272,13 @@ body.course.checklists {
 
         .action-primary {
           @include blue-button;
-          @extend .t-action4;
+          @extend %t-action4;
           font-weight: 600;
           text-align: center;
         }
 
         .action-secondary {
-          @extend .t-action4;
+          @extend %t-action4;
           margin-top: ($baseline/2);
         }
       }
@@ -319,7 +319,7 @@ body.course.checklists {
 
           .action-primary {
             @include grey-button;
-            @extend .t-action4;
+            @extend %t-action4;
             font-weight: 600;
             text-align: center;
           }
diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss
index 817fc726c0..42dbc7b2dc 100644
--- a/cms/static/sass/views/_dashboard.scss
+++ b/cms/static/sass/views/_dashboard.scss
@@ -58,8 +58,8 @@ body.dashboard {
 	      }
 
 	      .action-create-course {
-	      	@extend .btn-primary-green;
-	      	@extend .t-action3;
+	      	@extend %btn-primary-green;
+	      	@extend %t-action3;
 	      }
 	    }
 	  }
@@ -72,8 +72,8 @@ body.dashboard {
 		overflow: hidden;
 
 		.ui-toggle-control {
-			@extend .ui-depth2;
-			@extend .btn-secondary-gray;
+			@extend %ui-depth2;
+			@extend %btn-secondary-gray;
 			@include clearfix();
 			display: block;
 			text-align: left;
@@ -85,14 +85,14 @@ body.dashboard {
 			}
 
 			.label {
-				@extend .t-action3;
+				@extend %t-action3;
 				float: left;
 				width: flex-grid(8, 9);
 				margin: 3px flex-gutter() 0 0;
 			}
 
 			.icon-remove-sign {
-				@extend .t-action1;
+				@extend %t-action1;
 				@include transform(rotate(45deg));
 				@include transform-origin(center center);
 				@include transition(all $tmg-f1 linear 0s);
@@ -102,7 +102,7 @@ body.dashboard {
 		}
 
 		.ui-toggle-target {
-			@extend .ui-depth1;
+			@extend %ui-depth1;
 			@include transition(opacity $tmg-f1 ease-in-out 0s);
 			position: relative;
 			top: -2px;
@@ -136,7 +136,7 @@ body.dashboard {
 		margin-top: $baseline;
 
 		.title {
-			@extend .t-title7;
+			@extend %t-title7;
 			margin-bottom: ($baseline/4);
 			font-weight: 700;
 			color: $gray-d1;
@@ -154,8 +154,8 @@ body.dashboard {
       }
 
       .action-primary {
-        @extend .btn-primary-blue;
-        @extend .t-action3;
+        @extend %btn-primary-blue;
+        @extend %t-action3;
       }
 
       // specific - request button
@@ -203,7 +203,7 @@ body.dashboard {
     .status-update {
 
     	.label {
-				@extend .cont-text-sr;
+				@extend %cont-text-sr;
     	}
 
     	.value {
@@ -232,7 +232,7 @@ body.dashboard {
 			}
 
     	.value-formal {
-    		@extend .t-title5;
+    		@extend %t-title5;
     		margin: ($baseline/2);
     		font-weight: 700;
 
@@ -242,7 +242,7 @@ body.dashboard {
     	}
 
     	.value-description {
-    		@extend .t-copy-sub1;
+    		@extend %t-copy-sub1;
     		position: relative;
     		color: $white;
 				opacity: 0.85;
@@ -253,7 +253,7 @@ body.dashboard {
 		&.is-unrequested {
 
 			.title {
-				@extend .cont-text-sr;
+				@extend %cont-text-sr;
 			}
 		}
 
@@ -336,21 +336,21 @@ body.dashboard {
 
       // encompassing course link
       .course-link {
-        @extend .ui-depth2;
+        @extend %ui-depth2;
         width: flex-grid(7, 9);
         margin-right: flex-gutter();
       }
 
       // course title
       .course-title {
-        @extend .t-title4;
+        @extend %t-title4;
         margin: 0 ($baseline*2) ($baseline/4) 0;
         font-weight: 300;
       }
 
       // course metadata
       .course-metadata {
-        @extend .t-copy-sub1;
+        @extend %t-copy-sub1;
         @include transition(opacity $tmg-f1 ease-in-out 0);
         color: $gray;
         opacity: 0.75;
@@ -375,20 +375,20 @@ body.dashboard {
           }
 
           .label {
-            @extend .cont-text-sr;
+            @extend %cont-text-sr;
           }
         }
       }
 
       .course-actions {
-        @extend .ui-depth3;
+        @extend %ui-depth3;
         position: static;
         width: flex-grid(2, 9);
         text-align: right;
 
         // view live button
         .view-live-button {
-          @extend .ui-depth3;
+          @extend %ui-depth3;
           @include transition(opacity $tmg-f2 ease-in-out 0);
           @include box-sizing(border-box);
           padding: ($baseline/2);
@@ -447,7 +447,7 @@ body.dashboard {
 		}
 
 		label {
-			@extend .t-title7;
+			@extend %t-title7;
 			display: block;
 			font-weight: 700;
 		}
@@ -460,7 +460,7 @@ body.dashboard {
 		}
 
 		.new-course-name {
-			@extend .t-title5;
+			@extend %t-title5;
 			font-weight: 300;
 		}
 
diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss
index 954fe7fc81..05fef2ddf2 100644
--- a/cms/static/sass/views/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -4,7 +4,7 @@
 body.course.export {
 
   .export-overview {
-    @extend .ui-window;
+    @extend %ui-window;
     @include clearfix;
     padding: 30px 40px;
   }
diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss
index e9701c14cf..931c682a3a 100644
--- a/cms/static/sass/views/_import.scss
+++ b/cms/static/sass/views/_import.scss
@@ -4,7 +4,7 @@
 body.course.import {
 
   .import-overview {
-    @extend .ui-window;
+    @extend %ui-window;
     @include clearfix;
     padding: 30px 40px;
   }
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index d571949cba..52df8ea137 100644
--- a/cms/static/sass/views/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -18,7 +18,7 @@ body.index {
     }
 
     .content {
-      @extend .t-copy-base;
+      @extend %t-copy-base;
       @include clearfix();
       max-width: $fg-max-width;
       min-width: $fg-min-width;
@@ -62,7 +62,7 @@ body.index {
       color: $white;
 
       h1 {
-        @extend .t-title2;
+        @extend %t-title2;
         float: none;
         margin: 0 0 ($baseline/2) 0;
         border-bottom: 1px solid $blue-l1;
@@ -81,7 +81,7 @@ body.index {
       }
 
       .tagline {
-        @extend .t-title4;
+        @extend %t-title4;
         margin: 0;
         color: $blue-l3;
       }
@@ -196,13 +196,13 @@ body.index {
           margin-top: -($baseline/4);
 
           h3 {
-            @extend .t-title4;
+            @extend %t-title4;
             margin: 0 0 ($baseline/2) 0;
             font-weight: 600;
           }
 
           > p {
-            @extend .t-copy-lead1;
+            @extend %t-copy-lead1;
             color: $gray-d1;
           }
 
@@ -212,7 +212,7 @@ body.index {
           }
 
           .list-proofpoints {
-            @extend .t-copy-sub1;
+            @extend %t-copy-sub1;
             @include clearfix();
             width: flex-grid(9, 9);
             margin: ($baseline*1.5) 0 0 0;
@@ -231,14 +231,14 @@ body.index {
               color: $gray-l1;
 
               .title {
-                @extend .t-copy-base;
+                @extend %t-copy-base;
                 margin: 0 0 ($baseline/4) 0;
                 font-weight: 500;
                 color: $gray-d3;
               }
 
               &:hover {
-                @extend .fake-link;
+                @extend %ui-fake-link;
                 box-shadow: 0 1px ($baseline/10) $shadow-l1;
                 background: $blue-l5;
                 top: -($baseline/5);
@@ -323,7 +323,7 @@ body.index {
           text-align: center;
 
           &.action-primary {
-            @extend .t-action1;
+            @extend %t-action1;
             @include blue-button;
             padding: ($baseline*0.75) ($baseline/2);
             font-weight: 600;
@@ -332,7 +332,7 @@ body.index {
           }
 
           &.action-secondary {
-            @extend .t-action3;
+            @extend %t-action3;
             margin-top: ($baseline/2);
           }
         }
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 4cbf1235b8..b72f21a7b0 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -630,7 +630,7 @@ body.course.outline {
             }
 
             label {
-              @extend .t-copy-sub1;
+              @extend %t-copy-sub1;
               margin-bottom: ($baseline/4);
             }
           }
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index bddb630bbb..d3de0bf9ce 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -9,7 +9,7 @@ body.course.settings {
   }
 
   .content-primary {
-    @extend .ui-window;
+    @extend %ui-window;
     width: flex-grid(9, 12);
     margin-right: flex-gutter();
     padding: $baseline ($baseline*1.5);
@@ -72,7 +72,7 @@ body.course.settings {
       }
 
       .tip {
-        @extend .t-copy-sub2;
+        @extend %t-copy-sub2;
         width: flex-grid(5, 9);
         float: right;
         margin-top: ($baseline/2);
@@ -92,12 +92,12 @@ body.course.settings {
 
     // in form  -UI hints/tips/messages
     .instructions {
-      @extend .t-copy-sub1;
+      @extend %t-copy-sub1;
       margin: 0 0 $baseline 0;
     }
 
     .tip {
-      @extend .t-copy-sub2;
+      @extend %t-copy-sub2;
       @include transition(color $tmg-f2 ease-in-out 0s);
       display: block;
       margin-top: ($baseline/4);
@@ -105,7 +105,7 @@ body.course.settings {
     }
 
     .message-error {
-      @extend .t-copy-sub1;
+      @extend %t-copy-sub1;
       display: block;
       margin-top: ($baseline/4);
       margin-bottom: ($baseline/2);
@@ -115,12 +115,12 @@ body.course.settings {
     // buttons
     .remove-item {
       @include white-button;
-      @extend .t-action3;
+      @extend %t-action3;
       font-weight: 400;
     }
 
     .new-button {
-      // @extend .t-action3; - bad buttons won't render this properly
+      // @extend %t-action3; - bad buttons won't render this properly
       @include font-size(14);
     }
 
@@ -154,7 +154,7 @@ body.course.settings {
         }
 
         label {
-          @extend .t-copy-sub1;
+          @extend %t-copy-sub1;
           @include transition(color $tmg-f2 ease-in-out 0s);
           margin: 0 0 ($baseline/4) 0;
           font-weight: 400;
@@ -165,7 +165,7 @@ body.course.settings {
         }
 
         input, textarea {
-          @extend .t-copy-base;
+          @extend %t-copy-base;
           @include placeholder($gray-l4);
           @include size(100%,100%);
           padding: ($baseline/2);
@@ -265,7 +265,7 @@ body.course.settings {
         }
 
         input, textarea {
-          @extend .t-copy-lead1;
+          @extend %t-copy-lead1;
           box-shadow: none;
           border: none;
           background: none;
@@ -301,7 +301,7 @@ body.course.settings {
         padding: ($baseline/2) 0 0 0;
 
         .title {
-          @extend .t-copy-sub1;
+          @extend %t-copy-sub1;
           margin: 0 0 ($baseline/10) 0;
           padding: 0 ($baseline/2);
 
@@ -315,7 +315,7 @@ body.course.settings {
           padding: 0 ($baseline/2) ($baseline/2) ($baseline/2);
 
           .link-courseURL {
-            @extend .t-copy-lead1;
+            @extend %t-copy-lead1;
             @include box-sizing(border-box);
             display: block;
             width: 100%;
@@ -337,11 +337,11 @@ body.course.settings {
 
           .action-primary {
             @include blue-button();
-            @extend .t-action3;
+            @extend %t-action3;
             font-weight: 600;
 
             [class^="icon-"] {
-              @extend .t-icon5;
+              @extend %t-icon5;
               display: inline-block;
               vertical-align: middle;
               margin-top: -3px;
@@ -460,7 +460,7 @@ body.course.settings {
         }
 
         .msg {
-          @extend .t-copy-sub2;
+          @extend %t-copy-sub2;
           display: block;
           margin-top: ($baseline/2);
           color: $gray-l3;
@@ -478,7 +478,7 @@ body.course.settings {
         }
 
         .action-upload-image {
-          @extend .ui-btn-flat-outline;
+          @extend %ui-btn-flat-outline;
           float: right;
           width: flex-grid(2,9);
           margin-top: ($baseline/4);
@@ -820,7 +820,7 @@ body.course.settings {
 
       // specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
       .CodeMirror {
-        @extend .t-copy-base;
+        @extend %t-copy-base;
         @include box-sizing(border-box);
         box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
         @include linear-gradient($lightGrey, tint($lightGrey, 90%));
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index 2bcf13441e..947ef20550 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -171,7 +171,7 @@ body.course.static-pages {
   }
 
   .static-page-details {
-    @extend .ui-window;
+    @extend %ui-window;
     padding: 32px 40px;
 
     .row {
diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss
index ac644b6ff7..fb67b65dae 100644
--- a/cms/static/sass/views/_textbooks.scss
+++ b/cms/static/sass/views/_textbooks.scss
@@ -13,7 +13,7 @@ body.course.textbooks {
     margin-right: flex-gutter();
 
     .no-textbook-content {
-      @extend .ui-well;
+      @extend %ui-well;
       padding: ($baseline*2);
       background-color: $gray-l4;
       text-align: center;
@@ -30,7 +30,7 @@ body.course.textbooks {
     }
 
     .textbook {
-      @extend .ui-window;
+      @extend %ui-window;
       position: relative;
 
       .view-textbook {
@@ -42,7 +42,7 @@ body.course.textbooks {
         }
 
         .textbook-title {
-          @extend .t-title4;
+          @extend %t-title4;
           margin-right: ($baseline*14);
           font-weight: bold;
         }
@@ -71,7 +71,7 @@ body.course.textbooks {
           margin-left: $baseline;
 
           .chapter {
-            @extend .t-copy-sub2;
+            @extend %t-copy-sub2;
             margin-bottom: ($baseline/4);
             border-bottom: 1px solid $gray-l4;
 
@@ -106,16 +106,16 @@ body.course.textbooks {
 
             .view {
               @include blue-button;
-              @extend .t-action4;
+              @extend %t-action4;
             }
 
             .edit {
               @include blue-button;
-              @extend .t-action4;
+              @extend %t-action4;
             }
 
             .delete {
-              @extend .ui-btn-non;
+              @extend %ui-btn-non;
             }
           }
 
@@ -160,7 +160,7 @@ body.course.textbooks {
 
         .action-primary {
           @include blue-button;
-          @extend .t-action2;
+          @extend %t-action2;
           @include transition(all .15s);
           display: inline-block;
           padding: ($baseline/5) $baseline;
@@ -170,7 +170,7 @@ body.course.textbooks {
 
         .action-secondary {
           @include grey-button;
-          @extend .t-action2;
+          @extend %t-action2;
           @include transition(all .15s);
           display: inline-block;
           padding: ($baseline/5) $baseline;
@@ -182,7 +182,7 @@ body.course.textbooks {
       }
 
       .copy {
-        @extend .t-copy-sub2;
+        @extend %t-copy-sub2;
         margin: ($baseline) 0 ($baseline/2) 0;
         color: $gray;
 
@@ -196,7 +196,7 @@ body.course.textbooks {
 
       .chapters-fields,
       .textbook-fields {
-        @extend .cont-no-list;
+        @extend %cont-no-list;
 
         .field {
           margin: 0 0 ($baseline*0.75) 0;
@@ -222,7 +222,7 @@ body.course.textbooks {
           }
 
           label {
-            @extend  .t-copy-sub1;
+            @extend %t-copy-sub1;
             @include transition(color, 0.15s, ease-in-out);
             margin: 0 0 ($baseline/4) 0;
 
@@ -233,13 +233,13 @@ body.course.textbooks {
 
 
           &.add-textbook-name label {
-            @extend .t-title5;
+            @extend %t-title5;
           }
 
 
           //this section is borrowed from _account.scss - we should clean up and unify later
           input, textarea {
-            @extend .t-copy-base;
+            @extend %t-copy-base;
             height: 100%;
             width: 100%;
             padding: ($baseline/2);
@@ -292,7 +292,7 @@ body.course.textbooks {
           }
 
           .tip {
-            @extend .t-copy-sub2;
+            @extend %t-copy-sub2;
             @include transition(color, 0.15s, ease-in-out);
             display: block;
             margin-top: ($baseline/4);
@@ -328,7 +328,7 @@ body.course.textbooks {
             }
 
             .action-upload {
-                @extend .ui-btn-flat-outline;
+                @extend %ui-btn-flat-outline;
                 position: absolute;
                 top: 3px;
                 right: 0;
@@ -356,7 +356,7 @@ body.course.textbooks {
 
 
       .action-add-chapter {
-        @extend .ui-btn-flat-outline;
+        @extend %ui-btn-flat-outline;
         @include font-size(16);
         display: block;
         width: 100%;
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index 6e893fece3..2434a7f693 100644
--- a/cms/static/sass/views/_unit.scss
+++ b/cms/static/sass/views/_unit.scss
@@ -466,7 +466,7 @@ body.course.unit {
 
         .action-primary {
           @include blue-button;
-          @extend .t-action2;
+          @extend %t-action2;
           @include transition(all .15s);
           display: inline-block;
           padding: ($baseline/5) $baseline;
@@ -476,7 +476,7 @@ body.course.unit {
 
         .action-secondary {
           @include grey-button;
-          @extend .t-action2;
+          @extend %t-action2;
           @include transition(all .15s);
           display: inline-block;
           padding: ($baseline/5) $baseline;
@@ -500,7 +500,7 @@ body.course.unit {
 
   //Component Name
   .component-name {
-    @extend .t-copy-sub1;
+    @extend %t-copy-sub1;
     width: 50%;
     color: $white;
     font-weight: 600;
@@ -637,7 +637,7 @@ body.course.unit {
       }
 
       .setting-label {
-        @extend .t-copy-sub1;
+        @extend %t-copy-sub1;
         @include transition(color $tmg-f2 ease-in-out 0s);
         vertical-align: middle;
         display: inline-block;
@@ -794,8 +794,8 @@ body.course.unit {
         }
 
         .create-setting {
-          @extend .ui-btn-flat-outline;
-          @extend .t-action3;
+          @extend %ui-btn-flat-outline;
+          @extend %t-action3;
           display: block;
           width: 100%;
           padding: ($baseline/2);
@@ -974,7 +974,7 @@ body.unit {
     .unit-id {
 
       .label {
-        @extend .t-title7;
+        @extend %t-title7;
         margin-bottom: ($baseline/4);
         color: $gray-d1;
       }
diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss
index 7e88edd38c..460919691a 100644
--- a/cms/static/sass/views/_users.scss
+++ b/cms/static/sass/views/_users.scss
@@ -22,7 +22,7 @@ body.course.users {
   .content {
 
     .introduction {
-      @extend .t-copy-sub1;
+      @extend %t-copy-sub1;
       margin: 0 0 ($baseline*2) 0;
     }
   }
@@ -56,7 +56,7 @@ body.course.users {
 
         .action-primary {
           @include green-button(); // overwriting for the sake of syncing older green button styles for now
-          @extend .t-action3;
+          @extend %t-action3;
           padding: ($baseline/2) $baseline;
         }
       }
@@ -80,7 +80,7 @@ body.course.users {
   .user-list {
 
     .user-item {
-      @extend .ui-window;
+      @extend %ui-window;
       @include clearfix();
       position: relative;
       width: flex-grid(9, 9);
@@ -98,7 +98,7 @@ body.course.users {
 
       // ELEM: item - flag
       .flag-role {
-        @extend .ui-badge;
+        @extend %ui-badge;
         color: $white;
 
         .msg-you {
@@ -132,7 +132,7 @@ body.course.users {
         }
 
         .user-username {
-          @extend .t-title4;
+          @extend %t-title4;
           @include transition(color $tmg-f2 ease-in-out 0s);
           margin: 0 ($baseline/2) ($baseline/10) 0;
           color: $gray-d4;
@@ -140,7 +140,7 @@ body.course.users {
         }
 
         .user-email {
-          @extend .t-title6;
+          @extend %t-title6;
         }
       }
 
@@ -172,7 +172,7 @@ body.course.users {
         }
 
         .delete {
-          @extend .ui-btn-non;
+          @extend %ui-btn-non;
         }
 
         // HACK: nasty reset needed due to base.scss
@@ -187,7 +187,7 @@ body.course.users {
 
           &.add-admin-role {
             @include blue-button;
-            @extend .t-action2;
+            @extend %t-action2;
             @include transition(all .15s);
             display: inline-block;
             padding: ($baseline/5) $baseline;
@@ -196,7 +196,7 @@ body.course.users {
 
           &.remove-admin-role {
             @include grey-button;
-            @extend .t-action2;
+            @extend %t-action2;
             @include transition(all .15s);
             display: inline-block;
             padding: ($baseline/5) $baseline;
@@ -205,7 +205,7 @@ body.course.users {
         }
 
         .notoggleforyou {
-          @extend .t-copy-sub1;
+          @extend %t-copy-sub1;
           color: $gray-l2;
         }
       }
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 3687d395f4..3c53f0f4cf 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -44,14 +44,14 @@
 // ====================
 
 // extends - UI - used for page/view-level wrappers (for centering/grids)
-.ui-wrapper {
+%ui-wrapper {
   @include clearfix();
   @include box-sizing(border-box);
   width: 100%;
 }
 
 // extends - UI - window
-.ui-window {
+%ui-window {
   @include clearfix();
   border-radius: 3px;
   box-shadow: 0 1px 1px $shadow-l1;
@@ -61,27 +61,27 @@
 }
 
 // extends - UI - visual link
-.ui-fake-link {
+%ui-fake-link {
   cursor: pointer;
 }
 
 // extends - UI - functional disable
-.ui-disabled {
+%ui-disabled {
   pointer-events: none;
   outline: none;
 }
 
 // extends - UI - depth levels
-.ui-depth0 { z-index: 0; }
-.ui-depth1 { z-index: 10; }
-.ui-depth2 { z-index: 100; }
-.ui-depth3 { z-index: 1000; }
-.ui-depth4 { z-index: 10000; }
-.ui-depth5 { z-index: 100000; }
+%ui-depth0 { z-index: 0; }
+%ui-depth1 { z-index: 10; }
+%ui-depth2 { z-index: 100; }
+%ui-depth3 { z-index: 1000; }
+%ui-depth4 { z-index: 10000; }
+%ui-depth5 { z-index: 100000; }
 
 
 // extends - UI - buttons
-.ui-btn {
+%ui-btn {
   @include box-sizing(border-box);
   @include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s);
   display: inline-block;
@@ -105,18 +105,18 @@
 }
 
 // pill button
-.ui-btn-pill {
+%ui-btn-pill {
   border-radius: ($baseline/5);
 }
 
-.ui-btn-rounded {
+%ui-btn-rounded {
   border-radius: ($baseline/2);
 }
 
 // primary button
-.ui-btn-primary {
-  @extend .ui-btn;
-  @extend .ui-btn-pill;
+%ui-btn-primary {
+  @extend %ui-btn;
+  @extend %ui-btn-pill;
   padding:($baseline/2) $baseline;
   border-width: 1px;
   border-style: solid;
@@ -137,9 +137,9 @@
 }
 
 // secondary button
-.ui-btn-secondary {
-  @extend .ui-btn;
-  @extend .ui-btn-pill;
+%ui-btn-secondary {
+  @extend %ui-btn;
+  @extend %ui-btn-pill;
   border-width: 1px;
   border-style: solid;
   padding:($baseline/2) $baseline;
@@ -156,8 +156,8 @@
   }
 }
 
-.ui-btn-flat-outline {
-  @extend .t-action4;
+%ui-btn-flat-outline {
+  @extend %t-action4;
   @include transition(all .15s);
   font-weight: 600;
   text-align: center;
@@ -183,7 +183,7 @@
 }
 
 // button with no button shell until hover for understated actions
-.ui-btn-non {
+%ui-btn-non {
   @include transition(all .15s);
   border: none;
   border-radius: ($baseline/4);
@@ -198,12 +198,12 @@
   }
 
   span {
-    @extend .cont-text-sr;
+    @extend %cont-text-sr;
   }
 }
 
 // extends - UI archetypes - well
-.ui-well {
+%ui-well {
   box-shadow: inset 0 1px 2px 1px $shadow;
   padding: ($baseline*0.75) $baseline;
 }
@@ -211,7 +211,7 @@
 // ====================
 
 // extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
-.cont-no-list {
+%cont-no-list {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -224,14 +224,14 @@
 }
 
 // extends - content - image-replacement hidden text
-.cont-text-hide {
+%cont-text-hide {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
 }
 
 // extends - content - hidden elems - screenreaders
-.cont-text-sr {
+%cont-text-sr {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -243,7 +243,7 @@
 }
 
 // extends - content - wrapping
-.cont-text-wrap {
+%cont-text-wrap {
   text-wrap: wrap;
   white-space: pre-wrap;
   white-space: -moz-pre-wrap;
@@ -251,7 +251,7 @@
 }
 
 // extends - content - text overflow by ellipsis
-.cont-truncated {
+%cont-truncated {
   @include box-sizing(border-box);
   overflow: hidden;
   white-space: nowrap;