diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index 33180e7a11..66b5e00405 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -223,7 +223,7 @@ mark {
 }
 
 .sr {
-  @extend .text-sr;
+  @extend %text-sr;
 }
 
 .help-tab {
diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss
index 9e25c863e0..5a5a4fde94 100644
--- a/lms/static/sass/base/_mixins.scss
+++ b/lms/static/sass/base/_mixins.scss
@@ -55,26 +55,26 @@
 // ====================
 
 // 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 -hidden elems - screenreaders
-.text-sr {
+%text-sr {
   border: 0;
   clip: rect(1px 1px 1px 1px);
   height: 1px;
@@ -86,7 +86,7 @@
 }
 
 // extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
-.ui-no-list {
+%ui-no-list {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -99,14 +99,14 @@
 }
 
 // extends - text - image-replacement hidden text
-.text-hide {
+%text-hide {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
 }
 
 // extends - text - wrapping
-.text-wrap {
+%text-wrap {
   text-wrap: wrap;
   white-space: pre-wrap;
   white-space: -moz-pre-wrap;
@@ -114,7 +114,7 @@
 }
 
 // extends - text - text overflow by ellipsis
-.text-truncated {
+%text-truncated {
   @include box-sizing(border-box);
   overflow: hidden;
   white-space: nowrap;
diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss
index b179c04b9b..3582f51132 100644
--- a/lms/static/sass/elements/_controls.scss
+++ b/lms/static/sass/elements/_controls.scss
@@ -1,7 +1,7 @@
 // lms - elements - controls
 // ====================
 
-.btn {
+%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;
@@ -18,23 +18,23 @@
   }
 }
 
-.btn-pill {
+%btn-pill {
   border-radius: $baseline/5;
 }
 
-.btn-rounded {
+%btn-rounded {
   border-radius: ($baseline/2);
 }
 
-.btn-edged {
+%btn-edged {
   border-radius: ($baseline/10);
 }
 
 // primary button
-.btn-primary {
-  @extend .t-weight3;
-  @extend .btn;
-  @extend .btn-edged;
+%btn-primary {
+  @extend %t-weight3;
+  @extend %btn;
+  @extend %btn-edged;
   border: none;
   padding: ($baseline*0.75) $baseline;
   text-align: center;
@@ -57,8 +57,8 @@
 }
 
 // blue primary gray
-.btn-primary-gray {
-  @extend .btn-primary;
+%btn-primary-gray {
+  @extend %btn-primary;
   box-shadow: 0 2px 1px 0 $m-gray-d2;
   background: $m-gray;
   color: $white;
@@ -85,8 +85,8 @@
 }
 
 // blue primary button
-.btn-primary-blue {
-  @extend .btn-primary;
+%btn-primary-blue {
+  @extend %btn-primary;
   box-shadow: 0 2px 1px 0 $m-blue-d4;
   background: $m-blue-d3;
   color: $white;
@@ -113,8 +113,8 @@
 }
 
 // pink primary button
-.btn-primary-pink {
-  @extend .btn-primary;
+%btn-primary-pink {
+  @extend %btn-primary;
   box-shadow: 0 2px 1px 0 $m-pink-d2;
   background: $m-pink;
   color: $white;
@@ -141,8 +141,8 @@
 }
 
 // green primary button
-.btn-primary-green {
-  @extend .btn-primary;
+%btn-primary-green {
+  @extend %btn-primary;
   box-shadow: 0 2px 1px 0 $m-green-d2;
   background: $m-green-d1;
   color: $white;
@@ -169,7 +169,7 @@
 }
 
 // disabled primary button - used for more manual approaches
-.btn-primary-disabled {
+%btn-primary-disabled {
   background: $m-gray-l2;
   color: $white-t3;
   pointer-events: none;
@@ -189,19 +189,19 @@
   }
 
   .btn-large {
-    @extend .t-action1;
-    @extend .t-weight3;
+    @extend %t-action1;
+    @extend %t-weight3;
     display: block;
     padding:($baseline*0.75) ($baseline*1.5);
   }
 
   .btn-avg {
-    @extend .t-action2;
-    @extend .t-weight3;
+    @extend %t-action2;
+    @extend %t-weight3;
   }
 
   .btn-blue {
-    @extend .btn-primary-blue;
+    @extend %btn-primary-blue;
     margin-bottom: $baseline;
 
 
@@ -211,7 +211,7 @@
   }
 
   .btn-pink {
-    @extend .btn-primary-pink;
+    @extend %btn-primary-pink;
     margin-bottom: $baseline;
 
 
diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss
index 884f1651ef..043a205278 100644
--- a/lms/static/sass/elements/_typography.scss
+++ b/lms/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,72 +125,72 @@
 // ====================
 
 // code
-.t-code {
+%t-code {
   font-family: $f-monospace;
 }
 
 // ====================
 
 // icons
-.t-icon1 {
+%t-icon1 {
   @include font-size(48);
 }
 
-.t-icon2 {
+%t-icon2 {
   @include font-size(36);
 }
 
-.t-icon3 {
+%t-icon3 {
   @include font-size(24);
 }
 
-.t-icon4 {
+%t-icon4 {
   @include font-size(18);
 }
 
-.t-icon5 {
+%t-icon5 {
   @include font-size(16);
 }
 
-.t-icon6 {
+%t-icon6 {
   @include font-size(14);
 }
 
-.t-icon7 {
+%t-icon7 {
   @include font-size(12);
 }
 
-.t-icon8 {
+%t-icon8 {
   @include font-size(11);
 }
 
-.t-icon9 {
+%t-icon9 {
   @include font-size(10);
 }
 
-.t-icon-solo {
+%t-icon-solo {
   @include line-height(0);
 }
 
 // ====================
 
 // typography weights
-.t-weight1 {
+%t-weight1 {
   font-weight: 300;
 }
 
-.t-weight2 {
+%t-weight2 {
   font-weight: 400;
 }
 
-.t-weight3 {
+%t-weight3 {
   font-weight: 500;
 }
 
-.t-weight4 {
+%t-weight4 {
   font-weight: 600;
 }
 
-.t-weight5 {
+%t-weight5 {
   font-weight: 700;
 }
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 697f9fcfe1..9ca37e9c9d 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -274,7 +274,7 @@
 
     // UI: course list
     .listing-courses {
-      @extend .ui-no-list;
+      @extend %ui-no-list;
 
       .course-item {
         margin-bottom: ($baseline*2.5);
@@ -294,7 +294,7 @@
       @include box-sizing(box);
       @include transition(all 0.15s linear 0s);
       @include clearfix();
-      @extend .ui-depth2;
+      @extend %ui-depth2;
       position: relative;
 
       .cover {
@@ -418,7 +418,7 @@
 
       // STATE: course mode - verified
       &.verified {
-        @extend .ui-depth2;
+        @extend %ui-depth2;
         margin-top: ($baseline*2.5);
         border-top: 1px solid $verified-color-lvl3;
         padding-top: ($baseline*1.25);
@@ -438,11 +438,11 @@
           text-align: center;
 
           .label {
-            @extend .text-sr;
+            @extend %text-sr;
           }
 
           .deco-graphic {
-            @extend .ui-depth3;
+            @extend %ui-depth3;
             width: 40px;
             position: absolute;
             left: -30px;
@@ -450,8 +450,8 @@
           }
 
           .sts-enrollment-value {
-            @extend .ui-depth1;
-            @extend .copy-badge;
+            @extend %ui-depth1;
+            @extend %copy-badge;
             border-radius: 0;
             padding: ($baseline/4) ($baseline/2) ($baseline/4) $baseline;
             color: $white;
diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index a78d723b01..4de7cb2e0e 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -3,76 +3,76 @@
 
 // MISC: extends - type
 // application: canned headings
-.hd-lv1 {
-  @extend .t-title1;
-  @extend .t-weight1;
+%hd-lv1 {
+  @extend %t-title1;
+  @extend %t-weight1;
   color: $m-gray-d4;
   margin: 0 0 ($baseline*2) 0;
 }
 
-.hd-lv2 {
-  @extend .t-title4;
-  @extend .t-weight1;
+%hd-lv2 {
+  @extend %t-title4;
+  @extend %t-weight1;
   margin: 0 0 ($baseline*0.75) 0;
   border-bottom: 1px solid $m-gray-l3;
   padding-bottom: ($baseline/2);
   color: $m-gray-d4;
 }
 
-.hd-lv3 {
-  @extend .t-title6;
-  @extend .t-weight4;
+%hd-lv3 {
+  @extend %t-title6;
+  @extend %t-weight4;
   margin: 0 0 ($baseline/4) 0;
   color: $m-gray-d4;
 }
 
-.hd-lv4 {
-  @extend .t-title6;
-  @extend .t-weight2;
+%hd-lv4 {
+  @extend %t-title6;
+  @extend %t-weight2;
   margin: 0 0 $baseline 0;
   color: $m-gray-d4;
 }
 
-.hd-lv5 {
-  @extend .t-title7;
-  @extend .t-weight4;
+%hd-lv5 {
+  @extend %t-title7;
+  @extend %t-weight4;
   margin: 0 0 ($baseline/4) 0;
   color: $m-gray-d4;
 }
 
 // application: canned copy
-.copy-base {
-  @extend .t-copy-base;
+%copy-base {
+  @extend %t-copy-base;
   color: $m-gray-d2;
 }
 
-.copy-lead1 {
-  @extend .t-copy-lead2;
+%copy-lead1 {
+  @extend %t-copy-lead2;
   color: $m-gray;
 }
 
-.copy-detail {
-  @extend .t-copy-sub1;
-  @extend .t-weight3;
+%copy-detail {
+  @extend %t-copy-sub1;
+  @extend %t-weight3;
   color: $m-gray-d1;
 }
 
-.copy-metadata {
-  @extend .t-copy-sub2;
+%copy-metadata {
+  @extend %t-copy-sub2;
   color: $m-gray-d1;
 
 
-  .copy-metadata-value {
-    @extend .t-weight2;
+  %copy-metadata-value {
+    @extend %t-weight2;
   }
 
-  .copy-metadata-value {
-    @extend .t-weight4;
+  %copy-metadata-value {
+    @extend %t-weight4;
   }
 }
 
 // application: canned links
-.copy-link {
+%copy-link {
   border-bottom: 1px dotted transparent;
 
   &:hover, &:active {
@@ -80,9 +80,9 @@
   }
 }
 
-.copy-badge {
-  @extend .t-title8;
-  @extend .t-weight5;
+%copy-badge {
+  @extend %t-title8;
+  @extend %t-weight5;
   border-radius: ($baseline/5);
   padding: ($baseline/2) $baseline;
   text-transform: uppercase;
@@ -90,14 +90,14 @@
 
 // ====================
 
-.btn-verify-primary {
-  @extend .btn-primary-green;
+%btn-verify-primary {
+  @extend %btn-primary-green;
 }
 
 // ====================
 
 // MISC: extends - UI - window
-.ui-window {
+%ui-window {
   @include clearfix();
   border-radius: ($baseline/10);
   box-shadow: 0 1px 2px 1px $shadow-l1;
@@ -109,7 +109,7 @@
 // ====================
 
 // MISC: extends - UI - well
-.ui-well {
+%ui-well {
   box-shadow: inset 0 1px 2px 1px $shadow-l1;
   padding: ($baseline*0.75) $baseline;
 }
@@ -130,10 +130,6 @@
     margin-right: ($baseline/4);
   }
 
-  .expandable-area {
-   // @include transition(opacity 0.25s ease-in-out 0s, height 0.25s ease-in-out 0s);
-  }
-
   // STATE: active
   &.is-ready {
 
@@ -142,22 +138,13 @@
     }
 
     .title-expand {
-      @extend .ui-fake-link;
+      @extend %ui-fake-link;
       color: $m-blue-d2;
 
       &:hover {
         color: $m-blue;
       }
     }
-
-/* using jquery
-    .expandable-area {
-      visibility: none;
-      height: 0;
-      opacity: 0.0;
-      overflow-y: scroll;
-    }
-*/
   }
 
   // STATE: expanded
@@ -167,14 +154,6 @@
       @include transform(rotate(0));
       @include transform-origin(50% 50%);
     }
-
-/*
-    .expandable-area {
-      visibility: visible;
-      height: ($baseline*16);
-      opacity: 1.0;
-    }
-*/
   }
 }
 
@@ -193,7 +172,7 @@
 
   // reset: typography - heading
   h1, h2, h3, h4, h5 ,h6 {
-    @extend .t-title;
+    @extend %t-title;
     color: $m-gray-d4;
   }
 
@@ -230,7 +209,7 @@
   }
 
   label {
-    @extend .t-weight4;
+    @extend %t-weight4;
     font-family: $sans-serif;
     font-style: normal;
     color: $m-gray-d4;
@@ -239,7 +218,7 @@
   // HACK: nasty override due to our bad input/button styling
   button, input[type="submit"], input[type="button"], button[type="submit"] {
     @include font-size(16);
-    @extend .t-weight4;
+    @extend %t-weight4;
     text-transform: none;
     text-shadow: none;
     letter-spacing: 0;
@@ -255,7 +234,7 @@
 
   //  reset: lists
   .list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group, .list-info {
-    @extend .ui-no-list;
+    @extend %ui-no-list;
   }
 
   // ====================
@@ -275,24 +254,24 @@
 
   // elements: common copy
   .title {
-    @extend .t-title5;
-    @extend .t-weight1;
+    @extend %t-title5;
+    @extend %t-weight1;
   }
 
   .copy {
-    @extend .t-weight1;
+    @extend %t-weight1;
   }
 
   // ====================
 
   // elements - controls
   .action-primary {
-    @extend .btn-primary-blue;
+    @extend %btn-primary-blue;
     border: none;
   }
 
   .action-confirm {
-    @extend .btn-verify-primary;
+    @extend %btn-verify-primary;
     border: none;
   }
 
@@ -306,7 +285,7 @@
   .wrapper-report {
 
     .report {
-      @extend .ui-window;
+      @extend %ui-window;
       width: flex-grid(12,12);
       border-color: $m-gray-t3;
       border-collapse:collapse;
@@ -316,14 +295,14 @@
       }
 
       td {
-        @extend .t-weight3;
+        @extend %t-weight3;
         vertical-align: middle;
         padding: ($baseline*0.75) $baseline;
         color: $m-gray-d3;
       }
 
       th {
-        @extend .t-weight2;
+        @extend %t-weight2;
         padding: ($baseline/2) $baseline;
       }
 
@@ -334,8 +313,8 @@
         }
 
         th[scope="col"] {
-          @extend .t-title7;
-          @extend .t-weight2;
+          @extend %t-title7;
+          @extend %t-weight2;
           vertical-align: middle;
           color: $m-gray-l1;
           background: $m-gray-l4;
@@ -365,12 +344,12 @@
   .help-item {
 
     .title {
-      @extend .hd-lv4;
+      @extend %hd-lv4;
       margin-bottom: ($baseline/4);
     }
 
     .copy {
-      @extend .copy-detail;
+      @extend %copy-detail;
     }
   }
 
@@ -393,18 +372,18 @@
       width: flex-grid(11,12);
 
       .title {
-        @extend .t-title6;
-        @extend .t-weight4;
+        @extend %t-title6;
+        @extend %t-weight4;
       }
 
       .copy {
-        @extend .t-copy-sub1;
+        @extend %t-copy-sub1;
       }
     }
 
     .msg-icon {
       width: flex-grid(1,12);
-      @extend .t-icon2;
+      @extend %t-icon2;
       text-align: center;
       color: $m-blue;
     }
@@ -479,7 +458,7 @@
         text-align: right;
 
         .sts-track-value {
-          @extend .copy-badge;
+          @extend %copy-badge;
           color: $white;
           background: $verified-color-lvl3;
 
@@ -492,7 +471,7 @@
       }
 
       .sts-label {
-        @extend .t-title7;
+        @extend %t-title7;
         display: block;
         margin-bottom: ($baseline/2);
         border-bottom: ($baseline/10) solid $m-gray-l4;
@@ -501,14 +480,14 @@
       }
 
       .sts-course {
-        @extend .t-title;
+        @extend %t-title;
         width: flex-grid(9,12);
         text-transform: none;
       }
 
       .sts-course-org, .sts-course-number {
-        @extend .t-title5;
-        @extend .t-weight4;
+        @extend %t-title5;
+        @extend %t-weight4;
         display: inline-block;
       }
 
@@ -519,7 +498,7 @@
       .sts-course-name {
         @include font-size(28);
         @include line-height(28);
-        @extend .t-weight4;
+        @extend %t-weight4;
         display: block;
       }
     }
@@ -535,7 +514,7 @@
 
   .progress-sts {
     @include size(($baseline/4));
-    @extend .ui-depth1;
+    @extend %ui-depth1;
     position: absolute;
     top: 43px;
     left: 7%;
@@ -566,7 +545,7 @@
     }
 
     .progress-step {
-      @extend .ui-depth2;
+      @extend %ui-depth2;
       position: relative;
       display: table-cell;
       height: ($baseline*6);
@@ -585,8 +564,8 @@
         background: $white;
 
         .step-number {
-          @extend .t-title7;
-          @extend .t-weight4;
+          @extend %t-title7;
+          @extend %t-weight4;
           @include line-height(0);
           margin: 16px auto 0 auto;
           color: $m-gray-l1;
@@ -594,8 +573,8 @@
       }
 
       .step-name {
-        @extend .t-title7;
-        @extend .t-weight4;
+        @extend %t-title7;
+        @extend %t-weight4;
         color: $m-gray-l1;
       }
 
@@ -660,12 +639,12 @@
       width: flex-grid(12,12);
 
       > .title {
-        @extend .hd-lv2;
+        @extend %hd-lv2;
         color: $m-blue-d1;
       }
 
       .instruction {
-        @extend .t-copy-lead1;
+        @extend %t-copy-lead1;
         margin-bottom: $baseline;
       }
     }
@@ -688,11 +667,11 @@
           }
 
           .title {
-            @extend .hd-lv3;
+            @extend %hd-lv3;
           }
 
           .copy {
-            @extend .copy-detail;
+            @extend %copy-detail;
           }
 
           // help - general list
@@ -721,7 +700,7 @@
       }
 
       .task {
-        @extend .ui-window;
+        @extend %ui-window;
         float: left;
         width: flex-grid(6,12);
         margin-right: flex-gutter();
@@ -739,11 +718,11 @@
           position: absolute;
 
           .action {
-            @extend .btn-primary-blue;
+            @extend %btn-primary-blue;
             padding: ($baseline/2) ($baseline*0.75);
 
             *[class^="icon-"] {
-              @extend .t-icon4;
+              @extend %t-icon4;
               padding: ($baseline*.25) ($baseline*.5);
               display: block;
             }
@@ -763,7 +742,7 @@
           &.approved {
 
             .action {
-              @extend .btn-verify-primary;
+              @extend %btn-verify-primary;
             }
           }
         }
@@ -804,7 +783,7 @@
           text-align: right;
 
           .action-retakephotos a {
-            @extend .btn-primary-blue;
+            @extend %btn-primary-blue;
             @include font-size(14);
             padding: ($baseline/2) ($baseline*.75);
           }
@@ -841,14 +820,14 @@
         }
 
         > .title {
-          @extend .hd-lv3;
+          @extend %hd-lv3;
         }
 
         .copy {
-          @extend .copy-base;
+          @extend %copy-base;
 
           strong {
-            @extend .t-weight5;
+            @extend %t-weight5;
             color: $m-gray-d4;
           }
         }
@@ -872,7 +851,7 @@
             }
 
             .placeholder-photo {
-              @extend .ui-window;
+              @extend %ui-window;
               padding: ($baseline*0.75) $baseline;
 
               img {
@@ -887,11 +866,11 @@
             margin-left: $baseline;
 
             .title {
-              @extend .hd-lv5;
+              @extend %hd-lv5;
             }
 
             .copy {
-              @extend .copy-detail;
+              @extend %copy-detail;
             }
 
             // help - general list
@@ -932,7 +911,7 @@
           text-align: right;
 
           .action-editname a {
-            @extend .btn-primary-blue;
+            @extend %btn-primary-blue;
             @include font-size(14);
             padding: ($baseline/2) ($baseline*.75);
           }
@@ -971,7 +950,7 @@
             }
 
             .contribution-option-other1 label, .contribution-option-other2 label {
-              @extend .text-sr;
+              @extend %text-sr;
             }
           }
         }
@@ -1027,8 +1006,8 @@
     border-top: ($baseline/5) solid $m-gray-l4;
 
     .copy {
-      @extend .t-copy-lead1;
-      @extend .t-weight4;
+      @extend %t-copy-lead1;
+      @extend %t-weight4;
       position: absolute;
       top: -($baseline*1.25);
       left: 45%;
@@ -1044,7 +1023,7 @@
 
   // UI: nav - wizard
   .nav-wizard {
-    @extend .ui-well;
+    @extend %ui-well;
     @include clearfix;
     width: flex-grid(12,12);
     border-radius: ($baseline/10);
@@ -1055,7 +1034,7 @@
     }
 
     .help-inline {
-      @extend .t-copy-sub1;
+      @extend %t-copy-sub1;
       float: left;
       width: flex-grid(6,12);
       margin: ($baseline*0.75) flex-gutter() 0 0;
@@ -1076,7 +1055,7 @@
       background: $m-gray-l4;
 
       .action-primary {
-        @extend .btn-primary-disabled;
+        @extend %btn-primary-disabled;
       }
     }
   }
@@ -1112,7 +1091,7 @@
       }
 
       .label-value {
-        @extend .t-weight4;
+        @extend %t-weight4;
       }
 
       .denomination-name {
@@ -1134,7 +1113,7 @@
   .list-faq {
 
     .faq-question {
-      @extend .hd-lv3;
+      @extend %hd-lv3;
       border-bottom: 1px solid $m-gray-l4;
       padding-bottom: ($baseline/4);
     }
@@ -1155,12 +1134,12 @@
     width: flex-grid(12,12);
 
     > .title {
-      @extend .hd-lv2;
+      @extend %hd-lv2;
       color: $m-blue-d1;
     }
 
     .instruction {
-      @extend .t-copy-lead1;
+      @extend %t-copy-lead1;
       margin-bottom: $baseline;
     }
   }
@@ -1197,7 +1176,7 @@
   &.step-select-track {
 
     .sts-track {
-      @extend .text-sr;
+      @extend %text-sr;
     }
 
     .form-register-choose {
@@ -1241,17 +1220,17 @@
       }
 
       .title {
-        @extend .t-title5;
-        @extend .t-weight5;
+        @extend %t-title5;
+        @extend %t-weight5;
         margin-bottom: ($baseline/2);
       }
 
       .copy {
-        @extend .t-copy-base;
+        @extend %t-copy-base;
       }
 
       .action-select input {
-        @extend .t-weight4;
+        @extend %t-weight4;
         padding: ($baseline/2) ($baseline*0.75);
       }
     }
@@ -1268,7 +1247,7 @@
       }
 
       .action-select input {
-        @extend .btn-primary-blue;
+        @extend %btn-primary-blue;
       }
     }
 
@@ -1298,7 +1277,7 @@
       }
 
       .action-intro {
-        @extend .copy-detail;
+        @extend %copy-detail;
         width: flex-grid(3,8);
         text-align: left;
       }
@@ -1308,7 +1287,7 @@
       }
 
       .action-select input {
-        @extend .btn-verify-primary;
+        @extend %btn-verify-primary;
       }
 
       .action-intro {
@@ -1317,7 +1296,7 @@
 
       // extra register options/info
       .title-expand {
-        @extend .t-copy-sub1;
+        @extend %t-copy-sub1;
         font-weight: 500 !important;
         display: inline-block;
         margin: 0;
@@ -1332,14 +1311,14 @@
       width: flex-grid(4,12);
 
       .title {
-        @extend .hd-lv4;
-        @extend .t-weight4;
+        @extend %hd-lv4;
+        @extend %t-weight4;
         margin-top: $baseline;
         margin-bottom: ($baseline/2);
       }
 
       .copy {
-        @extend .copy-detail;
+        @extend %copy-detail;
       }
     }
 
@@ -1353,8 +1332,8 @@
       margin: $baseline 0;
 
       .label {
-        @extend .hd-lv4;
-        @extend .t-weight4;
+        @extend %hd-lv4;
+        @extend %t-weight4;
         margin-bottom: ($baseline/2);
       }
     }
@@ -1397,7 +1376,7 @@
         }
 
         .contribution-option-other1 label, .contribution-option-other2 label {
-          @extend .text-sr;
+          @extend %text-sr;
         }
       }
     }
@@ -1434,7 +1413,7 @@
       width: flex-grid(12,12);
 
       .req {
-        @extend .ui-window;
+        @extend %ui-window;
         width: flex-grid(4,12);
         min-height: ($baseline*15);
         float: left;
@@ -1447,8 +1426,8 @@
         }
 
         .title {
-          @extend .t-title5;
-          @extend .t-weight4;
+          @extend %t-title5;
+          @extend %t-weight4;
           padding: $baseline;
           border-bottom: 1px solid $verified-color-lvl4;
           background: $verified-color-lvl5;
@@ -1464,7 +1443,7 @@
           border-radius: ($baseline*10);
 
           *[class^="icon"] {
-            @extend .t-icon1;
+            @extend %t-icon1;
             color: $white;
           }
 
@@ -1473,12 +1452,12 @@
           }
 
           .icon-under {
-            @extend .ui-depth1;
+            @extend %ui-depth1;
           }
 
           .icon-over {
-            @extend .ui-depth2;
-            @extend .t-icon5;
+            @extend %ui-depth2;
+            @extend %t-icon5;
             position: absolute;
             left: 24px;
             top: 34px;
@@ -1496,13 +1475,13 @@
         }
 
         .copy-super {
-          @extend .t-copy-base;
+          @extend %t-copy-base;
           margin-bottom: ($baseline/2);
           color: $verified-color-lvl1;
         }
 
         .copy-sub {
-          @extend .t-copy-sub2;
+          @extend %t-copy-sub2;
         }
 
         .actions {
@@ -1517,8 +1496,8 @@
         border-color: $m-pink-l3;
 
         .title {
-          @extend .t-title5;
-          @extend .t-weight4;
+          @extend %t-title5;
+          @extend %t-weight4;
           border-bottom-color: $m-pink-l3;
           background: tint($m-pink, 95%);
           color: $m-pink;
@@ -1529,12 +1508,12 @@
         }
 
         .copy-super {
-          @extend .t-copy-lead1;
+          @extend %t-copy-lead1;
           color: $m-pink;
         }
 
         .copy-sub {
-          @extend .t-copy-base;
+          @extend %t-copy-base;
         }
       }
 
@@ -1684,7 +1663,7 @@
       .step-match {
 
         label {
-          @extend .t-copy-sub1;
+          @extend %t-copy-sub1;
         }
       }
 
@@ -1784,12 +1763,12 @@
         }
 
         > .title {
-          @extend .hd-lv3;
+          @extend %hd-lv3;
           margin-bottom: $baseline;
         }
 
         .copy {
-          @extend .copy-base;
+          @extend %copy-base;
           margin-bottom: $baseline;
         }
       }
@@ -1801,7 +1780,7 @@
       .options {
 
         .action-course {
-          @extend .btn-primary-blue;
+          @extend %btn-primary-blue;
           @include font-size(14);
           padding: 5px 10px;
         }
@@ -1810,7 +1789,7 @@
       .course-actions {
 
         .action-dashboard {
-          @extend .btn-primary-blue;
+          @extend %btn-primary-blue;
         }
       }
     }
@@ -1839,7 +1818,7 @@
 .register.is-verified {
 
   .nav-wizard .price-value {
-    @extend .t-weight4;
+    @extend %t-weight4;
     @include font-size(16);
     margin-top: 18px;
     color: $m-blue-d1;