diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 464f68690688..f060078ba1e0 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -26,7 +26,7 @@ html {
 }
 
 body {
-  @extend %t-copy-base;
+  @extend %t-copy-base !optional;
 
   min-width: $fg-min-width;
   background: $uxpl-grayscale-x-back;
@@ -56,8 +56,8 @@ a {
 }
 
 h1 {
-  @extend %t-title4;
-  @extend %t-light;
+   @extend %t-title4 !optional;
+  @extend %t-light !optional;
 }
 
 .waiting {
@@ -78,16 +78,16 @@ h1 {
 // +Typography - Basic
 // ====================
 .page-header {
-  @extend %t-title3;
-  @extend %t-strong;
+   @extend %t-title3 !optional;
+  @extend %t-strong !optional;
 
   display: block;
   color: $gray-d3;
 
   .navigation,
   .subtitle {
-    @extend %t-title7;
-    @extend %t-regular;
+    @extend %t-title7 !optional;
+    @extend %t-regular !optional;
 
     position: relative;
     top: ($baseline/4);
@@ -97,29 +97,29 @@ h1 {
 }
 
 .section-header {
-  @extend %t-title4;
-  @extend %t-strong;
+   @extend %t-title4 !optional;
+  @extend %t-strong !optional;
 
   .subtitle {
-    @extend %t-title7;
+    @extend %t-title7 !optional;
   }
 }
 
 .area-header {
-  @extend %t-title6;
-  @extend %t-strong;
+   @extend %t-title6 !optional;
+  @extend %t-strong !optional;
 
   .subtitle {
-    @extend %t-title8;
+    @extend %t-title8 !optional;
   }
 }
 
 .area-subheader {
-  @extend %t-title7;
-  @extend %t-strong;
+  @extend %t-title7 !optional;
+  @extend %t-strong !optional;
 
   .subtitle {
-    @extend %t-title9;
+     @extend %t-title9 !optional;
   }
 }
 
@@ -195,45 +195,45 @@ h1 {
 .title-4,
 .title-5,
 .title-6 {
-  @extend %t-strong;
+  @extend %t-strong !optional;
 }
 
 .title-1 {
-  @extend %t-title3;
+   @extend %t-title3 !optional;
 
   margin-bottom: ($baseline*1.5);
 }
 
 .title-2 {
-  @extend %t-title4;
+   @extend %t-title4 !optional;
 
   margin-bottom: $baseline;
 }
 
 .title-3 {
-  @extend %t-title5;
+  @extend %t-title5 !optional;
 
   margin-bottom: ($baseline/2);
 }
 
 .title-4 {
-  @extend %t-title7;
-  @extend %t-regular;
+  @extend %t-title7 !optional;
+  @extend %t-regular !optional;
 
   margin-bottom: $baseline;
 }
 
 .title-5 {
-  @extend %t-title7;
-  @extend %t-regular;
+  @extend %t-title7 !optional;
+  @extend %t-regular !optional;
 
   color: $gray-l1;
   margin-bottom: $baseline;
 }
 
 .title-6 {
-  @extend %t-title7;
-  @extend %t-regular;
+  @extend %t-title7 !optional;
+  @extend %t-regular !optional;
 
   color: $gray-l2;
   margin-bottom: $baseline;
@@ -329,14 +329,14 @@ dl {
       }
 
       .navigation-link {
-        @extend %cont-truncated;
+       @extend %cont-truncated !optional;
 
         display: inline-block;
         vertical-align: bottom; // correct for extra padding in FF
         max-width: 250px;
 
         &.navigation-current {
-          @extend %ui-disabled;
+          @extend %ui-disabled !optional;
 
           color: $gray;
           max-width: 250px;
@@ -367,14 +367,14 @@ dl {
   // CASE: wizard-based mast
   .mast-wizard {
     .page-header-sub {
-      @extend %t-title4;
+       @extend %t-title4 !optional;
 
       color: $gray;
       font-weight: 300;
     }
 
     .page-header-super {
-      @extend %t-title4;
+       @extend %t-title4 !optional;
 
       float: left;
       width: flex-grid(12, 12);
@@ -397,7 +397,7 @@ dl {
 .content {
   @include clearfix();
 
-  @extend %t-copy-base;
+  @extend %t-copy-base !optional;
 
   max-width: $fg-max-width;
   min-width: $fg-min-width;
@@ -412,7 +412,7 @@ dl {
     padding-bottom: ($baseline/2);
 
     .title-sub {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       display: block;
       margin: 0;
@@ -420,7 +420,7 @@ dl {
     }
 
     .title-1 {
-      @extend %t-title3;
+       @extend %t-title3 !optional;
 
       margin: 0;
       padding: 0;
@@ -439,17 +439,17 @@ dl {
 // ====================
 .content-primary {
   .title-1 {
-    @extend %t-title3;
+     @extend %t-title3 !optional;
   }
 
   .title-2 {
-    @extend %t-title4;
+     @extend %t-title4 !optional;
 
     margin: 0 0 ($baseline/2) 0;
   }
 
   .title-3 {
-    @extend %t-title6;
+     @extend %t-title6 !optional;
 
     margin: 0 0 ($baseline/2) 0;
   }
@@ -464,7 +464,7 @@ dl {
     }
 
     .tip {
-      @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
       @include text-align(right);
       @include float(right);
@@ -532,7 +532,7 @@ dl {
 .new-policy-item {
   @include grey-button();
 
-  @extend %t-action5;
+    @extend %t-action5 !optional;
 
   margin: ($baseline/2);
   padding: 3px ($baseline/2) 4px ($baseline/2);
@@ -563,7 +563,7 @@ dl {
 // +UI - Misc
 // ====================
 hr.divide {
-  @extend %cont-text-sr;
+    @extend %cont-text-sr !optional;
 }
 
 .item-details {
@@ -572,7 +572,7 @@ hr.divide {
 }
 
 .details {
-  @extend %t-copy-sub1;
+  @extend %t-copy-sub1 !optional;
 
   display: none;
   margin-bottom: ($baseline*1.5);
@@ -586,7 +586,7 @@ hr.divide {
   .header {
     @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
 
-    @extend %t-title7;
+    @extend %t-title7 !optional;
 
     padding: 6px 14px;
     border-bottom: 1px solid $mediumGrey;
@@ -600,15 +600,15 @@ hr.divide {
     display: block;
     margin-bottom: 6px;
 
-    @extend %t-strong;
+    @extend %t-strong !optional;
 
     &.inline-label {
       display: inline;
     }
 
     .description {
-      @extend %t-copy-sub2;
-      @extend %t-regular;
+        @extend %t-copy-sub2 !optional;
+        @extend %t-regular !optional;
 
       display: block;
       font-style: italic;
@@ -629,28 +629,28 @@ hr.divide {
 // UI - semantically hide text
 .sr,
 .sr-only {
-  @extend %cont-text-sr;
+    @extend %cont-text-sr !optional;
 }
 
 // UI - faking a link's behavior
 .fake-link {
-  @extend %ui-fake-link;
+  @extend %ui-fake-link !optional;
 }
 
 // UI - disabled
 .is-disabled {
-  @extend %ui-disabled;
+    @extend %ui-disabled !optional;
 }
 
 // ui - semantic + visual divider
 hr.divider {
-  @extend %cont-text-sr;
+    @extend %cont-text-sr !optional;
 }
 
 // ui - skipnav
 .nav-skip,
 .transcript-skip {
-  @extend %t-action3;
+  @extend %t-action3 !optional;
 
   display: inline-block;
   position: absolute;
@@ -697,11 +697,11 @@ hr.divider {
     text-align: center;
 
     .label {
-      @extend %cont-text-sr;
+        @extend %cont-text-sr !optional;
     }
 
     .icon {
-      @extend %t-action1;
+      @extend %t-action1 !optional;
 
       color: $white;
     }
@@ -722,15 +722,15 @@ hr.divider {
   }
 
   .title {
-    @extend %t-title5;
-    @extend %t-strong;
+    @extend %t-title5 !optional;
+    @extend %t-strong !optional;
 
     margin: 0 0 ($baseline/2) 0;
     color: $gray-d3;
   }
 
   .description {
-    @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
     margin-top: ($baseline/2);
     color: $gray-l1;
diff --git a/cms/static/sass/_shame.scss b/cms/static/sass/_shame.scss
index 0f0df2be76fd..4c06e7114393 100644
--- a/cms/static/sass/_shame.scss
+++ b/cms/static/sass/_shame.scss
@@ -44,7 +44,7 @@
 // yes we have no boldness today - need to fix the resets
 body strong,
 body b {
-  @extend %t-ultrastrong;
+    @extend %t-ultrastrong !optional;
 }
 
 // ====================
@@ -69,11 +69,11 @@ body b {
 */
 
 .modal-content.cheatsheet-is-shown {
-  overflow: visible !important;
-
-  .CodeMirror {
     overflow: visible !important;
-  }
+
+    .CodeMirror {
+        overflow: visible !important;
+    }
 }
 
 // ====================
@@ -101,7 +101,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
 
 // masthead button hidden states
 .mast.has-actions .nav-actions .button.is-hidden {
-  @extend .is-hidden;
+    @extend %is-hidden !optional;
 }
 
 // ====================
@@ -117,7 +117,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
 
 // xmodule editor tab font-weight override
 .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .editor-tabs .inner_tab_wrap a.tab {
-  font-weight: normal !important;
+    font-weight: normal !important;
 }
 
 // ====================
@@ -131,10 +131,10 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
   text-align: center;
   color: $gray;
 
-  .button,
-  .action {
-    @extend %btn-primary-green;
-  }
+    .button,
+    .action {
+        @extend %btn-primary-green !optional;
+    }
 }
 
 // ====================
diff --git a/cms/static/sass/bootstrap/_components.scss b/cms/static/sass/bootstrap/_components.scss
index 14e816f5bc16..9c017748a69c 100644
--- a/cms/static/sass/bootstrap/_components.scss
+++ b/cms/static/sass/bootstrap/_components.scss
@@ -60,7 +60,7 @@
 
   // sock - actions
   .list-cta {
-    @extend %ui-depth1;
+    @extend %ui-depth1 !optional;
 
     position: absolute;
     top: -($baseline*0.75);
@@ -70,8 +70,8 @@
     list-style: none;
 
     .cta-show-sock {
-      @extend %ui-btn-pill;
-      @extend %t-action4;
+      @extend %ui-btn-pill !optional;
+      @extend %t-action4 !optional;
 
       background: theme-color("light");
       padding: ($baseline/2) $baseline;
@@ -92,7 +92,7 @@
   .sock {
     @include clearfix();
 
-    @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
     max-width: $studio-max-width;
     width: flex-grid(12);
@@ -100,10 +100,10 @@
     padding: ($baseline*2) 0;
     color: $gray-500;
 
-    // support body
-    header {
-      .title {
-        @extend %t-title4;
+      // support body
+      header {
+          .title {
+         @extend %t-title4 !optional;
       }
     }
 
@@ -115,14 +115,14 @@
     .support,
     .feedback {
       .title {
-        @extend %t-title6;
+         @extend %t-title6 !optional;
 
         color: $white;
         margin-bottom: ($baseline/2);
       }
 
       .copy {
-        @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
         margin: 0 0 $baseline 0;
       }
@@ -140,12 +140,12 @@
           }
 
           .action {
-            @extend %t-action4;
+            @extend %t-action4 !optional;
 
             display: block;
 
             .icon {
-              @extend %t-icon4;
+                @extend %t-icon4 !optional;
 
               vertical-align: middle;
               margin-right: $baseline/4;
@@ -153,13 +153,13 @@
           }
 
           .tip {
-            @extend %cont-text-sr;
+              @extend %cont-text-sr !optional;
           }
         }
 
         .action-primary {
-          @extend %btn-primary-blue;
-          @extend %t-action3;
+          @extend %btn-primary-blue !optional;
+          @extend %t-action3 !optional;
         }
       }
     }
diff --git a/cms/static/sass/bootstrap/_footer.scss b/cms/static/sass/bootstrap/_footer.scss
index 985a741f0d26..738d9ff3a436 100644
--- a/cms/static/sass/bootstrap/_footer.scss
+++ b/cms/static/sass/bootstrap/_footer.scss
@@ -13,7 +13,7 @@
   padding: $baseline;
 
   footer.primary {
-    @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
     @include clearfix();
 
diff --git a/cms/static/sass/bootstrap/_header.scss b/cms/static/sass/bootstrap/_header.scss
index b90a7ee5ed9c..a800f7447e59 100644
--- a/cms/static/sass/bootstrap/_header.scss
+++ b/cms/static/sass/bootstrap/_header.scss
@@ -10,7 +10,7 @@
 // ====================
 
 .wrapper-header {
-  @extend %ui-depth3;
+  @extend %ui-depth3 !optional;
 
   position: relative;
   width: 100%;
@@ -74,8 +74,8 @@
   // basic layout - nav items
   nav {
     > ol > .nav-item {
-      @extend %t-action3;
-      @extend %t-strong;
+      @extend %t-action3 !optional;
+      @extend %t-strong !optional;
 
       display: inline-block;
       vertical-align: middle;
@@ -163,8 +163,8 @@
     }
 
     .course-title {
-      @extend %t-action2;
-      @extend %t-strong;
+      @extend %t-action2 !optional;
+      @extend %t-strong !optional;
 
       display: block;
       width: 100%;
@@ -422,8 +422,8 @@
     }
 
     .nav-item {
-      @extend %t-action3;
-      @extend %t-regular;
+      @extend %t-action3 !optional;
+      @extend %t-regular !optional;
 
       display: block;
       margin: 0 0 ($baseline/4) 0;
diff --git a/cms/static/sass/bootstrap/_layouts.scss b/cms/static/sass/bootstrap/_layouts.scss
index 7bee47228bc9..5367d157ea18 100644
--- a/cms/static/sass/bootstrap/_layouts.scss
+++ b/cms/static/sass/bootstrap/_layouts.scss
@@ -119,8 +119,8 @@
 
         // buttons
         .button {
-          @extend %btn-primary-blue;
-          @extend %sizing;
+            @extend %btn-primary-blue !optional;
+            @extend %sizing !optional;
 
           .action-button-text {
             display: inline-block;
@@ -135,8 +135,8 @@
           // CASE: new/create button
           &.new-button,
           &.button-new {
-            @extend %btn-primary-green;
-            @extend %sizing;
+              @extend %btn-primary-green !optional;
+              @extend %sizing !optional;
           }
         }
       }
@@ -156,7 +156,7 @@
       }
 
       .navigation-item {
-        @extend %cont-truncated;
+       @extend %cont-truncated !optional;
 
         display: inline-block;
         vertical-align: bottom; // correct for extra padding in FF
@@ -164,7 +164,7 @@
         color: $body-color;
 
         &.navigation-current {
-          @extend %ui-disabled;
+            @extend %ui-disabled !optional;
 
           color: color("gray");
           max-width: 250px;
@@ -199,14 +199,14 @@
   // CASE: wizard-based mast
   .mast-wizard {
     .page-header-sub {
-      @extend %t-title4;
+       @extend %t-title4 !optional;
 
       color: color("gray");
       font-weight: 300;
     }
 
     .page-header-super {
-      @extend %t-title4;
+       @extend %t-title4 !optional;
 
       float: left;
       width: flex-grid(12, 12);
@@ -247,7 +247,7 @@
     padding-bottom: ($baseline/2);
 
     .title-sub {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       display: block;
       margin: 0;
@@ -255,8 +255,8 @@
     }
 
     .title-1 {
-      @extend %t-title3;
-      @extend %t-strong;
+       @extend %t-title3 !optional;
+      @extend %t-strong !optional;
 
       margin: 0;
       padding: 0;
@@ -273,17 +273,17 @@
   margin-right: $baseline;
 
   .title-1 {
-    @extend %t-title3;
+     @extend %t-title3 !optional;
   }
 
   .title-2 {
-    @extend %t-title4;
+     @extend %t-title4 !optional;
 
     margin: 0 0 ($baseline/2) 0;
   }
 
   .title-3 {
-    @extend %t-title6;
+     @extend %t-title6 !optional;
 
     margin: 0 0 ($baseline/2) 0;
   }
@@ -298,13 +298,13 @@
     }
 
     .tip {
-      @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
-      width: flex-grid(7, 12);
-      float: right;
-      margin-top: ($baseline/2);
-      text-align: right;
-      color: theme-color("primary");
+        width: flex-grid(7, 12);
+        float: right;
+        margin-top: ($baseline/2);
+        text-align: right;
+        color: theme-color("primary");
     }
   }
 }
diff --git a/cms/static/sass/bootstrap/_legacy.scss b/cms/static/sass/bootstrap/_legacy.scss
index 5214fae0af15..6a5b83dd121a 100644
--- a/cms/static/sass/bootstrap/_legacy.scss
+++ b/cms/static/sass/bootstrap/_legacy.scss
@@ -15,5 +15,5 @@
 
 // Support .sr as a synonym for .sr-only
 .sr {
-  @extend .sr-only;
+    @extend %sr-only !optional;
 }
diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index 8420961ab4ab..d40a21036e8c 100644
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -18,10 +18,10 @@
 // +General Action - Extend
 // ====================
 %action {
-  @extend %ui-fake-link;
+  @extend %ui-fake-link !optional;
 
   &.is-disabled {
-    @extend %ui-disabled;
+      @extend %ui-disabled !optional;
 
     -webkit-filter: grayscale(65%);
     opacity: 0.65;
@@ -31,7 +31,7 @@
 // +General Type and Size - Extend
 // ====================
 %sizing {
-  @extend %t-action4;
+  @extend %t-action4 !optional;
 
   padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
 }
@@ -41,7 +41,7 @@
 // ====================
 // gray primary button
 %btn-primary-gray {
-  @extend %ui-btn-primary;
+    @extend %ui-btn-primary !optional;
 
   background: $gray-l1;
   border-color: $gray-l2;
@@ -67,7 +67,7 @@
 
 // blue primary button
 %btn-primary-blue {
-  @extend %ui-btn-primary;
+    @extend %ui-btn-primary !optional;
 
   background: theme-color("primary");
   border-color: theme-color("primary");
@@ -94,7 +94,7 @@
 
 // green primary button
 %btn-primary-green {
-  @extend %ui-btn-primary;
+    @extend %ui-btn-primary !optional;
 
   background: $uxpl-green-base;
   border-color: $uxpl-green-base;
@@ -123,7 +123,7 @@
 // ====================
 // gray secondary button
 %btn-secondary-gray {
-  @extend %ui-btn-secondary;
+    @extend %ui-btn-secondary !optional;
 
   border-color: $gray-l3;
   color: $gray-d1;
@@ -148,7 +148,7 @@
 
 // blue secondary button
 %btn-secondary-blue {
-  @extend %ui-btn-secondary;
+    @extend %ui-btn-secondary !optional;
 
   border-color: $blue-l3;
   color: theme-color("primary");
@@ -169,7 +169,7 @@
 
 // white secondary button
 %btn-secondary-white {
-  @extend %ui-btn-secondary;
+    @extend %ui-btn-secondary !optional;
 
   border-color: $white-t2;
   color: $white-t3;
@@ -194,7 +194,7 @@
 
 // green secondary button
 %btn-secondary-green {
-  @extend %ui-btn-secondary;
+    @extend %ui-btn-secondary !optional;
 
   border-color: $green-l4;
   color: $green-l2;
@@ -263,8 +263,8 @@
 // +UI Dropdown Button - Extend
 // ====================
 %ui-btn-dd {
-  @extend %ui-btn;
-  @extend %ui-btn-pill;
+  @extend %ui-btn !optional;
+  @extend %ui-btn-pill !optional;
 
   padding: ($baseline/4) ($baseline/2);
   border-width: 1px;
@@ -274,7 +274,7 @@
 
   &:hover,
   &:active {
-    @extend %ui-fake-link;
+    @extend %ui-fake-link !optional;
 
     border-color: $gray-l3;
   }
@@ -290,7 +290,7 @@
 // +UI Nav Dropdown Button - Extend
 // ====================
 %ui-btn-dd-nav-primary {
-  @extend %ui-btn-dd;
+    @extend %ui-btn-dd !optional;
 
   background: $white;
   border-color: $white;
@@ -417,7 +417,7 @@
     @include transition(all $tmg-f2 ease-in-out 0s);
     @include margin-right($baseline/4);
 
-    @extend %t-action1;
+    @extend %t-action1 !optional;
 
     display: inline-block;
     color: $gray-l3;
@@ -451,7 +451,7 @@
     // STATE: hover/active
     &:hover,
     &:active {
-      @extend %ui-fake-link;
+      @extend %ui-fake-link !optional;
 
       color: theme-color("primary");
     }
@@ -486,7 +486,7 @@
   position: relative;
 
   .draggable-drop-indicator {
-    @extend %ui-depth3;
+    @extend %ui-depth3 !optional;
 
     @include transition(opacity $tmg-f2 linear 0s);
     @include size(100%, auto);
@@ -496,7 +496,7 @@
     opacity: 0;
 
     .fa-caret-right {
-      @extend %t-icon5;
+        @extend %t-icon5 !optional;
 
       position: absolute;
       top: -12px;
@@ -516,7 +516,7 @@
 
 // UI: is dragging - drag state
 .is-dragging {
-  @extend %ui-depth4;
+   @extend %ui-depth4 !optional;
 
   left: -($baseline/4);
   box-shadow: 0 1px 2px 0 $shadow-d1;
diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss
index 11c73547d7b9..81bd39cfb5f6 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 !optional;
 
     @include clearfix();
 
@@ -61,7 +61,7 @@
           .icon {
             @include transition(top $tmg-f2 ease-in-out $tmg-f2);
 
-            @extend %t-action3;
+            @extend %t-action3 !optional;
 
             display: inline-block;
             vertical-align: middle;
diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss
index 4bcf30b30a98..d3d356102665 100644
--- a/cms/static/sass/elements/_forms.scss
+++ b/cms/static/sass/elements/_forms.scss
@@ -23,7 +23,7 @@
 
   // STATE: checked/selected
   &:checked ~ label {
-    @extend %t-strong;
+    @extend %t-strong !optional;
 
     color: $ui-action-primary-color-focus;
   }
@@ -37,8 +37,8 @@ textarea.text {
 
   @include linear-gradient($gray-l5, $white);
 
-  @extend %t-copy-sub2;
-  @extend %t-demi-strong;
+    @extend %t-copy-sub2 !optional;
+    @extend %t-demi-strong !optional;
 
   padding: 6px 8px 8px;
   border: 1px solid $gray-l2;
@@ -104,7 +104,7 @@ form {
     }
 
     .input-checkbox {
-      @extend %cont-text-sr;
+        @extend %cont-text-sr !optional;
 
       // CASE: unchecked
       ~ label .input-checkbox-checked {
@@ -130,17 +130,17 @@ form {
 
   // CASE: checkbox input
   .field-checkbox .input-checkbox {
-    @extend %input-tickable;
+      @extend %input-tickable !optional;
   }
 
   // CASE: radio input
   .field-radio .input-radio {
-    @extend %input-tickable;
+      @extend %input-tickable !optional;
   }
 
   // CASE: file input
   input[type="file"] {
-    @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
   }
 
   .note {
@@ -158,11 +158,11 @@ form {
 // form styling for creating a new content item (course, user, textbook)
 // TODO: refactor this into a placeholder to extend.
 .form-create {
-  @extend %ui-window;
+    @extend %ui-window !optional;
 
-  .title {
-    @extend %t-title4;
-    @extend %t-strong;
+    .title {
+        @extend %t-title4 !optional;
+        @extend %t-strong !optional;
 
     padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
   }
@@ -173,7 +173,7 @@ form {
 
 
   .list-input {
-    @extend %cont-no-list;
+    @extend %cont-no-list !optional;
 
     .field {
       margin: 0 0 ($baseline*0.75) 0;
@@ -184,7 +184,7 @@ form {
 
       &.required {
         label {
-          @extend %t-strong;
+          @extend %t-strong !optional;
         }
 
         label::after {
@@ -200,7 +200,7 @@ form {
       }
 
       label {
-        @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
         @include transition(color $tmg-f3 ease-in-out 0s);
 
@@ -214,7 +214,7 @@ form {
 
       input,
       textarea {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         @include transition(all $tmg-f2 ease-in-out 0s);
 
@@ -253,7 +253,7 @@ form {
       }
 
       .tip {
-        @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
         @include transition(color 0.15s ease-in-out);
 
@@ -279,11 +279,11 @@ form {
         }
 
         .is-showing {
-          @extend %anim-fadeIn;
+            @extend %anim-fadeIn !optional;
         }
 
         .is-hiding {
-          @extend %anim-fadeOut;
+            @extend %anim-fadeOut !optional;
         }
 
         .tip-error {
@@ -354,7 +354,7 @@ form {
     .action {
       @include transition(all $tmg-f2 linear 0s);
 
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       display: inline-block;
       padding: ($baseline/5) $baseline;
@@ -364,13 +364,13 @@ form {
     .action-primary {
       @include blue-button;
 
-      @extend %t-action2;
+      @extend %t-action2 !optional;
     }
 
     .action-secondary {
       @include grey-button;
 
-      @extend %t-action2;
+      @extend %t-action2 !optional;
     }
   }
 }
@@ -392,7 +392,7 @@ form {
 
   .incontext-editor-value,
   .incontext-editor-action-wrapper {
-    @extend %cont-truncated;
+   @extend %cont-truncated !optional;
 
     display: inline-block;
     vertical-align: middle;
@@ -401,8 +401,8 @@ form {
 
   .incontext-editor-open-action,
   .access-button {
-    @extend %ui-btn-non-blue;
-    @extend %t-copy-base;
+      @extend %ui-btn-non-blue !optional;
+      @extend %t-copy-base !optional;
 
     padding-top: ($baseline/10);
 
@@ -463,7 +463,7 @@ input.search {
 }
 
 label {
-  @extend %t-copy-sub2;
+    @extend %t-copy-sub2 !optional;
 }
 
 code {
@@ -474,7 +474,7 @@ code {
 }
 
 .CodeMirror {
-  @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
   background: $white;
   font-family: $f-monospace;
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index c17338acade3..69cf945c56f4 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 !optional;
 
   position: relative;
   width: 100%;
@@ -72,8 +72,8 @@
   // basic layout - nav items
   nav {
     > ol > .nav-item {
-      @extend %t-action3;
-      @extend %t-strong;
+      @extend %t-action3 !optional;
+      @extend %t-strong !optional;
 
       display: inline-block;
       vertical-align: middle;
@@ -95,8 +95,8 @@
   // basic layout - dropdowns
   .nav-dd {
     .title {
-      @extend %t-action2;
-      @extend %ui-btn-dd-nav-primary;
+      @extend %t-action2 !optional;
+      @extend %ui-btn-dd-nav-primary !optional;
 
       @include transition(all $tmg-f2 ease-in-out 0s);
 
@@ -147,7 +147,7 @@
 
     .course-org,
     .course-number {
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       display: inline-block;
       vertical-align: middle;
@@ -164,8 +164,8 @@
     }
 
     .course-title {
-      @extend %t-action2;
-      @extend %t-strong;
+      @extend %t-action2 !optional;
+      @extend %t-strong !optional;
 
       display: block;
       width: 100%;
@@ -328,8 +328,8 @@
       .action-signup {
         @include blue-button();
 
-        @extend %t-action3;
-        @extend %t-strong;
+        @extend %t-action3 !optional;
+        @extend %t-strong !optional;
 
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
@@ -338,8 +338,8 @@
       .action-signin {
         @include white-button();
 
-        @extend %t-action3;
-        @extend %t-strong;
+        @extend %t-action3 !optional;
+        @extend %t-strong !optional;
 
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
diff --git a/cms/static/sass/elements/_icons.scss b/cms/static/sass/elements/_icons.scss
index 14c5ac1b88a9..7474f3f53a95 100644
--- a/cms/static/sass/elements/_icons.scss
+++ b/cms/static/sass/elements/_icons.scss
@@ -22,8 +22,8 @@
 }
 
 %ui-badge {
-  @extend %t-title9;
-  @extend %t-strong;
+   @extend %t-title9 !optional;
+  @extend %t-strong !optional;
 
   position: relative;
   border-bottom-right-radius: ($baseline/10);
@@ -39,7 +39,7 @@
   &.is-hanging {
     box-sizing: border-box;
 
-    @extend %ui-depth2;
+    @extend %ui-depth2 !optional;
 
     top: -($baseline/4);
 
diff --git a/cms/static/sass/elements/_layout.scss b/cms/static/sass/elements/_layout.scss
index 97ec2401e9a4..649b85e46cfe 100644
--- a/cms/static/sass/elements/_layout.scss
+++ b/cms/static/sass/elements/_layout.scss
@@ -65,8 +65,8 @@
 
         // buttons
         .button {
-          @extend %btn-primary-blue;
-          @extend %sizing;
+            @extend %btn-primary-blue !optional;
+            @extend %sizing !optional;
 
           .action-button-text {
             display: inline-block;
@@ -81,8 +81,8 @@
           // CASE: new/create button
           &.new-button,
           &.button-new {
-            @extend %btn-primary-green;
-            @extend %sizing;
+              @extend %btn-primary-green !optional;
+              @extend %sizing !optional;
           }
         }
       }
@@ -102,7 +102,7 @@
       }
 
       .navigation-item {
-        @extend %cont-truncated;
+       @extend %cont-truncated !optional;
 
         display: inline-block;
         vertical-align: bottom; // correct for extra padding in FF
@@ -110,7 +110,7 @@
         color: $gray-d2;
 
         &.navigation-current {
-          @extend %ui-disabled;
+            @extend %ui-disabled !optional;
 
           color: $gray;
           max-width: 250px;
@@ -145,14 +145,14 @@
   // CASE: wizard-based mast
   .mast-wizard {
     .page-header-sub {
-      @extend %t-title4;
+       @extend %t-title4 !optional;
 
       color: $gray;
       font-weight: 300;
     }
 
     .page-header-super {
-      @extend %t-title4;
+       @extend %t-title4 !optional;
 
       float: left;
       width: flex-grid(12, 12);
@@ -174,7 +174,7 @@
 .content {
   @include clearfix();
 
-  @extend %t-copy-base;
+  @extend %t-copy-base !optional;
 
   max-width: $fg-max-width;
   min-width: $fg-min-width;
@@ -189,7 +189,7 @@
     padding-bottom: ($baseline/2);
 
     .title-sub {
-      @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
       display: block;
       margin: 0;
@@ -197,8 +197,8 @@
     }
 
     .title-1 {
-      @extend %t-title3;
-      @extend %t-strong;
+       @extend %t-title3 !optional;
+      @extend %t-strong !optional;
 
       margin: 0;
       padding: 0;
@@ -235,17 +235,17 @@
 // layout - primary content
 .content-primary {
   .title-1 {
-    @extend %t-title3;
+     @extend %t-title3 !optional;
   }
 
   .title-2 {
-    @extend %t-title4;
+     @extend %t-title4 !optional;
 
     margin: 0 0 ($baseline/2) 0;
   }
 
   .title-3 {
-    @extend %t-title6;
+     @extend %t-title6 !optional;
 
     margin: 0 0 ($baseline/2) 0;
   }
@@ -260,7 +260,7 @@
     }
 
     .tip {
-      @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
       width: flex-grid(7, 12);
       float: right;
diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss
index 6eeb1000435d..cf9edd253634 100644
--- a/cms/static/sass/elements/_modal-window.scss
+++ b/cms/static/sass/elements/_modal-window.scss
@@ -9,7 +9,7 @@
   // basic modal content
   // ------------------------
   .modal-window {
-    @extend %ui-depth3;
+    @extend %ui-depth3 !optional;
 
     box-sizing: border-box;
     position: absolute;
@@ -29,15 +29,15 @@
     }
 
     .title {
-      @extend %t-title5;
-      @extend %t-demi-strong;
+        @extend %t-title5 !optional;
+        @extend %t-demi-strong !optional;
 
       margin: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2);
       color: $black;
     }
 
     .message {
-      @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
       margin: 0 0 $baseline 0;
       color: $gray-d2;
@@ -72,7 +72,7 @@
       }
 
       .icon {
-        @extend %t-icon4;
+          @extend %t-icon4 !optional;
 
         @include margin-right($baseline/2);
 
@@ -80,7 +80,7 @@
       }
 
       .copy {
-        @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
         max-width: 85%;
         color: $white;
@@ -119,8 +119,8 @@
           margin-right: $baseline;
 
           .settings-tab-button {
-            @extend %t-copy-sub1;
-            @extend %t-regular;
+              @extend %t-copy-sub1 !optional;
+              @extend %t-regular !optional;
 
             background-image: none;
             background-color: $white;
@@ -146,7 +146,7 @@
     }
 
     .modal-section-title {
-      @extend %t-title6;
+       @extend %t-title6 !optional;
 
       margin: 0 0 ($baseline/2) 0;
       border-bottom: ($baseline/10) solid $gray-l4;
@@ -155,8 +155,8 @@
     }
 
     .modal-subsection-title {
-      @extend %t-title8;
-      @extend %t-strong;
+        @extend %t-title8 !optional;
+        @extend %t-strong !optional;
 
       margin-bottom: ($baseline/4);
       text-transform: uppercase;
@@ -175,13 +175,13 @@
       }
 
       .list-actions {
-        @extend %actions-list;
+          @extend %actions-list !optional;
 
         margin-left: ($baseline/4);
 
-        .action-button {
-          @extend %t-icon4;
-        }
+          .action-button {
+              @extend %t-icon4 !optional;
+          }
       }
     }
 
@@ -192,7 +192,7 @@
       padding: ($baseline*0.75) 2% ($baseline/2) 2%;
 
       .action-item {
-        @extend %t-action3;
+        @extend %t-action3 !optional;
 
         display: inline-block;
         margin-right: ($baseline*0.75);
@@ -205,7 +205,7 @@
       .action-primary {
         @include blue-button();
 
-        @extend %t-action3;
+        @extend %t-action3 !optional;
 
         border-color: $blue-d1;
         color: $white;
@@ -283,8 +283,8 @@
             .editor-button,
             .settings-button,
             .plugins-button {
-              @extend %btn-secondary-gray;
-              @extend %t-copy-sub1;
+                @extend %btn-secondary-gray !optional;
+                @extend %t-copy-sub1 !optional;
 
               border: 0;
               padding: ($baseline/4) ($baseline/2);
@@ -435,8 +435,8 @@
         padding: ($baseline/2);
 
         .component-name {
-          @extend %t-title5;
-          @extend %t-strong;
+          @extend %t-title5 !optional;
+          @extend %t-strong !optional;
 
           display: inline-block;
           vertical-align: middle;
@@ -463,9 +463,9 @@
             padding: 0;
 
             a.tab {
-              @extend %btn-secondary-gray;
-              @extend %t-copy-sub1;
-              @extend %t-regular;
+                @extend %btn-secondary-gray !optional;
+                @extend %t-copy-sub1 !optional;
+                @extend %t-regular !optional;
 
               background-image: none;
               box-shadow: none;
@@ -495,7 +495,7 @@
   }
 
   .modal-window-overlay {
-    @extend %ui-depth3;
+    @extend %ui-depth3 !optional;
 
     position: fixed;
     top: 0;
@@ -558,8 +558,8 @@
       }
 
       .note {
-        @extend %t-copy-sub2;
-        @extend %t-regular;
+          @extend %t-copy-sub2 !optional;
+          @extend %t-regular !optional;
 
         display: block;
         color: $error-color;
@@ -568,24 +568,24 @@
 
     // CASE: no groups configured for visibility
     .is-not-configured {
-      @extend %no-content;
+        @extend %no-content !optional;
 
       padding: ($baseline);
 
       @include text-align(left); // reset for %no-content's default styling
 
-      .title {
-        @extend %t-title6;
+        .title {
+            @extend %t-title6 !optional;
 
         font-weight: 600;  // needed for poorly scoped .title rule in modals
         margin: 0 0 ($baseline/2) 0; // needed for poorly scoped .title rule in modals
       }
 
       .copy {
-        @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
-        p {
-          @extend %wipe-last-child;
+          p {
+              @extend %wipe-last-child !optional;
 
           margin-bottom: $baseline;
         }
@@ -615,14 +615,14 @@
 
     .list-fields {
       .field-message {
-        @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
         color: $gray-d1;
         margin-bottom: ($baseline/4);
       }
 
       label {
-        @extend %t-title6;
+         @extend %t-title6 !optional;
 
         font-weight: font-weight(semi-bold);
       }
@@ -652,7 +652,7 @@
 
         input,
         textarea {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
 
           @include transition(all $tmg-f2 ease-in-out 0s);
 
@@ -685,7 +685,7 @@
         }
 
         .tip {
-          @extend %t-copy-sub1;
+            @extend %t-copy-sub1 !optional;
 
           @include transition(color, 0.15s, ease-in-out);
 
@@ -761,7 +761,7 @@
     .edit-settings-timed-examination,
     .edit-unit-access {
       .checkbox-cosmetic .input-checkbox {
-        @extend %cont-text-sr;
+          @extend %cont-text-sr !optional;
 
         // CASE: unchecked
         ~ .tip-warning {
@@ -782,8 +782,8 @@
       }
 
       .note {
-        @extend %t-copy-sub2;
-        @extend %t-regular;
+          @extend %t-copy-sub2 !optional;
+          @extend %t-regular !optional;
 
         margin: 14px 0 0 21px;
         display: block;
@@ -795,7 +795,7 @@
       margin-bottom: $baseline;
 
       .checkbox-cosmetic .input-checkbox {
-        @extend %cont-text-sr;
+          @extend %cont-text-sr !optional;
 
         // CASE: unchecked
         ~ .tip-warning {
diff --git a/cms/static/sass/elements/_modal.scss b/cms/static/sass/elements/_modal.scss
index 418dfc1cf5ec..5331c79c4398 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 !optional;
 
   display: none;
   position: fixed;
@@ -14,7 +14,7 @@
 }
 
 .modal {
-  @extend %ui-depth4;
+   @extend %ui-depth4 !optional;
 
   display: none;
   position: fixed;
@@ -40,8 +40,8 @@
   }
 
   h2 {
-    @extend %t-title5;
-    @extend %t-light;
+    @extend %t-title5 !optional;
+    @extend %t-light !optional;
 
     margin: 0 ($baseline/2) ($baseline*1.5);
     color: #646464;
@@ -68,7 +68,7 @@
 
 // lean modal alternative
 #lean_overlay {
-  @extend %ui-depth4;
+   @extend %ui-depth4 !optional;
 
   position: fixed;
   top: 0;
diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss
index d3898968ea4f..b6c5547915e6 100644
--- a/cms/static/sass/elements/_modules.scss
+++ b/cms/static/sass/elements/_modules.scss
@@ -10,8 +10,8 @@
   background-color: $white;
 
   .bar-mod-title {
-    @extend %t-title6;
-    @extend %t-strong;
+     @extend %t-title6 !optional;
+    @extend %t-strong !optional;
 
     display: block;
     padding: ($baseline/2) ($baseline*0.75);
@@ -19,14 +19,14 @@
   }
 
   .bar-mod-content {
-    @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
     border-bottom: 1px solid $gray-l4;
     padding: ($baseline*0.75) ($baseline*0.75) $baseline ($baseline*0.75);
 
-    .title {
-      @extend %t-title8;
-      @extend %t-strong;
+      .title {
+          @extend %t-title8 !optional;
+          @extend %t-strong !optional;
 
       margin-bottom: ($baseline/4);
       color: $gray-d2;
@@ -34,7 +34,7 @@
     }
 
     .meta {
-      @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
       color: $gray-d2;
     }
@@ -44,7 +44,7 @@
 // blue bar and title bg version
 // --------------------
 %bar-module-blue {
-  @extend %bar-module;
+    @extend %bar-module !optional;
 
   border-top: 5px solid $blue;
 
@@ -56,7 +56,7 @@
 // green bar and title bg version
 // --------------------
 %bar-module-green {
-  @extend %bar-module;
+    @extend %bar-module !optional;
 
   border-top: 5px solid $green;
 
@@ -68,7 +68,7 @@
 // yellow bar and title bg version
 // --------------------
 %bar-module-yellow {
-  @extend %bar-module;
+    @extend %bar-module !optional;
 
   border-top: 5px solid $orange-l2;
 
@@ -80,7 +80,7 @@
 // red bar and title bg version
 // --------------------
 %bar-module-red {
-  @extend %bar-module;
+    @extend %bar-module !optional;
 
   border-top: 5px solid $red-l2;
 
@@ -91,7 +91,7 @@
 
 // black bar and title bg version
 %bar-module-black {
-  @extend %bar-module;
+    @extend %bar-module !optional;
 
   border-top: 5px solid $black;
 
@@ -116,8 +116,8 @@
     text-align: center;
 
     h5 {
-      @extend %t-title5;
-      @extend %t-strong;
+      @extend %t-title5 !optional;
+      @extend %t-strong !optional;
 
       margin-bottom: ($baseline*0.75);
       color: $uxpl-green-base;
@@ -133,7 +133,7 @@
 
       // green button
       .add-xblock-component-button {
-        @extend %t-action3;
+        @extend %t-action3 !optional;
 
         @include margin-right($baseline*0.75);
 
@@ -147,7 +147,7 @@
         padding: 0;
         text-align: center;
 
-        @extend %btn-primary-green;
+        @extend %btn-primary-green !optional;
 
         .name {
           box-sizing: border-box;
@@ -239,7 +239,7 @@
       @include clearfix();
       @include transition(none);
 
-      @extend %t-demi-strong;
+        @extend %t-demi-strong !optional;
 
       display: block;
       width: 100%;
@@ -310,7 +310,7 @@
     }
 
     a {
-      @extend %t-action3;
+      @extend %t-action3 !optional;
 
       display: block;
       padding: ($baseline*0.75) ($baseline*1.25);
@@ -339,7 +339,7 @@ $outline-indent-width: $baseline;
     margin-top: ($baseline*0.75);
 
     .button-new {
-      @extend %ui-btn-flat-outline;
+        @extend %ui-btn-flat-outline !optional;
 
       padding: ($baseline/2) $baseline;
       display: block;
@@ -356,13 +356,13 @@ $outline-indent-width: $baseline;
 
 
 %outline-item-status {
-  @extend %t-copy-sub2;
-  @extend %t-strong;
+    @extend %t-copy-sub2 !optional;
+    @extend %t-strong !optional;
 
   color: $gray-d1;
 
-  .icon {
-    @extend %t-icon5;
+    .icon {
+        @extend %t-icon5 !optional;
 
     @include margin-right($baseline/4);
   }
@@ -464,8 +464,8 @@ $outline-indent-width: $baseline;
   .outline-section {
     @include transition(border-left-width $tmg-f2 linear 0s, border-left-color $tmg-f2 linear 0s, padding-left $tmg-f2 linear 0s);
 
-    @extend %ui-window;
-    @extend %outline-complex-item;
+      @extend %ui-window !optional;
+      @extend %outline-complex-item !optional;
 
     border-left: 1px solid $color-draft;
     margin-bottom: $baseline;
@@ -509,15 +509,15 @@ $outline-indent-width: $baseline;
 
     // header - title
     .section-title {
-      @extend %t-title5;
-      @extend %t-strong;
+      @extend %t-title5 !optional;
+      @extend %t-strong !optional;
 
       color: $color-heading-base;
     }
 
     // status
     .section-status {
-      @extend %outline-item-status;
+        @extend %outline-item-status !optional;
     }
 
     // status - release
@@ -561,7 +561,7 @@ $outline-indent-width: $baseline;
   .outline-subsection {
     @include transition(border-left-color $tmg-f2 linear 0s);
 
-    @extend %outline-complex-item;
+      @extend %outline-complex-item !optional;
 
     margin-bottom: ($baseline/2);
     border: 1px solid $gray-l4;
@@ -609,14 +609,14 @@ $outline-indent-width: $baseline;
 
     // header - title
     .subsection-title {
-      @extend %t-title6;
+       @extend %t-title6 !optional;
 
       color: $color-heading-base;
     }
 
     // status
     .subsection-status {
-      @extend %outline-item-status;
+        @extend %outline-item-status !optional;
     }
 
     // STATE: hover/active
@@ -667,21 +667,21 @@ $outline-indent-width: $baseline;
 
   // outline: units
   .outline-unit {
-    @extend %outline-complex-item;
+      @extend %outline-complex-item !optional;
 
     margin-bottom: ($baseline/2);
     border: 1px solid $gray-l4;
     padding: ($baseline/4) ($baseline/2);
 
-    // header - title
-    .unit-title {
-      @extend %t-title7;
+      // header - title
+      .unit-title {
+          @extend %t-title7 !optional;
 
       color: $color-heading-base;
     }
 
     .unit-status {
-      @extend %outline-item-status;
+        @extend %outline-item-status !optional;
     }
 
     // STATE: hover/active
@@ -702,22 +702,22 @@ $outline-indent-width: $baseline;
 
   // outline: sections
   .outline-section {
-    @extend %outline-simple-item;
+      @extend %outline-simple-item !optional;
 
     margin-bottom: $baseline;
     padding: ($baseline/2);
 
-    // header - title
-    .section-title {
-      @extend %t-title5;
-      @extend %t-strong;
+      // header - title
+      .section-title {
+          @extend %t-title5 !optional;
+          @extend %t-strong !optional;
 
       color: $color-heading-base;
     }
 
     // status
     .section-status {
-      @extend %outline-item-status;
+        @extend %outline-item-status !optional;
     }
 
     // status - release
@@ -764,40 +764,40 @@ $outline-indent-width: $baseline;
 
   // outline: subsections
   .outline-subsection {
-    @extend %outline-simple-item;
+      @extend %outline-simple-item !optional;
 
     margin-bottom: ($baseline/2);
     padding: ($baseline/2);
 
-    // header - title
-    .subsection-title {
-      @extend %t-title6;
+      // header - title
+      .subsection-title {
+          @extend %t-title6 !optional;
 
       color: $color-heading-base;
     }
 
     // status
     .subsection-status {
-      @extend %outline-item-status;
+        @extend %outline-item-status !optional;
     }
   }
 
   // outline: units
   .outline-unit {
-    @extend %outline-simple-item;
+      @extend %outline-simple-item !optional;
 
     margin-bottom: ($baseline/4);
     padding: ($baseline/4) ($baseline/2);
 
-    // header - title
-    .unit-title {
-      @extend %t-title7;
+      // header - title
+      .unit-title {
+          @extend %t-title7 !optional;
 
       color: $color-heading-base;
     }
 
     .unit-status {
-      @extend %outline-item-status;
+        @extend %outline-item-status !optional;
     }
   }
 }
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index 84cc7d9e03a2..1eefaba0cfd3 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -132,9 +132,9 @@ nav {
       border-width: 11px;
     }
 
-    .nav-item {
-      @extend %t-action3;
-      @extend %t-regular;
+        .nav-item {
+            @extend %t-action3 !optional;
+            @extend %t-regular !optional;
 
       display: block;
       margin: 0 0 ($baseline/4) 0;
@@ -248,7 +248,7 @@ $seq-nav-height: 40px;
 }
 
 .sequence-nav {
-  @extend .topbar;
+    @extend %topbar !optional;
 
   background-color: #fff;
   margin: 0 auto;
@@ -263,8 +263,8 @@ $seq-nav-height: 40px;
     display: none;
   }
 
-  .sequence-list-wrapper {
-    @extend %ui-depth2;
+    .sequence-list-wrapper {
+        @extend %ui-depth2 !optional;
 
     position: relative;
     height: 100%;
@@ -291,9 +291,9 @@ $seq-nav-height: 40px;
         @include border-right-style(solid);
       }
 
-      button {
-        @extend %ui-fake-link;
-        @extend %ui-clear-button;
+            button {
+                @extend %ui-fake-link !optional;
+                @extend %ui-clear-button !optional;
 
         width: 100%;
         height: ($seq-nav-height - 1);
@@ -350,7 +350,7 @@ $seq-nav-height: 40px;
         .sequence-tooltip {
           @include text-align(left);
 
-          @extend %ui-depth2;
+                    @extend %ui-depth2 !optional;
 
           margin-top: 12px;
           background: $seq-nav-tooltip-color;
@@ -397,7 +397,7 @@ $seq-nav-height: 40px;
 }
 
 .sequence-nav-button {
-  @extend %ui-depth3;
+    @extend %ui-depth3 !optional;
 
   display: block;
   top: 0;
diff --git a/cms/static/sass/elements/_pagination.scss b/cms/static/sass/elements/_pagination.scss
index b0d03858e761..fde84e458fa3 100644
--- a/cms/static/sass/elements/_pagination.scss
+++ b/cms/static/sass/elements/_pagination.scss
@@ -51,9 +51,9 @@
     }
   }
 
-  .nav-label {
-    @extend %cont-text-sr;
-  }
+    .nav-label {
+        @extend %cont-text-sr !optional;
+    }
 
   .pagination-form,
   .current-page,
@@ -62,11 +62,11 @@
     display: inline-block;
   }
 
-  .current-page,
-  .page-number-input,
-  .total-pages {
-    @extend %t-copy-base;
-    @extend %t-strong;
+    .current-page,
+    .page-number-input,
+    .total-pages {
+        @extend %t-copy-base !optional;
+        @extend %t-strong !optional;
 
     width: ($baseline*2.5);
     margin: 0 ($baseline*0.75);
@@ -75,31 +75,31 @@
     color: $gray-d2;
   }
 
-  .current-page {
-    @extend %ui-depth1;
+    .current-page {
+        @extend %ui-depth1 !optional;
 
     position: absolute;
 
     @include left(-($baseline/4));
   }
 
-  .page-divider {
-    @extend %t-title4;
-    @extend %t-regular;
+    .page-divider {
+        @extend %t-title4 !optional;
+        @extend %t-regular !optional;
 
     vertical-align: middle;
     color: $gray;
   }
 
-  .pagination-form {
-    @extend %ui-depth2;
+    .pagination-form {
+        @extend %ui-depth2 !optional;
 
     position: relative;
 
-    .page-number-label,
-    .submit-pagination-form {
-      @extend %cont-text-sr;
-    }
+        .page-number-label,
+        .submit-pagination-form {
+            @extend %cont-text-sr !optional;
+        }
 
     .page-number-input {
       @include transition(all $tmg-f2 ease-in-out 0s);
diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss
index b35356c3684a..778f83833a00 100644
--- a/cms/static/sass/elements/_sock.scss
+++ b/cms/static/sass/elements/_sock.scss
@@ -12,7 +12,7 @@
   .wrapper-inner {
     @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
 
-    @extend %ui-depth0;
+        @extend %ui-depth0 !optional;
 
     display: none;
     width: 100% !important;
@@ -20,9 +20,9 @@
     padding: 0 $baseline !important;
   }
 
-  // sock - actions
-  .list-cta {
-    @extend %ui-depth1;
+    // sock - actions
+    .list-cta {
+        @extend %ui-depth1 !optional;
 
     position: absolute;
     top: -($baseline*0.75);
@@ -30,16 +30,16 @@
     margin: 0 auto;
     text-align: center;
 
-    .cta-show-sock {
-      @extend %ui-btn-pill;
-      @extend %t-action4;
+        .cta-show-sock {
+            @extend %ui-btn-pill !optional;
+            @extend %t-action4 !optional;
 
       background: $gray-l5;
       padding: ($baseline/2) $baseline;
       color: $gray-d2;
 
-      .icon {
-        @extend %t-icon6;
+            .icon {
+                @extend %t-icon6 !optional;
 
         @include margin-right($baseline/4);
       }
@@ -55,7 +55,7 @@
   .sock {
     @include clearfix();
 
-    @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
     max-width: $fg-max-width;
     min-width: $fg-min-width;
@@ -64,27 +64,27 @@
     padding: ($baseline*2) 0;
     color: $gray-l3;
 
-    // support body
-    header {
-      .title {
-        @extend %t-title4;
-      }
-    }
+        // support body
+        header {
+            .title {
+                @extend %t-title4 !optional;
+            }
+        }
 
     // shared elements
     .support,
     .feedback {
       box-sizing: border-box;
 
-      .title {
-        @extend %t-title6;
+            .title {
+                @extend %t-title6 !optional;
 
         color: $white;
         margin-bottom: ($baseline/2);
       }
 
-      .copy {
-        @extend %t-copy-sub2;
+            .copy {
+                @extend %t-copy-sub2 !optional;
 
         margin: 0 0 $baseline 0;
       }
@@ -102,13 +102,13 @@
             @include margin-right(0);
           }
 
-          .action {
-            @extend %t-action4;
+                    .action {
+                        @extend %t-action4 !optional;
 
             display: block;
 
-            .icon {
-              @extend %t-icon4;
+                        .icon {
+                            @extend %t-icon4 !optional;
 
               vertical-align: middle;
 
@@ -116,17 +116,17 @@
             }
           }
 
-          .tip {
-            @extend %cont-text-sr;
-          }
-        }
+                    .tip {
+                        @extend %cont-text-sr !optional;
+                    }
+                }
 
-        .action-primary {
-          @extend %btn-primary-blue;
-          @extend %t-action3;
+                .action-primary {
+                    @extend %btn-primary-blue !optional;
+                    @extend %t-action3 !optional;
+                }
+            }
         }
-      }
-    }
 
     // studio support content
     .support {
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 5585c20977a0..b2b9e6902142 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 !optional;
 
   display: block;
 }
@@ -13,7 +13,7 @@
 
   box-sizing: border-box;
 
-  @extend %t-strong;
+  @extend %t-strong !optional;
 
   display: none;
   border-bottom: 2px solid $yellow-d2;
@@ -23,7 +23,7 @@
   color: $white;
 
   .feedback-symbol {
-    @extend %t-icon5;
+    @extend %t-icon5 !optional;
 
     position: relative;
     top: 1px;
@@ -56,7 +56,7 @@
   box-sizing: border-box;
 
   .copy {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
   }
 }
 
@@ -143,13 +143,13 @@
     .nav-actions .action-primary {
       @include blue-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $blue-d2;
     }
 
     button {
-      @extend %btn-no-style;
+      @extend %btn-no-style !optional;
 
       color: $blue;
 
@@ -164,14 +164,14 @@
     .nav-actions .action-primary {
       @include orange-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $orange-d2;
       color: $gray-d4;
     }
 
     button {
-      @extend %btn-no-style;
+      @extend %btn-no-style !optional;
 
       color: $orange;
 
@@ -186,13 +186,13 @@
     .nav-actions .action-primary {
       @include red-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $red-d2;
     }
 
     button {
-      @extend %btn-no-style;
+      @extend %btn-no-style !optional;
 
       color: $red-l1;
 
@@ -207,13 +207,13 @@
     .nav-actions .action-primary {
       @include blue-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $blue-d2;
     }
 
     button {
-      @extend %btn-no-style;
+      @extend %btn-no-style !optional;
 
       color: $blue;
 
@@ -228,13 +228,13 @@
     .nav-actions .action-primary {
       @include green-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $green-d2;
     }
 
     button {
-      @extend %btn-no-style;
+      @extend %btn-no-style !optional;
 
       color: $green;
 
@@ -249,13 +249,13 @@
     .nav-actions .action-primary {
       @include pink-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $pink-d2;
     }
 
     button {
-      @extend %btn-no-style;
+      @extend %btn-no-style !optional;
 
       color: $pink;
 
@@ -268,7 +268,7 @@
 
 // prompts
 .wrapper-prompt {
-  @extend %ui-depth5;
+  @extend %ui-depth5 !optional;
 
   @include transition(all $tmg-f3 ease-in-out  0s);
 
@@ -319,12 +319,12 @@
       }
 
       .action-primary {
-        @extend %t-action4;
-        @extend %t-strong;
+        @extend %t-action4 !optional;
+        @extend %t-strong !optional;
       }
 
       .action-secondary {
-        @extend %t-action4;
+        @extend %t-action4 !optional;
       }
     }
   }
@@ -367,7 +367,7 @@
 
 // notifications
 .wrapper-notification {
-  @extend %ui-depth5;
+  @extend %ui-depth5 !optional;
 
   @include clearfix();
 
@@ -484,7 +484,7 @@
   max-width: $fg-max-width;
 
   strong {
-    @extend %t-strong;
+    @extend %t-strong !optional;
   }
 
   .feedback-symbol,
@@ -497,7 +497,7 @@
   .feedback-symbol {
     @include transition (color $tmg-f1 ease-in-out 0s);
 
-    @extend %t-icon3;
+    @extend %t-icon3 !optional;
 
     width: flex-grid(1, 12);
     height: ($baseline*1.25);
@@ -508,13 +508,13 @@
   }
 
   .copy {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     width: flex-grid(10, 12);
     color: $gray-l2;
 
     .title {
-      @extend %t-title7;
+      @extend %t-title7 !optional;
 
       margin-bottom: 0;
       color: $white;
@@ -556,13 +556,13 @@
     .action-primary {
       @include blue-button();
 
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       border-color: $blue-d2;
     }
 
     .action-secondary {
-      @extend %t-action4;
+      @extend %t-action4 !optional;
     }
   }
 
@@ -591,11 +591,11 @@
     }
 
     .title {
-      @extend %cont-truncated;
+      @extend %cont-truncated !optional;
     }
 
     .copy p {
-      @extend %cont-text-sr;
+      @extend %cont-text-sr !optional;
     }
   }
 }
@@ -604,7 +604,7 @@
 
 // alerts
 .wrapper-alert {
-  @extend %ui-depth2;
+  @extend %ui-depth2 !optional;
 
   box-sizing: border-box;
   box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
@@ -677,7 +677,7 @@
   color: $white;
 
   strong {
-    @extend %t-strong;
+    @extend %t-strong !optional;
   }
 
   .feedback-symbol,
@@ -688,7 +688,7 @@
   .feedback-symbol {
     @include transition (color $tmg-f1 ease-in-out 0s);
 
-    @extend %t-icon3;
+    @extend %t-icon3 !optional;
 
     width: flex-grid(1, 12);
     margin: ($baseline/4) flex-gutter() 0 0;
@@ -701,7 +701,7 @@
     color: $gray-l2;
 
     .title {
-      @extend %t-title7;
+      @extend %t-title7 !optional;
 
       margin-bottom: 0;
       color: $white;
@@ -739,12 +739,12 @@
         }
 
         .action-primary {
-          @extend %t-action4;
-          @extend %t-strong;
+          @extend %t-action4 !optional;
+          @extend %t-strong !optional;
         }
 
         .action-secondary {
-          @extend %t-action4;
+          @extend %t-action4 !optional;
         }
       }
     }
@@ -762,11 +762,11 @@
     text-align: center;
 
     .label {
-      @extend %cont-text-sr;
+      @extend %cont-text-sr !optional;
     }
 
     .icon {
-      @extend %t-icon6;
+      @extend %t-icon6 !optional;
 
       color: $white;
       width: auto;
@@ -782,7 +782,7 @@
   // with dismiss (to sunset action-alert-clos)
   .action-dismiss {
     .button {
-      @extend %btn-secondary-white;
+      @extend %btn-secondary-white !optional;
 
       padding: ($baseline/4) ($baseline/2);
     }
@@ -794,13 +794,13 @@
     }
 
     .icon {
-      @extend %t-icon4;
+      @extend %t-icon4 !optional;
 
       margin-right: ($baseline/4);
     }
 
     .button-copy {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
     }
   }
 }
@@ -859,7 +859,7 @@
 // block-level messages and validation
 .wrapper-message {
   .message {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     background-color: $gray-d2;
     padding: ($baseline/2) ($baseline*0.75);
@@ -870,7 +870,7 @@
     }
 
     &.information {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       background-color: $gray-l5;
       color: $gray-d2;
@@ -913,7 +913,7 @@
     background-color: $gray-d1;
 
     .actions-list {
-      @extend %actions-list;
+      @extend %actions-list !optional;
     }
   }
 }
@@ -930,7 +930,7 @@ body.uxdesign.alerts {
   }
 
   .content-primary {
-    @extend %ui-window;
+    @extend %ui-window !optional;
 
     width: flex-grid(12, 12);
 
@@ -978,7 +978,7 @@ body.uxdesign.alerts {
 // artifact styles
 .main-wrapper {
   .alert {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     padding: 15px 20px;
     margin-bottom: ($baseline*1.5);
@@ -996,7 +996,7 @@ body.uxdesign.alerts {
     }
 
     strong {
-      @extend %t-strong;
+      @extend %t-strong !optional;
     }
 
     .alert-action {
@@ -1027,8 +1027,8 @@ body.error {
   }
 
   h1 {
-    @extend %t-title1;
-    @extend %t-light;
+    @extend %t-title1 !optional;
+    @extend %t-light !optional;
 
     float: none;
     margin: 0;
@@ -1036,7 +1036,7 @@ body.error {
   }
 
   .description {
-    @extend %t-copy-lead2;
+    @extend %t-copy-lead2 !optional;
 
     margin-bottom: 50px;
   }
@@ -1044,7 +1044,7 @@ body.error {
   .back-button {
     @include blue-button();
 
-    @extend %t-action1;
+    @extend %t-action1 !optional;
 
     padding: 14px 40px 18px;
   }
diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss
index 2f66913fc087..0a67c8c779a7 100644
--- a/cms/static/sass/elements/_system-help.scss
+++ b/cms/static/sass/elements/_system-help.scss
@@ -7,16 +7,16 @@
   margin-bottom: $baseline;
 
   .title {
-    @extend %t-title4;
-    @extend %t-strong;
+    @extend %t-title4 !optional;
+    @extend %t-strong !optional;
   }
 
   .copy {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
   }
 
   strong {
-    @extend %t-strong;
+    @extend %t-strong !optional;
   }
 
   // CASE: has links alongside
@@ -32,7 +32,7 @@
     }
 
     .nav-introduction-supplementary {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       @include float(right);
 
@@ -42,7 +42,7 @@
       @include text-align(right);
 
       .icon {
-        @extend %t-action3;
+        @extend %t-action3 !optional;
 
         display: inline-block;
         vertical-align: middle;
@@ -54,7 +54,7 @@
 
 // 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 !optional;
 
   border-radius: ($baseline/10);
   position: relative;
@@ -62,14 +62,14 @@
   margin-bottom: $baseline;
 
   .title {
-    @extend %t-title6;
-    @extend %t-strong;
+    @extend %t-title6 !optional;
+    @extend %t-strong !optional;
 
     margin-bottom: ($baseline/2);
   }
 
   .copy {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     @include transition(opacity $tmg-f2 ease-in-out 0s);
 
@@ -82,7 +82,7 @@
   }
 
   strong {
-    @extend %t-strong;
+    @extend %t-strong !optional;
   }
 
   &.has-status {
@@ -103,8 +103,8 @@
       margin-top: ($baseline*0.75);
 
       .action-primary {
-        @extend %btn-primary-blue;
-        @extend %t-action3;
+        @extend %btn-primary-blue !optional;
+        @extend %t-action3 !optional;
       }
     }
   }
@@ -157,8 +157,8 @@
   &.has-actions {
     .list-actions {
       .action-primary {
-        @extend %btn-primary-blue;
-        @extend %t-action3;
+        @extend %btn-primary-blue !optional;
+        @extend %t-action3 !optional;
       }
     }
   }
@@ -179,8 +179,8 @@
   &.has-actions {
     .list-actions {
       .action-primary {
-        @extend %btn-primary-green;
-        @extend %t-action3;
+        @extend %btn-primary-green !optional;
+        @extend %t-action3 !optional;
       }
     }
   }
@@ -207,7 +207,7 @@
 
 // informational bits (rename once UI pattern is further defined)
 .bit {
-  @extend %t-copy-sub1;
+  @extend %t-copy-sub1 !optional;
 
   margin: 0 0 $baseline 0;
   border-bottom: 1px solid $gray-l4;
@@ -222,8 +222,8 @@
 
   h3,
   .title {
-    @extend %t-title7;
-    @extend %t-strong;
+    @extend %t-title7 !optional;
+    @extend %t-strong !optional;
 
     margin: 0 0 ($baseline/4) 0;
     color: $gray-d2;
@@ -242,16 +242,16 @@
   .external-help-button {
     display: inline-block;
 
-    @extend %ui-btn-flat-outline;
-    @extend %sizing;
+    @extend %ui-btn-flat-outline !optional;
+    @extend %sizing !optional;
   }
 
   // actions
   .list-actions {
-    @extend %cont-no-list;
+    @extend %cont-no-list !optional;
 
     .action-item {
-      @extend %wipe-last-child;
+      @extend %wipe-last-child !optional;
 
       margin-bottom: ($baseline/4);
       border-bottom: 1px dotted $gray-l4;
@@ -261,10 +261,10 @@
 
   // details
   .list-details {
-    @extend %cont-no-list;
+    @extend %cont-no-list !optional;
 
     .item-detail {
-      @extend %wipe-last-child;
+      @extend %wipe-last-child !optional;
 
       margin-bottom: ($baseline/4);
       border-bottom: 1px dotted $gray-l4;
@@ -275,10 +275,10 @@
   // navigation
   .nav-related,
   .nav-page {
-    @extend %cont-no-list;
+    @extend %cont-no-list !optional;
 
     .nav-item {
-      @extend %wipe-last-child;
+      @extend %wipe-last-child !optional;
 
       margin-bottom: ($baseline/4);
       border-bottom: 1px dotted $gray-l5;
diff --git a/cms/static/sass/elements/_tooltip.scss b/cms/static/sass/elements/_tooltip.scss
index 00fc2f805487..324341367830 100644
--- a/cms/static/sass/elements/_tooltip.scss
+++ b/cms/static/sass/elements/_tooltip.scss
@@ -2,8 +2,8 @@
   @include transition(opacity $tmg-f3 ease-out 0s);
   @include font-size(12);
 
-  @extend %t-regular;
-  @extend %ui-depth5;
+  @extend %t-regular !optional;
+   @extend %ui-depth5 !optional;
 
   position: absolute;
   top: 0;
diff --git a/cms/static/sass/elements/_typography.scss b/cms/static/sass/elements/_typography.scss
index 63b49375c84f..d9dd028f35fb 100644
--- a/cms/static/sass/elements/_typography.scss
+++ b/cms/static/sass/elements/_typography.scss
@@ -34,14 +34,14 @@
 }
 
 %t-title1 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(60);
   @include line-height(60);
 }
 
 %t-title2 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(48);
   @include line-height(48);
@@ -53,42 +53,42 @@
 }
 
 %t-title4 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(24);
   @include line-height(24);
 }
 
 %t-title5 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(18);
   @include line-height(18);
 }
 
 %t-title6 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(16);
   @include line-height(16);
 }
 
 %t-title7 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(14);
   @include line-height(14);
 }
 
 %t-title8 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(12);
   @include line-height(12);
 }
 
 %t-title9 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(11);
   @include line-height(11);
@@ -102,35 +102,35 @@
 }
 
 %t-copy-base {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include font-size(16);
   @include line-height(16);
 }
 
 %t-copy-lead1 {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include font-size(18);
   @include line-height(18);
 }
 
 %t-copy-lead2 {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include font-size(24);
   @include line-height(24);
 }
 
 %t-copy-sub1 {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include font-size(14);
   @include line-height(14);
 }
 
 %t-copy-sub2 {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include font-size(12);
   @include line-height(12);
diff --git a/cms/static/sass/elements/_uploaded-assets.scss b/cms/static/sass/elements/_uploaded-assets.scss
index 32dbc1aedd5e..d9cd8ef752f2 100644
--- a/cms/static/sass/elements/_uploaded-assets.scss
+++ b/cms/static/sass/elements/_uploaded-assets.scss
@@ -3,7 +3,7 @@
     @include clearfix();
 
     .assets-title {
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       margin-top: ($baseline*2);
       margin-bottom: ($baseline*2);
@@ -14,7 +14,7 @@
     }
 
     .meta {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       display: inline-block;
       vertical-align: top;
@@ -24,12 +24,12 @@
       .count-current-shown,
       .count-total,
       .sort-order {
-        @extend %t-strong;
+        @extend %t-strong !optional;
       }
     }
 
     .pagination {
-      @extend %pagination;
+      @extend %pagination !optional;
     }
 
     .assets-table {
@@ -39,7 +39,7 @@
 
       th,
       .video-head-col {
-        @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
         background-color: $gray-l5;
         padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
@@ -53,7 +53,7 @@
         }
 
         .current-sort {
-          @extend %t-strong;
+          @extend %t-strong !optional;
 
           border-bottom: 1px solid $gray-l3;
         }
@@ -84,7 +84,7 @@
           border-top: 1px solid $gray-l4;
 
           .name-col {
-            @extend %t-strong;
+            @extend %t-strong !optional;
           }
 
           .video-status {
@@ -138,7 +138,7 @@
 
         .name-col {
           .title {
-            @extend %t-copy-sub1;
+            @extend %t-copy-sub1 !optional;
 
             display: inline-block;
             max-width: 200px;
@@ -149,7 +149,7 @@
         .date-col {
           @include transition(all $tmg-f2 ease-in-out 0s);
 
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           color: $gray-d1;
         }
@@ -163,7 +163,7 @@
           .embeddable-xml-input {
             @include transition(all $tmg-f2 ease-in-out 0s);
 
-            @extend %t-copy-sub2;
+            @extend %t-copy-sub2 !optional;
 
             box-shadow: none;
             border: 1px solid transparent;
diff --git a/cms/static/sass/elements/_vendor.scss b/cms/static/sass/elements/_vendor.scss
index 5418745922f9..493c72e7ae88 100644
--- a/cms/static/sass/elements/_vendor.scss
+++ b/cms/static/sass/elements/_vendor.scss
@@ -3,7 +3,7 @@
 
 // JQUI calendar
 .ui-datepicker {
-  @extend %t-copy-sub2;
+  @extend %t-copy-sub2 !optional;
 
   border-color: $darkGrey;
   border-radius: 2px;
@@ -97,7 +97,7 @@
 }
 
 .ui-widget {
-  @extend %t-copy-base;
+  @extend %t-copy-base !optional;
 }
 
 .ui-widget-header {
@@ -126,7 +126,7 @@
   }
 
   a {
-    @extend %t-regular;
+    @extend %t-regular !optional;
 
     float: none;
   }
diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss
index d6e8aff5d66a..c0ee0512f45f 100644
--- a/cms/static/sass/elements/_xblocks.scss
+++ b/cms/static/sass/elements/_xblocks.scss
@@ -44,19 +44,19 @@
     align-items: center;
 
     .header-details {
-      @extend %cont-truncated;
+      @extend %cont-truncated !optional;
 
       width: 50%;
       vertical-align: middle;
 
       .xblock-display-name {
-        @extend %t-copy-lead1;
+        @extend %t-copy-lead1 !optional;
 
         font-weight: font-weight(semi-bold);
       }
 
       .xblock-group-visibility-label {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         white-space: normal;
         font-weight: font-weight(semi-bold);
@@ -137,7 +137,7 @@
   .xmodule_VideoModule .xblock-license {
     @include text-align(right);
 
-    @extend %t-title7;
+    @extend %t-title7 !optional;
 
     display: block;
     width: auto;
@@ -180,7 +180,7 @@
     }
 
     .meta {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       display: inline-block;
       vertical-align: top;
@@ -190,18 +190,18 @@
       .count-current-shown,
       .count-total,
       .sort-order {
-        @extend %t-strong;
+        @extend %t-strong !optional;
       }
     }
 
     .pagination {
-      @extend %pagination;
+      @extend %pagination !optional;
     }
   }
 
   .container-paging-footer {
     .pagination {
-      @extend %pagination;
+      @extend %pagination !optional;
     }
   }
 
@@ -210,7 +210,7 @@
   // TO-DO: clean-up / remove this reset
   // internal headings for problems and video components
   h2 {
-    @extend %t-title5;
+    @extend %t-title5 !optional;
 
     margin: ($baseline*1.5) ($baseline*2) ($baseline*1.5) 0;
     color: $gray;
@@ -225,7 +225,7 @@
 
     // UI: xblocks - calls-to-action
     .header-actions .actions-list {
-      @extend %actions-list;
+      @extend %actions-list !optional;
     }
 
     // CASE: xblock is collapsible
@@ -236,7 +236,7 @@
       }
 
       .expand-collapse {
-        @extend %expand-collapse;
+        @extend %expand-collapse !optional;
 
         margin: 0 ($baseline/4);
         height: ($baseline*1.25);
@@ -265,7 +265,7 @@
   // xblock message area, for general information as well as validation
   .wrapper-xblock-message {
     .xblock-message {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       background-color: $gray-d2;
       padding: ($baseline*0.75);
@@ -276,7 +276,7 @@
       }
 
       &.information {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         background-color: $gray-l5;
         color: $gray-d2;
@@ -319,7 +319,7 @@
       background-color: $gray-d1;
 
       .actions-list {
-        @extend %actions-list;
+        @extend %actions-list !optional;
       }
     }
   }
@@ -420,7 +420,7 @@
     }
 
     .xblock-header-primary {
-      @extend %t-light;
+      @extend %t-light !optional;
 
       display: flex;
       margin-bottom: 0;
@@ -460,7 +460,7 @@
     .wrapper-xblock-message {
       .xblock-message {
         &.information {
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           padding: 0 $baseline ($baseline*0.75) $baseline;
           color: $gray-l1;
@@ -474,7 +474,7 @@
   // edited experiment groups: active and inactive
   .wrapper-groups {
     .title {
-      @extend %t-title7;
+      @extend %t-title7 !optional;
 
       margin-left: ($baseline/2);
       color: $gray-l1;
@@ -536,9 +536,9 @@
 
   .file-uploader {
     .upload-setting {
-      @extend %ui-btn-flat-outline;
-      @extend %t-action3;
-      @extend %t-strong;
+      @extend %ui-btn-flat-outline !optional;
+      @extend %t-action3 !optional;
+      @extend %t-strong !optional;
 
       box-sizing: border-box;
       display: inline-block;
@@ -548,9 +548,9 @@
     }
 
     .download-setting {
-      @extend %ui-btn-non;
-      @extend %t-action4;
-      @extend %t-strong;
+      @extend %ui-btn-non !optional;
+      @extend %t-action4 !optional;
+      @extend %t-strong !optional;
 
       box-sizing: border-box;
       display: inline-block;
@@ -573,7 +573,7 @@
 
   //settings-list
   .list-input.settings-list {
-    @extend %cont-no-list;
+    @extend %cont-no-list !optional;
 
     overflow: auto;
     max-height: 400px;
@@ -633,8 +633,8 @@
     .setting-label {
       @include transition(color $tmg-f2 ease-in-out 0s);
 
-      @extend %t-copy-sub1;
-      @extend %t-strong;
+      @extend %t-copy-sub1 !optional;
+      @extend %t-strong !optional;
 
       vertical-align: middle;
       display: inline-block;
@@ -655,7 +655,7 @@
       @include placeholder($gray-l4);
       @include size(100%, 100%);
 
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
 
       width: 45%;
       min-width: 100px;
@@ -699,7 +699,7 @@
     }
 
     .action.setting-clear {
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       color: $gray;
       width: 25px;
@@ -729,7 +729,7 @@
     }
 
     .setting-help {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       display: inline-block;
       min-width: ($baseline*10);
@@ -785,9 +785,9 @@
       }
 
       .create-setting {
-        @extend %ui-btn-flat-outline;
-        @extend %t-action3;
-        @extend %t-strong;
+        @extend %ui-btn-flat-outline !optional;
+        @extend %t-action3 !optional;
+        @extend %t-strong !optional;
 
         display: block;
         width: 100%;
@@ -801,7 +801,7 @@
       .remove-setting {
         @include transition(color $tmg-f2 ease-in-out);
 
-        @extend %t-action1;
+        @extend %t-action1 !optional;
 
         display: inline-block;
         background: transparent;
@@ -859,9 +859,9 @@
       }
 
       .create-setting {
-        @extend %ui-btn-flat-outline;
-        @extend %t-action3;
-        @extend %t-strong;
+        @extend %ui-btn-flat-outline !optional;
+        @extend %t-action3 !optional;
+        @extend %t-strong !optional;
 
         display: block;
         width: 88%;
@@ -875,7 +875,7 @@
       .remove-setting {
         @include transition(color $tmg-f2 ease-in-out);
 
-        @extend %t-action1;
+        @extend %t-action1 !optional;
 
         display: inline-block;
         background: transparent;
@@ -945,7 +945,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
     .action.license-button {
       @include grey-button;
 
-      @extend %t-action2;
+      @extend %t-action2 !optional;
 
       display: inline-block;
       text-align: center;
@@ -959,7 +959,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
     }
 
     .tip {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
     }
   }
 
@@ -967,7 +967,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
     margin-bottom: ($baseline/2);
 
     .tip {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
     }
 
     .license-options {
@@ -996,8 +996,8 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
         }
 
         .option-name {
-          @extend %t-action3;
-          @extend %t-strong;
+          @extend %t-action3 !optional;
+          @extend %t-strong !optional;
 
           display: inline-block;
           width: 15%;
@@ -1006,7 +1006,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
         }
 
         .explanation {
-          @extend %t-action4;
+          @extend %t-action4 !optional;
 
           display: inline-block;
           width: 75%;
diff --git a/cms/static/sass/elements/_xmodules.scss b/cms/static/sass/elements/_xmodules.scss
index b3681d771e93..b0cd836a7c84 100644
--- a/cms/static/sass/elements/_xmodules.scss
+++ b/cms/static/sass/elements/_xmodules.scss
@@ -52,8 +52,8 @@
         }
 
         .collapse-setting {
-          @extend %t-action3;
-          @extend %t-strong;
+          @extend %t-action3 !optional;
+          @extend %t-strong !optional;
 
           display: block;
           width: 100%;
@@ -138,11 +138,11 @@
         margin-top: ($baseline/2);
 
         .transcripts-message {
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
         }
 
         .transcripts-message-status {
-          @extend %t-strong;
+          @extend %t-strong !optional;
 
           color: $green;
 
@@ -152,14 +152,14 @@
 
           .icon,
           [class*=" fa-"] {
-            @extend %t-icon4;
+            @extend %t-icon4 !optional;
 
             margin-right: ($baseline/4);
           }
         }
 
         .transcripts-error-message {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
           background: $red;
           color: $white;
@@ -178,8 +178,8 @@
       }
 
       .action {
-        @extend %btn-primary-blue;
-        @extend %t-action3;
+        @extend %btn-primary-blue !optional;
+        @extend %t-action3 !optional;
 
         margin-bottom: ($baseline/2);
       }
@@ -197,7 +197,7 @@
     }
 
     .progress-bar {
-      @extend %t-copy-lead1;
+      @extend %t-copy-lead1 !optional;
 
       display: block;
       height: 30px;
@@ -261,7 +261,7 @@
               }
 
               .list-settings-buttons {
-                @extend %cont-truncated;
+                @extend %cont-truncated !optional;
 
                 padding: ($baseline/2) 0;
                 border-bottom: 1px solid $gray-l4;
@@ -288,9 +288,9 @@
         }
 
         .create-setting {
-          @extend %ui-btn-flat-outline;
-          @extend %t-action3;
-          @extend %t-strong;
+          @extend %ui-btn-flat-outline !optional;
+          @extend %t-action3 !optional;
+          @extend %t-strong !optional;
 
           display: block;
           padding: ($baseline/2);
@@ -301,9 +301,9 @@
         }
 
         .upload-setting {
-          @extend %ui-btn-flat-outline;
-          @extend %t-action3;
-          @extend %t-strong;
+          @extend %ui-btn-flat-outline !optional;
+          @extend %t-action3 !optional;
+          @extend %t-strong !optional;
 
           display: inline-block;
           padding: ($baseline/2);
@@ -312,9 +312,9 @@
         }
 
         .download-setting {
-          @extend %ui-btn-non;
-          @extend %t-action4;
-          @extend %t-strong;
+          @extend %ui-btn-non !optional;
+          @extend %t-action4 !optional;
+          @extend %t-strong !optional;
 
           display: inline-block;
           padding: ($baseline/2);
@@ -330,7 +330,7 @@
         .remove-setting {
           @include transition(color 0.25s ease-in-out);
 
-          @extend %t-action1;
+          @extend %t-action1 !optional;
 
           display: inline-block;
           background: transparent;
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index 4ff3ff0d3ca1..a5481c2b84c4 100644
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -14,7 +14,7 @@
   .content {
     @include clearfix();
 
-    @extend %t-copy-base;
+    @extend %t-copy-base !optional;
 
     max-width: $fg-max-width;
     min-width: $fg-min-width;
@@ -29,15 +29,15 @@
       padding-bottom: ($baseline/2);
 
       h1 {
-        @extend %t-title3;
-        @extend %t-strong;
+        @extend %t-title3 !optional;
+        @extend %t-strong !optional;
 
         margin: 0;
         padding: 0;
       }
 
       .action {
-        @extend %t-action3;
+        @extend %t-action3 !optional;
 
         position: absolute;
 
@@ -48,7 +48,7 @@
     }
 
     .introduction {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       margin: 0 0 $baseline 0;
     }
@@ -60,7 +60,7 @@
   }
 
   .content-primary {
-    @extend .ui-col-wide;
+    @extend .ui-col-wide !optional;
 
     form {
       box-sizing: border-box;
@@ -78,8 +78,8 @@
           @include blue-button();
           @include transition(all $tmg-f3 linear 0s);
 
-          @extend %t-action2;
-          @extend %t-strong;
+          @extend %t-action2 !optional;
+          @extend %t-strong !optional;
 
           display: block;
           width: 100%;
@@ -89,7 +89,7 @@
       }
 
       .list-input {
-        @extend %cont-no-list;
+        @extend %cont-no-list !optional;
 
         .field {
           margin: 0 0 ($baseline*0.75) 0;
@@ -100,7 +100,7 @@
 
           &.required {
             label {
-              @extend %t-strong;
+              @extend %t-strong !optional;
             }
 
             label::after {
@@ -116,7 +116,7 @@
           }
 
           label {
-            @extend %t-copy-sub1;
+            @extend %t-copy-sub1 !optional;
 
             @include transition(color $tmg-f3 ease-in-out 0s);
 
@@ -129,7 +129,7 @@
 
           input,
           textarea {
-            @extend %t-copy-base;
+            @extend %t-copy-base !optional;
 
             height: 100%;
             width: 100%;
@@ -186,7 +186,7 @@
           }
 
           .tip {
-            @extend %t-copy-sub2;
+            @extend %t-copy-sub2 !optional;
 
             @include transition(color $tmg-f3 ease-in-out 0s);
 
@@ -232,10 +232,10 @@
   }
 
   .content-supplementary {
-    @extend .ui-col-narrow;
+    @extend .ui-col-narrow !optional;
 
     .bit {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       margin: 0 0 $baseline 0;
       border-bottom: 1px solid $gray-l4;
@@ -249,8 +249,8 @@
       }
 
       h3 {
-        @extend %t-title7;
-        @extend %t-strong;
+        @extend %t-title7 !optional;
+        @extend %t-strong !optional;
 
         margin: 0 0 ($baseline/4) 0;
         color: $gray-d2;
@@ -262,7 +262,7 @@
     position: relative;
 
     .action-forgotpassword {
-      @extend %t-action3;
+      @extend %t-action3 !optional;
 
       position: absolute;
       top: 0;
diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss
index 144e5dffd82e..03fd43483d23 100644
--- a/cms/static/sass/views/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -8,16 +8,16 @@
   }
 
   .content-primary {
-    @extend .ui-col-wide;
+    @extend .ui-col-wide !optional;
   }
 
   .content-supplementary {
-    @extend .ui-col-narrow;
+    @extend .ui-col-narrow !optional;
   }
 
   .nav-actions {
     .fa-cloud-upload {
-      @extend %t-copy;
+      @extend %t-copy !optional;
 
       vertical-align: bottom;
       margin-right: ($baseline/5);
@@ -25,7 +25,7 @@
   }
 
   .no-asset-content {
-    @extend %ui-well;
+    @extend %ui-well !optional;
 
     padding: ($baseline*2);
     background-color: $gray-l4;
@@ -33,8 +33,8 @@
     color: $gray;
 
     .new-button {
-      @extend %btn-primary-green;
-      @extend %t-action3;
+      @extend %btn-primary-green !optional;
+      @extend %t-action3 !optional;
 
       @include margin-left($baseline);
 
@@ -52,7 +52,7 @@
     }
 
     .meta {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       display: inline-block;
       vertical-align: top;
@@ -63,7 +63,7 @@
       .count-total,
       .filter-column,
       .sort-order {
-        @extend %t-strong;
+        @extend %t-strong !optional;
       }
     }
 
@@ -116,7 +116,7 @@
       }
 
       .nav-label {
-        @extend .sr;
+        @extend .sr !optional;
       }
 
       .pagination-form,
@@ -129,8 +129,8 @@
       .current-page,
       .page-number-input,
       .total-pages {
-        @extend %t-copy-base;
-        @extend %t-strong;
+        @extend %t-copy-base !optional;
+        @extend %t-strong !optional;
 
         width: ($baseline*2.5);
         margin: 0 ($baseline*0.75);
@@ -140,7 +140,7 @@
       }
 
       .current-page {
-        @extend %ui-depth1;
+        @extend %ui-depth1 !optional;
 
         position: absolute;
 
@@ -148,8 +148,8 @@
       }
 
       .page-divider {
-        @extend %t-title4;
-        @extend %t-regular;
+        @extend %t-title4 !optional;
+        @extend %t-regular !optional;
 
         vertical-align: middle;
         color: $gray;
@@ -157,13 +157,13 @@
 
 
       .pagination-form {
-        @extend %ui-depth2;
+        @extend %ui-depth2 !optional;
 
         position: relative;
 
         .page-number-label,
         .submit-pagination-form {
-          @extend .sr;
+          @extend .sr !optional;
         }
 
         .page-number-input {
@@ -203,7 +203,7 @@
       word-wrap: break-word;
 
       th {
-        @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
         background-color: $gray-l5;
         padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
@@ -218,7 +218,7 @@
         }
 
         .current-sort {
-          @extend %t-strong;
+          @extend %t-strong !optional;
 
           border-bottom: 1px solid $gray-l3;
         }
@@ -238,11 +238,11 @@
           .wrapper-nav-sub {
             top: 35px;
 
-            @extend %ui-depth2;
+            @extend %ui-depth2 !optional;
 
             > ol > .nav-item {
-              @extend %t-action3;
-              @extend %t-strong;
+              @extend %t-action3 !optional;
+              @extend %t-strong !optional;
 
               display: inline-block;
               vertical-align: middle;
@@ -336,7 +336,7 @@
         .thumb-col {
           padding: ($baseline/2) $baseline;
 
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           color: $gray-l2;
 
@@ -352,7 +352,7 @@
 
         .name-col {
           .title {
-            @extend %t-copy-sub1;
+            @extend %t-copy-sub1 !optional;
 
             display: inline-block;
             max-width: 200px;
@@ -361,7 +361,7 @@
         }
 
         .type-col {
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           color: $gray-d1;
         }
@@ -369,7 +369,7 @@
         .date-col {
           @include transition(all $tmg-f2 ease-in-out 0s);
 
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           color: $gray-l2;
         }
@@ -377,7 +377,7 @@
         .embed-col {
           @include transition(all $tmg-f2 ease-in-out 0s);
 
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           padding-left: ($baseline*0.75);
           color: $gray-l2;
@@ -390,7 +390,7 @@
           .embeddable-xml-input {
             @include transition(all $tmg-f2 ease-in-out 0s);
 
-            @extend %t-copy-sub2;
+            @extend %t-copy-sub2 !optional;
 
             box-shadow: none;
             border: 1px solid transparent;
@@ -417,7 +417,7 @@
 
   // UI: assets - calls-to-action
   .actions-list {
-    @extend %actions-list;
+    @extend %actions-list !optional;
 
     .action-item {
 
@@ -495,8 +495,8 @@
     }
 
     .title {
-      @extend %t-title3;
-      @extend %t-light;
+      @extend %t-title3 !optional;
+      @extend %t-light !optional;
 
       float: none;
       margin: ($baseline*2) 0 ($baseline*1.5);
@@ -509,7 +509,7 @@
     .choose-file-button {
       @include blue-button();
 
-      @extend %t-action2;
+      @extend %t-action2 !optional;
 
       padding: 10px 82px 12px;
     }
@@ -532,7 +532,7 @@
     }
 
     .progress-fill {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       width: 0%;
       height: ($baseline*1.5);
@@ -553,7 +553,7 @@
       padding: 0;
 
       .icon {
-        @extend %t-action1;
+        @extend %t-action1 !optional;
       }
 
       &:hover {
@@ -568,7 +568,7 @@
       margin: ($baseline*1.5) 0 ($baseline*4);
 
       label {
-        @extend %t-strong;
+        @extend %t-strong !optional;
 
         display: block;
         margin-bottom: ($baseline/2);
diff --git a/cms/static/sass/views/_certificates.scss b/cms/static/sass/views/_certificates.scss
index 7c7eb3fa5f3e..43d05d555c96 100644
--- a/cms/static/sass/views/_certificates.scss
+++ b/cms/static/sass/views/_certificates.scss
@@ -22,8 +22,8 @@
     margin-right: flex-gutter();
 
     .notice-moduledisabled {
-      @extend %ui-well;
-      @extend %t-copy-base;
+      @extend %ui-well !optional;
+      @extend %t-copy-base !optional;
 
       background-color: $white;
       padding: ($baseline*1.5) $baseline;
@@ -31,21 +31,21 @@
     }
 
     .no-content {
-      @extend %no-content;
+      @extend %no-content !optional;
     }
 
     .wrapper-certificates {
       .title {
-        @extend %t-title4;
-        @extend %t-strong;
+        @extend %t-title4 !optional;
+        @extend %t-strong !optional;
       }
 
       .copy {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
       }
 
       .instructions {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         margin-bottom: $baseline;
       }
@@ -56,7 +56,7 @@
     }
 
     .actual-course-title {
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       margin-bottom: $baseline;
     }
@@ -82,7 +82,7 @@
 // ====================
 .view-certificates {
   .wrapper-collection {
-    @extend %ui-window;
+    @extend %ui-window !optional;
 
     position: relative;
     outline: none;
@@ -102,7 +102,7 @@
     }
 
     .collection-info {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       &.certificate-info-inline {
         margin: ($baseline/2) 0;
@@ -127,7 +127,7 @@
       margin-bottom: ($baseline*0.75);
 
       .item {
-        @extend %t-copy-lead1;
+        @extend %t-copy-lead1 !optional;
 
         padding: ($baseline/7) 0 ($baseline/4);
         border-top: 1px solid $gray-l4;
@@ -163,15 +163,15 @@
           margin-right: ($baseline/4);
 
           .edit {
-            @extend %ui-btn-non-blue;
+            @extend %ui-btn-non-blue !optional;
           }
 
           .edit-signatory {
-            @extend %ui-btn-non-blue;
+            @extend %ui-btn-non-blue !optional;
           }
 
           .delete {
-            @extend %ui-btn-non;
+            @extend %ui-btn-non !optional;
 
             &.is-disabled {
               background-color: $gray-l3;
@@ -183,7 +183,7 @@
     }
 
     .collection-references {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       box-shadow: 0 2px 2px 0 $shadow inset;
       padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5);
@@ -196,7 +196,7 @@
           padding: ($baseline/4) 0;
 
           a {
-            @extend %t-strong;
+            @extend %t-strong !optional;
           }
 
           .fa-warning {
@@ -226,12 +226,12 @@
         padding: $baseline ($baseline*1.5);
 
         label {
-          @extend %t-strong;
+          @extend %t-strong !optional;
         }
       }
 
       .action-add-signatory {
-        @extend %ui-btn-flat-outline;
+        @extend %ui-btn-flat-outline !optional;
 
         display: block;
         width: 100%;
@@ -240,13 +240,13 @@
       }
 
       .disableClick {
-        @extend %ui-disabled;
+        @extend %ui-disabled !optional;
 
         color: $gray-l1;
       }
 
       .tip {
-        @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
         @include transition(color, 0.15s, ease-in-out);
 
@@ -261,7 +261,7 @@
 
 
       .collection-fields {
-        @extend %cont-no-list;
+        @extend %cont-no-list !optional;
 
         margin-bottom: $baseline;
       }
@@ -270,12 +270,12 @@
         margin: 0 0 ($baseline*0.75) 0;
 
         &:last-child {
-          @extend %wipe-last-child;
+          @extend %wipe-last-child !optional;
         }
 
         &.required {
           label {
-            @extend %t-strong;
+            @extend %t-strong !optional;
           }
 
           label::after {
@@ -295,7 +295,7 @@
         }
 
         label {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
           @include transition(color, 0.15s, ease-in-out);
 
@@ -309,7 +309,7 @@
         //this section is borrowed from _account.scss - we should clean up and unify later
         input,
         textarea {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
 
           height: 100%;
           width: 100%;
@@ -358,7 +358,7 @@
       }
 
       label.required {
-        @extend %t-strong;
+        @extend %t-strong !optional;
 
         &::after {
           margin-left: ($baseline/4);
@@ -370,7 +370,7 @@
         label {
           width: 50%;
 
-          @extend %t-title5;
+          @extend %t-title5 !optional;
 
           display: inline-block;
           vertical-align: bottom;
@@ -384,7 +384,7 @@
           color: $gray-l1;
 
           .certificate-value {
-            @extend %t-strong;
+            @extend %t-strong !optional;
 
             white-space: nowrap;
             margin-left: ($baseline*0.5);
@@ -407,13 +407,13 @@
         }
 
         .action-primary {
-          @extend %btn-primary-blue;
+          @extend %btn-primary-blue !optional;
 
           padding: ($baseline/4) $baseline;
         }
 
         .action-secondary {
-          @extend %btn-secondary-gray;
+          @extend %btn-secondary-gray !optional;
 
           padding: ($baseline/4) $baseline;
         }
@@ -436,21 +436,21 @@
       }
 
       .copy {
-        @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
         margin: ($baseline) 0 ($baseline/2) 0;
         color: $gray;
 
         strong {
-          @extend %t-strong;
+          @extend %t-strong !optional;
         }
       }
     }
 
     .action-add-item {
-      @extend %ui-btn-flat-outline;
-      @extend %t-action2;
-      @extend %t-strong;
+      @extend %ui-btn-flat-outline !optional;
+      @extend %t-action2 !optional;
+      @extend %t-strong !optional;
 
       display: block;
       width: 100%;
@@ -461,7 +461,7 @@
 
   // add/new collection
   .action-add {
-    @extend %ui-btn-flat-outline;
+    @extend %ui-btn-flat-outline !optional;
 
     display: block;
     width: 100%;
@@ -496,8 +496,8 @@
   .certificate-details,
   .certificate-edit {
     .title {
-      @extend %t-title4;
-      @extend %t-strong;
+      @extend %t-title4 !optional;
+      @extend %t-strong !optional;
 
       margin-bottom: ($baseline/2);
     }
@@ -545,7 +545,7 @@
       .action-close {
         @include transition(color $tmg-f2 ease-in-out);
 
-        @extend %t-action1;
+        @extend %t-action1 !optional;
 
         display: inline-block;
         border: 0;
@@ -568,12 +568,12 @@
 .view-certificates .certificates {
   .signatory-details,
   .signatory-edit {
-    @extend %ui-window;
+    @extend %ui-window !optional;
 
     border-color: $gray-l4;
 
     .signatory-panel-header {
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       background-color: $gray-l5;
       padding: ($baseline/2) ($baseline*0.75);
@@ -617,7 +617,7 @@
     }
 
     .tip {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       @include transition(color, 0.15s, ease-in-out);
 
@@ -630,12 +630,12 @@
       margin-bottom: $baseline;
 
       &:last-child {
-        @extend %wipe-last-child;
+        @extend %wipe-last-child !optional;
       }
 
       &.required {
         label {
-          @extend %t-strong;
+          @extend %t-strong !optional;
         }
 
         label::after {
@@ -655,7 +655,7 @@
       }
 
       label {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         @include transition(color, 0.15s, ease-in-out);
 
@@ -669,7 +669,7 @@
       //TO-DO: this section is borrowed from _account.scss - we should clean up and unify later
       input,
       textarea {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         height: 100%;
         width: 100%;
@@ -732,7 +732,7 @@
         }
 
         .action-upload-signature {
-          @extend %ui-btn-flat-outline;
+          @extend %ui-btn-flat-outline !optional;
 
           float: right;
           width: flex-grid(4, 12);
diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
index c9d593defcfb..f6ea1267ceee 100644
--- a/cms/static/sass/views/_container.scss
+++ b/cms/static/sass/views/_container.scss
@@ -9,12 +9,12 @@
 // view-specific utilities
 // --------------------
 %status-value-base {
-  @extend %t-title7;
-  @extend %t-strong;
+  @extend %t-title7 !optional;
+  @extend %t-strong !optional;
 }
 
 %status-value-sub1 {
-  @extend %t-title8;
+  @extend %t-title8 !optional;
 
   display: block;
 }
@@ -22,7 +22,7 @@
 // UI: container page view
 // --------------------
 .view-container {
-  @extend %two-col-1;
+  @extend %two-col-1 !optional;
 
   .wrapper-mast {
     .mast {
@@ -31,8 +31,8 @@
 
       .page-header {
         .page-header-title {
-          @extend %t-title4;
-          @extend %t-strong;
+          @extend %t-title4 !optional;
+          @extend %t-strong !optional;
         }
 
         .is-editable {
@@ -41,8 +41,8 @@
           .incontext-editor-input {
             @include transition(box-shadow $tmg-f1 ease-in-out 0, color $tmg-f1 ease-in-out 0);
 
-            @extend %t-title4;
-            @extend %t-strong;
+            @extend %t-title4 !optional;
+            @extend %t-strong !optional;
 
             width: 100%;
             background: none repeat scroll 0 0 $white;
@@ -70,8 +70,8 @@
       &.has-actions {
         .nav-actions {
           .button {
-            @extend %t-action3;
-            @extend %t-regular;
+            @extend %t-action3 !optional;
+            @extend %t-regular !optional;
 
             padding: ($baseline/4) ($baseline*0.75);
           }
@@ -82,7 +82,7 @@
 
   .content-primary {
     .no-container-content {
-      @extend %no-content;
+      @extend %no-content !optional;
 
       padding: ($baseline*1.5) ($baseline*2);
 
@@ -118,37 +118,37 @@
 
   .content-supplementary {
     label {
-      @extend %t-title8;
+      @extend %t-title8 !optional;
     }
 
     // UI: publishing details/summary
     .bit-publishing {
-      @extend %bar-module;
+      @extend %bar-module !optional;
 
       // CASE: content is ready to be made live
       &.is-ready {
-        @extend %bar-module-green;
+        @extend %bar-module-green !optional;
       }
 
       // CASE: content is live
       &.is-live {
-        @extend %bar-module-blue;
+        @extend %bar-module-blue !optional;
       }
 
       // CASE: content has warnings
       &.has-warnings {
-        @extend %bar-module-yellow;
+        @extend %bar-module-yellow !optional;
       }
 
       // CASE: content has erors
       &.has-errors {
-        @extend %bar-module-red;
+        @extend %bar-module-red !optional;
       }
 
       // CASE: content is staff only
       &.staff-only,
       &.is-staff-only {
-        @extend %bar-module-black;
+        @extend %bar-module-black !optional;
 
         &.is-scheduled .wrapper-release .copy {
           text-decoration: line-through;
@@ -157,7 +157,7 @@
 
       // CASE: content is gated
       &.is-gated {
-        @extend %bar-module-black;
+        @extend %bar-module-black !optional;
       }
 
       .bar-mod-content {
@@ -172,27 +172,27 @@
       .wrapper-last-draft {
         .date,
         .user {
-          @extend %t-strong;
+          @extend %t-strong !optional;
         }
 
         .user {
-          @extend %cont-text-wrap;
+          @extend %cont-text-wrap !optional;
         }
       }
 
       .wrapper-release {
         .release-date {
-          @extend %status-value-base;
+          @extend %status-value-base !optional;
         }
 
         .release-with {
-          @extend %status-value-sub1;
+          @extend %status-value-sub1 !optional;
         }
       }
 
       .wrapper-visibility {
         .copy {
-          @extend %status-value-base;
+          @extend %status-value-base !optional;
 
           margin-bottom: ($baseline/10);
         }
@@ -202,12 +202,12 @@
         }
 
         .inherited-from {
-          @extend %status-value-sub1;
+          @extend %status-value-sub1 !optional;
         }
 
         // UI: note about specific access
         .note-visibility {
-          @extend %status-value-sub1;
+          @extend %status-value-sub1 !optional;
 
           .icon {
             @include margin-right($baseline/4);
@@ -221,14 +221,14 @@
         padding: $baseline ($baseline*0.75) ($baseline*0.75) ($baseline*0.75);
 
         .action-publish {
-          @extend %btn-primary-blue;
+          @extend %btn-primary-blue !optional;
 
           display: block;
           padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
         }
 
         .action-discard {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
           display: block;
           margin-top: ($baseline/2);
@@ -250,18 +250,18 @@
         background-color: $white;
 
         .copy {
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           color: $gray-d2;
         }
 
         .date,
         .user {
-          @extend %t-strong;
+          @extend %t-strong !optional;
         }
 
         .user {
-          @extend %cont-text-wrap;
+          @extend %cont-text-wrap !optional;
         }
       }
     }
@@ -269,7 +269,7 @@
     // location widget
     .unit-location,
     .library-location {
-      @extend %bar-module;
+      @extend %bar-module !optional;
 
       border-top: none;
 
@@ -277,14 +277,14 @@
       .wrapper-library-id {
         .unit-id-value,
         .library-id-value {
-          @extend %status-value-base;
+          @extend %status-value-base !optional;
 
           display: inline-block;
           width: 100%;
         }
 
         .tip {
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           display: inline-block;
           margin: ($baseline/4) 0;
@@ -294,7 +294,7 @@
 
       .wrapper-unit-tree-location {
         .item-title {
-          @extend %cont-text-wrap;
+          @extend %cont-text-wrap !optional;
 
           a {
             color: theme-color("primary");
@@ -310,8 +310,8 @@
           background: $gray-l4;
 
           .unit-title a {
-            @extend %ui-disabled;
-            @extend %t-strong;
+            @extend %ui-disabled !optional;
+            @extend %t-strong !optional;
 
             color: $color-heading-base;
           }
diff --git a/cms/static/sass/views/_course-create.scss b/cms/static/sass/views/_course-create.scss
index 96301540c705..2508e2acf94e 100644
--- a/cms/static/sass/views/_course-create.scss
+++ b/cms/static/sass/views/_course-create.scss
@@ -31,7 +31,7 @@
     }
 
     .course-original-title-id {
-      @extend %t-title5;
+      @extend %t-title5 !optional;
     }
   }
 
@@ -55,7 +55,7 @@
     }
 
     label {
-      @extend %t-title7;
+      @extend %t-title7 !optional;
 
       display: block;
       font-weight: 700;
@@ -74,7 +74,7 @@
     }
 
     .rerun-course-name {
-      @extend %t-title5;
+      @extend %t-title5 !optional;
 
       font-weight: 300;
     }
@@ -119,13 +119,13 @@
       .action-primary {
         @include blue-button;
 
-        @extend %t-action2;
+        @extend %t-action2 !optional;
       }
 
       .action-secondary {
         @include grey-button;
 
-        @extend %t-action2;
+        @extend %t-action2 !optional;
       }
     }
   }
diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss
index 27e62c0c6e6d..f5e3649e6e0a 100644
--- a/cms/static/sass/views/_dashboard.scss
+++ b/cms/static/sass/views/_dashboard.scss
@@ -21,11 +21,11 @@
   }
 
   .content-primary {
-    @extend .ui-col-wide;
+    @extend .ui-col-wide !optional;
   }
 
   .content-supplementary {
-    @extend .ui-col-narrow;
+    @extend .ui-col-narrow !optional;
   }
 
   // ====================
@@ -55,8 +55,8 @@
 
         .action-create-course,
         .action-create-library {
-          @extend %btn-primary-green;
-          @extend %t-action3;
+          @extend %btn-primary-green !optional;
+          @extend %t-action3 !optional;
         }
       }
     }
@@ -69,8 +69,8 @@
     overflow: hidden;
 
     .ui-toggle-control {
-      @extend %ui-depth2;
-      @extend %btn-secondary-gray;
+      @extend %ui-depth2 !optional;
+      @extend %btn-secondary-gray !optional;
 
       @include clearfix();
 
@@ -84,7 +84,7 @@
       }
 
       .label {
-        @extend %t-action3;
+        @extend %t-action3 !optional;
 
         float: left;
         width: flex-grid(8, 9);
@@ -92,7 +92,7 @@
       }
 
       .fa-times-circle {
-        @extend %t-action1;
+        @extend %t-action1 !optional;
 
         @include transform(rotate(45deg));
         @include transform-origin(center center);
@@ -104,7 +104,7 @@
     }
 
     .ui-toggle-target {
-      @extend %ui-depth1;
+      @extend %ui-depth1 !optional;
 
       @include transition(opacity $tmg-f1 ease-in-out 0s);
 
@@ -137,8 +137,8 @@
     margin-top: $baseline;
 
     .title {
-      @extend %t-title7;
-      @extend %t-strong;
+      @extend %t-title7 !optional;
+      @extend %t-strong !optional;
 
       margin-bottom: ($baseline/4);
       color: $gray-d1;
@@ -149,8 +149,8 @@
       margin-top: ($baseline*0.75);
 
       .action-primary {
-        @extend %btn-primary-blue;
-        @extend %t-action3;
+        @extend %btn-primary-blue !optional;
+        @extend %t-action3 !optional;
       }
 
       // specific - request button
@@ -162,7 +162,7 @@
         .fa-cog {
           @include transition(all $tmg-f1 ease-in-out $tmg-f1);
 
-          @extend %t-icon4;
+          @extend %t-icon4 !optional;
 
           position: absolute;
           top: ($baseline/2);
@@ -199,7 +199,7 @@
 
     .status-update {
       .label {
-        @extend %cont-text-sr;
+        @extend %cont-text-sr !optional;
       }
 
       .value {
@@ -229,8 +229,8 @@
       }
 
       .value-formal {
-        @extend %t-title5;
-        @extend %t-strong;
+        @extend %t-title5 !optional;
+        @extend %t-strong !optional;
 
         margin: ($baseline/2);
 
@@ -240,7 +240,7 @@
       }
 
       .value-description {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         position: relative;
         color: $white;
@@ -251,7 +251,7 @@
     // CASE: rights are not requested yet
     &.is-unrequested {
       .title {
-        @extend %cont-text-sr;
+        @extend %cont-text-sr !optional;
       }
     }
 
@@ -329,7 +329,7 @@
   .libraries,
   .archived-courses {
     .title {
-      @extend %t-title6;
+      @extend %t-title6 !optional;
 
       margin-bottom: $baseline;
       border-bottom: 1px solid $gray-l3;
@@ -338,7 +338,7 @@
     }
 
     .title {
-      @extend %t-title6;
+      @extend %t-title6 !optional;
 
       margin-bottom: $baseline;
       border-bottom: 1px solid $gray-l3;
@@ -380,19 +380,19 @@
           }
 
           .icon {
-            @extend %t-icon4;
+            @extend %t-icon4 !optional;
 
             margin-right: ($baseline/2);
           }
 
           .copy {
-            @extend %t-copy-sub1;
+            @extend %t-copy-sub1 !optional;
           }
         }
       }
 
       .status-message {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         background-color: $gray-l5;
         box-shadow: 0 2px 2px 0 $shadow inset;
@@ -415,7 +415,7 @@
             text-align: right;
 
             .button {
-              @extend %btn-secondary-white;
+              @extend %btn-secondary-white !optional;
 
               padding: ($baseline/4) ($baseline/2);
             }
@@ -427,13 +427,13 @@
             }
 
             .icon {
-              @extend %t-icon4;
+              @extend %t-icon4 !optional;
 
               margin-right: ($baseline/4);
             }
 
             .button-copy {
-              @extend %t-copy-sub1;
+              @extend %t-copy-sub1 !optional;
             }
           }
         }
@@ -463,7 +463,7 @@
 
     // encompassing course link
     .course-link {
-      @extend %ui-depth2;
+      @extend %ui-depth2 !optional;
 
       width: flex-grid(6, 9);
 
@@ -472,7 +472,7 @@
 
     // course title
     .course-title {
-      @extend %t-title4;
+      @extend %t-title4 !optional;
 
       @include margin(0, ($baseline*2), ($baseline/4), 0);
 
@@ -481,7 +481,7 @@
 
     // course metadata
     .course-metadata {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       @include transition(opacity $tmg-f1 ease-in-out 0);
 
@@ -498,7 +498,7 @@
         }
 
         .label {
-          @extend %cont-text-sr;
+          @extend %cont-text-sr !optional;
         }
       }
 
@@ -508,7 +508,7 @@
     }
 
     .course-actions {
-      @extend %ui-depth3;
+      @extend %ui-depth3 !optional;
 
       position: static;
       width: flex-grid(3, 9);
@@ -527,7 +527,7 @@
       }
 
       .button {
-        @extend %t-action3;
+        @extend %t-action3 !optional;
       }
 
       // view live button
@@ -583,7 +583,7 @@
     }
 
     .wrapper-course {
-      @extend %ui-window;
+      @extend %ui-window !optional;
 
       position: relative;
     }
@@ -603,7 +603,7 @@
 
     // course details (replacement for course-link when a course cannot be linked)
     .course-details {
-      @extend %ui-depth2;
+      @extend %ui-depth2 !optional;
 
       display: inline-block;
       vertical-align: middle;
@@ -666,8 +666,8 @@
     }
 
     label {
-      @extend %t-title7;
-      @extend %t-strong;
+      @extend %t-title7 !optional;
+      @extend %t-strong !optional;
 
       display: block;
     }
@@ -689,8 +689,8 @@
     }
 
     .new-course-name {
-      @extend %t-title5;
-      @extend %t-light;
+      @extend %t-title5 !optional;
+      @extend %t-light !optional;
     }
 
     .new-course-save {
@@ -719,7 +719,7 @@
     }
 
     .message-status {
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       display: block;
       margin-bottom: 0;
diff --git a/cms/static/sass/views/_export-git.scss b/cms/static/sass/views/_export-git.scss
index b091a7b8d9ce..c2c9dcb62392 100644
--- a/cms/static/sass/views/_export-git.scss
+++ b/cms/static/sass/views/_export-git.scss
@@ -24,20 +24,20 @@
   }
 
   h3 {
-    @extend %t-title5;
-    @extend %t-strong;
+    @extend %t-title5 !optional;
+    @extend %t-strong !optional;
   }
 
   .export-git-info-block {
     dt {
-      @extend %t-copy-lead1;
-      @extend %t-strong;
+      @extend %t-copy-lead1 !optional;
+      @extend %t-strong !optional;
 
       margin-top: 12px;
     }
 
     dd {
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
 
       margin-bottom: $baseline;
     }
@@ -54,7 +54,7 @@
   // UI: introduction
   .introduction {
     .title {
-      @extend %cont-text-sr;
+      @extend %cont-text-sr !optional;
     }
   }
 
@@ -62,17 +62,17 @@
   .export-git-controls {
     box-sizing: border-box;
 
-    @extend %ui-window;
+    @extend %ui-window !optional;
 
     padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
 
     .title {
-      @extend %t-title4;
+      @extend %t-title4 !optional;
     }
 
     .action-export-git {
-      @extend %btn-primary-blue;
-      @extend %t-action1;
+      @extend %btn-primary-blue !optional;
+      @extend %t-action1 !optional;
 
       display: block;
       margin: $baseline 0;
@@ -81,7 +81,7 @@
 
     .action {
       .icon {
-        @extend %t-icon2;
+        @extend %t-icon2 !optional;
 
         display: inline-block;
         vertical-align: middle;
diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss
index fb14a5f63f4b..fc8be493ee47 100644
--- a/cms/static/sass/views/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -10,18 +10,18 @@
   }
 
   .content-primary {
-    @extend .ui-col-wide;
+    @extend .ui-col-wide !optional;
   }
 
   .content-supplementary {
-    @extend .ui-col-narrow;
+    @extend .ui-col-narrow !optional;
   }
 
 
   // UI: introduction
   .introduction {
     .title {
-      @extend %cont-text-sr;
+      @extend %cont-text-sr !optional;
     }
   }
 
@@ -29,17 +29,17 @@
   .export-controls {
     box-sizing: border-box;
 
-    @extend %ui-window;
+    @extend %ui-window !optional;
 
     padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
 
     .title {
-      @extend %t-title4;
+      @extend %t-title4 !optional;
     }
 
     .action-export {
-      @extend %btn-primary-blue;
-      @extend %t-action1;
+      @extend %btn-primary-blue !optional;
+      @extend %t-action1 !optional;
 
       display: block;
       margin: $baseline 0;
@@ -48,7 +48,7 @@
 
     .action {
       .icon {
-        @extend %t-icon2;
+        @extend %t-icon2 !optional;
 
         display: inline-block;
         vertical-align: middle;
@@ -74,8 +74,8 @@
       width: flex-grid(4, 9);
 
       .item-detail {
-        @extend %t-copy-sub1;
-        @extend %wipe-last-child;
+        @extend %t-copy-sub1 !optional;
+        @extend %wipe-last-child !optional;
 
         padding-bottom: ($baseline/4);
         border-bottom: 1px solid $gray-l4;
@@ -107,7 +107,7 @@
     }
 
     > .title {
-      @extend %t-title4;
+      @extend %t-title4 !optional;
 
       margin-bottom: $baseline;
       border-bottom: 1px solid $gray-l3;
@@ -125,7 +125,7 @@
         .icon {
           @include transition(opacity $tmg-f1 ease-in-out 0);
 
-          @extend %t-icon4;
+          @extend %t-icon4 !optional;
 
           position: absolute;
           top: ($baseline/2);
@@ -139,12 +139,12 @@
         margin-left: ($baseline*3);
 
         .title {
-          @extend %t-title5;
-          @extend %t-strong;
+          @extend %t-title5 !optional;
+          @extend %t-strong !optional;
         }
 
         .copy {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
 
           color: $gray-l2;
         }
@@ -170,7 +170,7 @@
             display: none;
 
             .action-primary {
-              @extend %btn-primary-blue;
+              @extend %btn-primary-blue !optional;
             }
           }
         }
diff --git a/cms/static/sass/views/_group-configuration.scss b/cms/static/sass/views/_group-configuration.scss
index 95d332de78ea..fd693cf9646c 100644
--- a/cms/static/sass/views/_group-configuration.scss
+++ b/cms/static/sass/views/_group-configuration.scss
@@ -14,8 +14,8 @@
     width: flex-grid(9, 12);
 
     .notice-moduledisabled {
-      @extend %ui-well;
-      @extend %t-copy-base;
+      @extend %ui-well !optional;
+      @extend %t-copy-base !optional;
 
       background-color: $white;
       padding: ($baseline*1.5) $baseline;
@@ -23,7 +23,7 @@
     }
 
     .no-content {
-      @extend %no-content;
+      @extend %no-content !optional;
 
       color: $gray-d1;
     }
@@ -32,19 +32,19 @@
       margin-bottom: ($baseline*1.5);
 
       .title {
-        @extend %t-title4;
-        @extend %t-strong;
+        @extend %t-title4 !optional;
+        @extend %t-strong !optional;
 
         margin-bottom: ($baseline/2);
       }
 
       .copy {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
       }
     }
 
     .wrapper-collection {
-      @extend %ui-window;
+      @extend %ui-window !optional;
 
       position: relative;
       outline: none;
@@ -63,9 +63,9 @@
         padding-bottom: 0;
 
         .title {
-          @extend %cont-truncated;
-          @extend %t-title5;
-          @extend %t-strong;
+          @extend %cont-truncated !optional;
+          @extend %t-title5 !optional;
+          @extend %t-strong !optional;
 
           @include margin-right($baseline*14);
 
@@ -85,7 +85,7 @@
             .ui-toggle-expansion {
               @include transition(rotate 0.15s ease-in-out 0.25s);
 
-              @extend %t-action1;
+              @extend %t-action1 !optional;
 
               @include margin-left(-$baseline);
 
@@ -102,7 +102,7 @@
             }
 
             &.is-selectable {
-              @extend %ui-fake-link;
+              @extend %ui-fake-link !optional;
 
               &:hover {
                 color: $blue;
@@ -117,7 +117,7 @@
       }
 
       .collection-info {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         @include margin-left($baseline);
 
@@ -184,7 +184,7 @@
         margin-bottom: ($baseline*0.75);
 
         .item {
-          @extend %t-copy-lead1;
+          @extend %t-copy-lead1 !optional;
 
           padding: ($baseline/7) 0 ($baseline/4);
           border-top: 1px solid $gray-l4;
@@ -222,11 +222,11 @@
             vertical-align: middle;
 
             .edit {
-              @extend %ui-btn-non-blue;
+              @extend %ui-btn-non-blue !optional;
             }
 
             .delete {
-              @extend %ui-btn-non;
+              @extend %ui-btn-non !optional;
 
               &.is-disabled {
                 background-color: $gray-l3;
@@ -238,7 +238,7 @@
       }
 
       .collection-references {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         @include padding($baseline, $baseline*1.5, $baseline, $baseline*2.5);
 
@@ -252,7 +252,7 @@
             padding: ($baseline/4) 0;
 
             a {
-              @extend %t-strong;
+              @extend %t-strong !optional;
             }
 
             .fa-warning {
@@ -271,7 +271,7 @@
       }
 
       .usage-validation {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         @include padding($baseline, $baseline*1.5, $baseline, $baseline*1.5);
 
@@ -305,7 +305,7 @@
         }
 
         .tip {
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           @include transition(color, 0.15s, ease-in-out);
 
@@ -320,7 +320,7 @@
 
 
         .collection-fields {
-          @extend %cont-no-list;
+          @extend %cont-no-list !optional;
 
           margin-bottom: $baseline;
         }
@@ -329,12 +329,12 @@
           @include margin(0, 0, $baseline*0.75, 0);
 
           &:last-child {
-            @extend %wipe-last-child;
+            @extend %wipe-last-child !optional;
           }
 
           &.required {
             label {
-              @extend %t-strong;
+              @extend %t-strong !optional;
             }
 
             label::after {
@@ -355,7 +355,7 @@
           }
 
           label {
-            @extend %t-copy-sub1;
+            @extend %t-copy-sub1 !optional;
 
             @include transition(color, 0.15s, ease-in-out);
             @include margin(0, 0, $baseline/4, 0);
@@ -368,7 +368,7 @@
           //this section is borrowed from _account.scss - we should clean up and unify later
           input,
           textarea {
-            @extend %t-copy-base;
+            @extend %t-copy-base !optional;
 
             height: 100%;
             width: 100%;
@@ -417,7 +417,7 @@
         }
 
         label.required {
-          @extend %t-strong;
+          @extend %t-strong !optional;
 
           &::after {
             @include margin-left($baseline/4);
@@ -430,7 +430,7 @@
           label {
             width: 50%;
 
-            @extend %t-title5;
+            @extend %t-title5 !optional;
 
             display: inline-block;
             vertical-align: bottom;
@@ -445,7 +445,7 @@
             color: $gray-l1;
 
             .group-configuration-value {
-              @extend %t-strong;
+              @extend %t-strong !optional;
 
               @include margin-left($baseline*0.5);
 
@@ -471,13 +471,13 @@
 
           // add a group is below with groups styling
           .action-primary {
-            @extend %btn-primary-blue;
+            @extend %btn-primary-blue !optional;
 
             padding: ($baseline/4) $baseline;
           }
 
           .action-secondary {
-            @extend %btn-secondary-gray;
+            @extend %btn-secondary-gray !optional;
 
             padding: ($baseline/4) $baseline;
           }
@@ -494,22 +494,22 @@
         }
 
         .copy {
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           @include margin($baseline, 0, $baseline/2, 0);
 
           color: $gray;
 
           strong {
-            @extend %t-strong;
+            @extend %t-strong !optional;
           }
         }
       }
 
       .action-add-item {
-        @extend %ui-btn-flat-outline;
-        @extend %t-action2;
-        @extend %t-strong;
+        @extend %ui-btn-flat-outline !optional;
+        @extend %t-action2 !optional;
+        @extend %t-strong !optional;
 
         @include margin($baseline*1.5, 0, 0, 0);
 
@@ -521,7 +521,7 @@
 
     // add/new collection
     .action-add {
-      @extend %ui-btn-flat-outline;
+      @extend %ui-btn-flat-outline !optional;
 
       display: block;
       width: 100%;
@@ -552,7 +552,7 @@
     .experiment-groups {
       .group-configuration-details {
         .group-configuration-info {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
           @include margin-left($baseline);
 
@@ -574,7 +574,7 @@
           margin-bottom: ($baseline*0.75);
 
           .group {
-            @extend %t-copy-lead1;
+            @extend %t-copy-lead1 !optional;
 
             padding: ($baseline/7) 0 ($baseline/4);
             border-top: 1px solid $gray-l4;
@@ -649,7 +649,7 @@
           .action-close {
             @include transition(color $tmg-f2 ease-in-out);
 
-            @extend %t-action1;
+            @extend %t-action1 !optional;
 
             display: inline-block;
             border: 0;
diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss
index a861afdcfa95..6be1ecc865b9 100644
--- a/cms/static/sass/views/_import.scss
+++ b/cms/static/sass/views/_import.scss
@@ -8,16 +8,16 @@
   }
 
   .content-primary {
-    @extend .ui-col-wide;
+    @extend .ui-col-wide !optional;
   }
 
   .content-supplementary {
-    @extend .ui-col-narrow;
+    @extend .ui-col-narrow !optional;
   }
 
   // UI: export controls
   .export-controls {
-    @extend %ui-window;
+    @extend %ui-window !optional;
 
     @include clearfix();
 
@@ -28,12 +28,12 @@
   .import-form {
     box-sizing: border-box;
 
-    @extend %ui-window;
+    @extend %ui-window !optional;
 
     padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
 
     > .title {
-      @extend %t-title4;
+      @extend %t-title4 !optional;
     }
 
     .file-name-block,
@@ -55,15 +55,15 @@
 
   // UI: default
   .action-choose-file {
-    @extend %btn-primary-green;
-    @extend %t-action1;
+    @extend %btn-primary-green !optional;
+    @extend %t-action1 !optional;
 
     display: block;
     margin: $baseline 0;
     padding: ($baseline*0.75) $baseline;
 
     .icon {
-      @extend %t-icon2;
+      @extend %t-icon2 !optional;
 
       display: inline-block;
       vertical-align: middle;
@@ -80,14 +80,14 @@
 
   // UI: elem - file selection
   .wrapper-file-name {
-    @extend %ui-well;
+    @extend %ui-well !optional;
 
     margin: $baseline 0;
     padding: $baseline ($baseline*1.5);
     background-color: $gray-l4;
 
     .title {
-      @extend %t-copy-lead1;
+      @extend %t-copy-lead1 !optional;
 
       overflow-x: hidden;
       text-overflow: ellipsis;
@@ -98,14 +98,14 @@
       }
 
       .file-name {
-        @extend %t-strong;
+        @extend %t-strong !optional;
       }
     }
 
     // artifact styling needed for current page behavior logic
     .submit-button {
-      @extend %btn-primary-green;
-      @extend %t-action1;
+      @extend %btn-primary-green !optional;
+      @extend %t-action1 !optional;
 
       display: none;
       margin-top: ($baseline*0.75);
@@ -129,7 +129,7 @@
     }
 
     > .title {
-      @extend %t-title4;
+      @extend %t-title4 !optional;
 
       margin-bottom: $baseline;
       border-bottom: 1px solid $gray-l3;
@@ -147,7 +147,7 @@
         .icon {
           @include transition(opacity $tmg-f1 ease-in-out 0);
 
-          @extend %t-icon4;
+          @extend %t-icon4 !optional;
 
           position: absolute;
           top: ($baseline/2);
@@ -161,12 +161,12 @@
         margin-left: ($baseline*3);
 
         .title {
-          @extend %t-title5;
-          @extend %t-strong;
+          @extend %t-title5 !optional;
+          @extend %t-strong !optional;
         }
 
         .copy {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
 
           color: $gray-l2;
         }
@@ -192,7 +192,7 @@
             display: none;
 
             .action-primary {
-              @extend %btn-primary-blue;
+              @extend %btn-primary-blue !optional;
             }
           }
         }
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index 7f7525aca427..815d4abc4b7b 100644
--- a/cms/static/sass/views/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -18,7 +18,7 @@
     }
 
     .content {
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
 
       @include clearfix();
 
@@ -58,8 +58,8 @@
       color: $white;
 
       h1 {
-        @extend %t-title2;
-        @extend %t-strong;
+        @extend %t-title2 !optional;
+        @extend %t-strong !optional;
 
         float: none;
         margin: 0 0 ($baseline/2) 0;
@@ -74,13 +74,13 @@
       }
 
       .logo {
-        @extend %t-strong;
+        @extend %t-strong !optional;
 
         margin-left: ($baseline/2);
       }
 
       .tagline {
-        @extend %t-title4;
+        @extend %t-title4 !optional;
 
         margin: 0;
         color: $blue-l3;
@@ -165,7 +165,7 @@
               .icon {
                 @include border-top-radius(3px);
 
-                @extend %t-icon4;
+                @extend %t-icon4 !optional;
 
                 display: inline-block;
                 padding: ($baseline/2);
@@ -198,26 +198,26 @@
           margin-top: -($baseline/4);
 
           h3 {
-            @extend %t-title4;
-            @extend %t-strong;
+            @extend %t-title4 !optional;
+            @extend %t-strong !optional;
 
             margin: 0 0 ($baseline/2) 0;
           }
 
           > p {
-            @extend %t-copy-lead1;
+            @extend %t-copy-lead1 !optional;
 
             color: $gray-d1;
           }
 
           strong {
-            @extend %t-strong;
+            @extend %t-strong !optional;
 
             color: $gray-d2;
           }
 
           .list-proofpoints {
-            @extend %t-copy-sub1;
+            @extend %t-copy-sub1 !optional;
 
             @include clearfix();
 
@@ -240,15 +240,15 @@
               color: $gray-d1;
 
               .title {
-                @extend %t-copy-base;
-                @extend %t-strong;
+                @extend %t-copy-base !optional;
+                @extend %t-strong !optional;
 
                 margin: 0 0 ($baseline/4) 0;
                 color: $gray-d3;
               }
 
               &:hover {
-                @extend %ui-fake-link;
+                @extend %ui-fake-link !optional;
 
                 box-shadow: 0 1px ($baseline/10) $shadow-l1;
                 background: $blue-l5;
@@ -334,8 +334,8 @@
           &.action-primary {
             @include blue-button;
 
-            @extend %t-action1;
-            @extend %t-strong;
+            @extend %t-action1 !optional;
+            @extend %t-strong !optional;
 
             padding: ($baseline*0.75) ($baseline/2);
             text-align: center;
@@ -343,7 +343,7 @@
           }
 
           &.action-secondary {
-            @extend %t-action3;
+            @extend %t-action3 !optional;
 
             margin-top: ($baseline/2);
           }
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 01534b54808e..19afd34225b3 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -76,15 +76,15 @@
   }
 
   .content-primary {
-    @extend .ui-col-wide;
+    @extend .ui-col-wide !optional;
 
     .no-content {
-      @extend %no-content;
+      @extend %no-content !optional;
     }
   }
 
   .content-supplementary {
-    @extend .ui-col-narrow;
+    @extend .ui-col-narrow !optional;
   }
 
 
@@ -121,7 +121,7 @@
   // forms
   .new-section-name,
   .new-subsection-name-input {
-    @extend %t-copy-base;
+    @extend %t-copy-base !optional;
 
     display: inline-block;
     width: 515px;
@@ -130,7 +130,7 @@
   }
 
   .new-subsection-name-input {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
   }
 
   .new-section-name-save,
@@ -153,7 +153,7 @@
   // buttons
   .new-subsection-item,
   .new-unit-item {
-    @extend %ui-btn-flat-outline;
+    @extend %ui-btn-flat-outline !optional;
 
     width: 100%;
     margin: 0 0 ($baseline/2) 0;
@@ -175,7 +175,7 @@
   // UI: general action list styles (section and subsection)
   // --------------------
   .expand-collapse {
-    @extend %expand-collapse;
+    @extend %expand-collapse !optional;
   }
 
   // course status
@@ -186,7 +186,7 @@
     .status-release,
     .status-highlights-enabled,
     .status-studio-frontend {
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
 
       display: inline-block;
       color: $color-copy-base;
@@ -217,7 +217,7 @@
 
     .status-release-value,
     .status-highlights-enabled-value {
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       font-size: smaller;
     }
@@ -233,15 +233,15 @@
     }
 
     .status-highlights-enabled-value.button {
-      @extend %btn-primary-blue;
-      @extend %sizing;
+      @extend %btn-primary-blue !optional;
+      @extend %sizing !optional;
 
       padding: 5px 8px;
       margin-top: 2px;
     }
 
     .status-actions {
-      @extend %actions-list;
+      @extend %actions-list !optional;
 
       @include transition(opacity $tmg-f1 ease-in-out 0);
 
@@ -315,11 +315,11 @@
 
       // header
       .section-header {
-        @extend %outline-item-header;
+        @extend %outline-item-header !optional;
 
         .incontext-editor-input {
-          @extend %t-strong;
-          @extend %t-title5;
+          @extend %t-strong !optional;
+          @extend %t-title5 !optional;
         }
       }
 
@@ -362,8 +362,8 @@
         @include text-align(right);
 
         .actions-list {
-          @extend %actions-list;
-          @extend %t-action2;
+          @extend %actions-list !optional;
+          @extend %t-action2 !optional;
         }
       }
 
@@ -379,15 +379,15 @@
 
       // content
       .section-content {
-        @extend %outline-item-content-shown;
+        @extend %outline-item-content-shown !optional;
       }
 
       // CASE: is-collapsible
       &.is-collapsible {
-        @extend %ui-expand-collapse;
+        @extend %ui-expand-collapse !optional;
 
         .ui-toggle-expansion {
-          @extend %t-icon3;
+          @extend %t-icon3 !optional;
 
           color: $gray-l3;
         }
@@ -396,7 +396,7 @@
       // STATE: is-collapsed
       &.is-collapsed {
         .section-content {
-          @extend %outline-item-content-hidden;
+          @extend %outline-item-content-hidden !optional;
         }
       }
 
@@ -417,10 +417,10 @@
 
       // header
       .subsection-header {
-        @extend %outline-item-header;
+        @extend %outline-item-header !optional;
 
         .incontext-editor-input {
-          @extend %t-title6;
+          @extend %t-title6 !optional;
         }
       }
 
@@ -464,13 +464,13 @@
         @include text-align(right);
 
         .actions-list {
-          @extend %actions-list;
-          @extend %t-action2;
+          @extend %actions-list !optional;
+          @extend %t-action2 !optional;
 
           margin-right: ($baseline/2);
 
           .proctoring-configuration-button {
-            @extend %ui-btn-flat-outline;
+            @extend %ui-btn-flat-outline !optional;
           }
         }
       }
@@ -487,15 +487,15 @@
 
       // content
       .subsection-content {
-        @extend %outline-item-content-shown;
+        @extend %outline-item-content-shown !optional;
       }
 
       // CASE: is-collapsible
       &.is-collapsible {
-        @extend %ui-expand-collapse;
+        @extend %ui-expand-collapse !optional;
 
         .ui-toggle-expansion {
-          @extend %t-icon4;
+          @extend %t-icon4 !optional;
 
           color: $gray-l3;
         }
@@ -504,7 +504,7 @@
       // STATE: is-collapsed
       &.is-collapsed {
         .subsection-content {
-          @extend %outline-item-content-hidden;
+          @extend %outline-item-content-hidden !optional;
         }
       }
     }
@@ -522,7 +522,7 @@
 
       // header
       .unit-header {
-        @extend %outline-item-header;
+        @extend %outline-item-header !optional;
       }
 
       .unit-header-details {
@@ -541,8 +541,8 @@
         @include text-align(right);
 
         .actions-list {
-          @extend %actions-list;
-          @extend %t-action2;
+          @extend %actions-list !optional;
+          @extend %t-action2 !optional;
         }
       }
     }
@@ -552,7 +552,7 @@
       margin-top: ($baseline*0.75);
 
       .button-new {
-        @extend %ui-btn-flat-outline;
+        @extend %ui-btn-flat-outline !optional;
 
         padding: ($baseline/2) $baseline;
         display: block;
@@ -627,7 +627,7 @@
     position: relative;
 
     .draggable-drop-indicator {
-      @extend %ui-depth3;
+      @extend %ui-depth3 !optional;
 
       @include transition(opacity $tmg-f2 linear 0s);
       @include size(100%, auto);
@@ -637,7 +637,7 @@
       opacity: 0;
 
       .fa-caret-right {
-        @extend %t-icon5;
+        @extend %t-icon5 !optional;
 
         position: absolute;
         top: -12px;
@@ -718,7 +718,7 @@
         }
 
         label {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
           @include transition(color $tmg-f3 ease-in-out 0s);
 
@@ -733,7 +733,7 @@
 
         input,
         textarea {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
 
           @include transition(all $tmg-f2 ease-in-out 0s);
 
@@ -807,7 +807,7 @@
     }
 
     .outline-subsection .subsection-title {
-      @extend %t-title8;
+      @extend %t-title8 !optional;
 
       margin-bottom: ($baseline/4);
       font-weight: 600;
@@ -822,13 +822,13 @@
     }
 
     .outline-unit .unit-title {
-      @extend %t-title7;
+      @extend %t-title7 !optional;
 
       color: $color-heading-base;
     }
 
     .outline-unit .unit-status {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       text-align: right;
     }
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index de7c156cd9e9..0bdd1bbe463d 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -16,15 +16,15 @@
   }
 
   .content-primary {
-    @extend %ui-window;
-    @extend .ui-col-wide;
+    @extend %ui-window !optional;
+    @extend .ui-col-wide !optional;
 
     padding: $baseline ($baseline*1.5);
   }
 
   // messages - should be synced up with global messages in the future
   .message {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     display: block;
   }
@@ -34,7 +34,7 @@
 
     box-sizing: border-box;
 
-    @extend %t-strong;
+    @extend %t-strong !optional;
 
     display: none;
     border-bottom: 2px solid $yellow;
@@ -75,8 +75,8 @@
     .is-not-editable {
       input,
       textarea {
-        @extend %t-copy-lead1;
-        @extend %t-strong;
+        @extend %t-copy-lead1 !optional;
+        @extend %t-strong !optional;
 
         box-shadow: none;
         border: none;
@@ -103,7 +103,7 @@
       }
 
       .tip {
-        @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
         width: flex-grid(5, 9);
 
@@ -127,13 +127,13 @@
     }
 
     .instructions {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       margin: 0 0 $baseline 0;
     }
 
     .tip {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       @include transition(color $tmg-f2 ease-in-out 0s);
 
@@ -149,7 +149,7 @@
     }
 
     .message-error {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       display: block;
       margin-top: ($baseline/4);
@@ -161,17 +161,17 @@
     .remove-item {
       @include white-button;
 
-      @extend %t-action3;
-      @extend %t-strong;
+      @extend %t-action3 !optional;
+      @extend %t-strong !optional;
     }
 
     .new-button {
-      @extend %t-action3;
+      @extend %t-action3 !optional;
     }
 
     // form basics
     .list-input {
-      @extend %cont-no-list;
+      @extend %cont-no-list !optional;
 
       .show-data {
         .heading {
@@ -213,7 +213,7 @@
 
         &.required {
           label {
-            @extend %t-strong;
+            @extend %t-strong !optional;
           }
 
           label::after {
@@ -231,8 +231,8 @@
         label {
           @include transition(color $tmg-f2 ease-in-out 0s);
 
-          @extend %t-copy-sub1;
-          @extend %t-strong;
+          @extend %t-copy-sub1 !optional;
+          @extend %t-strong !optional;
 
           margin: 0 0 ($baseline/4) 0;
 
@@ -243,7 +243,7 @@
 
         input,
         textarea {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
 
           @include placeholder($gray-l4);
           @include size(100%, 100%);
@@ -393,7 +393,7 @@
         padding: ($baseline/2) 0 0 0;
 
         .title {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
           margin: 0 0 ($baseline/10) 0;
           padding: 0 ($baseline/2);
@@ -408,7 +408,7 @@
           padding: 0 ($baseline/2) ($baseline/2) ($baseline/2);
 
           .link-courseURL {
-            @extend %t-copy-lead1;
+            @extend %t-copy-lead1 !optional;
 
             box-sizing: border-box;
             display: block;
@@ -431,12 +431,12 @@
           background: $gray-l5;
 
           .action-primary {
-            @extend %btn-primary-blue;
-            @extend %t-action3;
-            @extend %t-strong;
+            @extend %btn-primary-blue !optional;
+            @extend %t-action3 !optional;
+            @extend %t-strong !optional;
 
             .icon {
-              @extend %t-icon5;
+              @extend %t-icon5 !optional;
 
               display: inline-block;
               vertical-align: middle;
@@ -567,7 +567,7 @@
         }
 
         .msg {
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           display: block;
           margin-top: ($baseline/2);
@@ -587,7 +587,7 @@
         }
 
         .action-upload-image {
-          @extend %ui-btn-flat-outline;
+          @extend %ui-btn-flat-outline !optional;
 
           @include float(right);
 
@@ -735,7 +735,7 @@
               }
 
               .remove-button {
-                @extend %t-action5;
+                @extend %t-action5 !optional;
 
                 display: none;
                 position: absolute;
@@ -766,8 +766,8 @@
               }
 
               .letter-grade {
-                @extend %t-copy-base;
-                @extend %t-strong;
+                @extend %t-copy-base !optional;
+                @extend %t-strong !optional;
 
                 display: block;
                 margin: 5px 15px 0 0;
@@ -856,7 +856,7 @@
         width: flex-grid(9, 9);
 
         .new-button {
-          @extend %btn-primary-green;
+          @extend %btn-primary-green !optional;
         }
 
         .delete-button {
@@ -888,7 +888,7 @@
         width: flex-grid(9, 9);
 
         .new-button {
-          @extend %btn-primary-green;
+          @extend %btn-primary-green !optional;
         }
 
         .delete-button {
@@ -971,7 +971,7 @@
           }
 
           .msg {
-            @extend %t-copy-sub2;
+            @extend %t-copy-sub2 !optional;
 
             display: block;
             margin-top: ($baseline/2);
@@ -991,7 +991,7 @@
           }
 
           .action-upload-instructor-image {
-            @extend %ui-btn-flat-outline;
+            @extend %ui-btn-flat-outline !optional;
 
             float: right;
             width: flex-grid(2, 9);
@@ -1006,7 +1006,7 @@
         width: flex-grid(9, 9);
 
         .new-button {
-          @extend %btn-primary-green;
+          @extend %btn-primary-green !optional;
         }
 
         .delete-button {
@@ -1066,7 +1066,7 @@
         position: relative;
 
         .title {
-          @extend %t-strong;
+          @extend %t-strong !optional;
 
           margin-top: ($baseline/2);
         }
@@ -1127,7 +1127,7 @@
 
       // 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 !optional;
 
         box-sizing: border-box;
         box-shadow: 0 1px 2px $shadow-l1 inset;
@@ -1181,7 +1181,7 @@
   }
 
   .content-supplementary {
-    @extend .ui-col-narrow;
+    @extend .ui-col-narrow !optional;
   }
 
   .wrapper-modal-window {
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index 4854736342fe..129f2f83dafb 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -15,7 +15,7 @@
     margin-right: flex-gutter();
 
     .add-pages {
-      @extend %no-content;
+      @extend %no-content !optional;
 
       margin: ($baseline*1.5) 0;
       color: $gray-d1;
@@ -26,7 +26,7 @@
       box-shadow: none;
 
       .copy {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         opacity: 1;
       }
@@ -135,7 +135,7 @@
     }
 
     .wrapper-component-editor {
-      @extend %ui-depth4;
+      @extend %ui-depth4 !optional;
 
       position: relative;
       background: $lightBluishGrey2;
@@ -207,7 +207,7 @@
     }
 
     .drag-handle {
-      @extend %ui-depth1;
+      @extend %ui-depth1 !optional;
 
       @include right(0);
 
@@ -305,7 +305,7 @@
     background: $white;
 
     &.is-fixed {
-      @extend %ui-disabled;
+      @extend %ui-disabled !optional;
 
       @include transition(opacity $tmg-f2 ease-in-out 0s);
 
@@ -317,11 +317,11 @@
       width: 80%;
 
       .title {
-        @extend %t-title4;
+        @extend %t-title4 !optional;
       }
 
       .title-sub {
-        @extend %t-title7;
+        @extend %t-title7 !optional;
 
         color: $gray-l2;
       }
@@ -349,7 +349,7 @@
   .xblock-student_view {
     @include transition(background-color $tmg-s3 linear 0s);
 
-    @extend %t-title4;
+    @extend %t-title4 !optional;
 
     padding: 20px 20px 22px;
     background: $white;
@@ -365,8 +365,8 @@
     box-shadow: 0 1px 2px $shadow-l1;
 
     .page-name {
-      @extend %t-title5;
-      @extend %t-strong;
+      @extend %t-title5 !optional;
+      @extend %t-strong !optional;
     }
 
     .item-actions {
@@ -382,7 +382,7 @@
   }
 
   .static-page-details {
-    @extend %ui-window;
+    @extend %ui-window !optional;
 
     padding: 32px 40px;
 
@@ -392,7 +392,7 @@
   }
 
   .page-display-name-input {
-    @extend %t-copy-lead1;
+    @extend %t-copy-lead1 !optional;
 
     width: 100%;
   }
@@ -402,7 +402,7 @@
 
     @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
 
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     width: 100%;
     height: 360px;
diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss
index 47abc978a03e..e48d8e4f5d44 100644
--- a/cms/static/sass/views/_textbooks.scss
+++ b/cms/static/sass/views/_textbooks.scss
@@ -8,16 +8,16 @@
   }
 
   .content-primary {
-    @extend .ui-col-wide;
+    @extend .ui-col-wide !optional;
 
     .no-textbook-content {
-      @extend %no-content;
+      @extend %no-content !optional;
 
       color: $gray-d1;
     }
 
     .textbook {
-      @extend %ui-window;
+      @extend %ui-window !optional;
 
       position: relative;
 
@@ -30,8 +30,8 @@
         }
 
         .textbook-title {
-          @extend %t-title4;
-          @extend %t-strong;
+          @extend %t-title4 !optional;
+          @extend %t-strong !optional;
 
           @include margin-right($baseline*14);
         }
@@ -39,7 +39,7 @@
         .ui-toggle-expansion {
           @include transition(rotate 0.15s ease-in-out 0.25s);
 
-          @extend %t-action1;
+          @extend %t-action1 !optional;
 
           display: inline-block;
           width: ($baseline*0.75);
@@ -47,7 +47,7 @@
         }
 
         &.is-selectable {
-          @extend %ui-fake-link;
+          @extend %ui-fake-link !optional;
 
           &:hover {
             color: theme-color("primary");
@@ -62,7 +62,7 @@
           margin-left: $baseline;
 
           .chapter {
-            @extend %t-copy-sub2;
+            @extend %t-copy-sub2 !optional;
 
             margin-bottom: ($baseline/4);
             border-bottom: 1px solid $gray-l4;
@@ -101,17 +101,17 @@
             .view {
               @include blue-button;
 
-              @extend %t-action4;
+              @extend %t-action4 !optional;
             }
 
             .edit {
               @include blue-button;
 
-              @extend %t-action4;
+              @extend %t-action4 !optional;
             }
 
             .delete {
-              @extend %ui-btn-non;
+              @extend %ui-btn-non !optional;
             }
           }
         }
@@ -156,8 +156,8 @@
             @include blue-button;
             @include transition(all 0.15s);
 
-            @extend %t-action2;
-            @extend %t-strong;
+            @extend %t-action2 !optional;
+            @extend %t-strong !optional;
 
             display: inline-block;
             padding: ($baseline/5) $baseline;
@@ -168,8 +168,8 @@
             @include grey-button;
             @include transition(all 0.15s);
 
-            @extend %t-action2;
-            @extend %t-strong;
+            @extend %t-action2 !optional;
+            @extend %t-strong !optional;
 
             display: inline-block;
             padding: ($baseline/5) $baseline;
@@ -178,19 +178,19 @@
         }
 
         .copy {
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
 
           margin: ($baseline) 0 ($baseline/2) 0;
           color: $gray;
 
           strong {
-            @extend %t-strong;
+            @extend %t-strong !optional;
           }
         }
 
         .chapters-fields,
         .textbook-fields {
-          @extend %cont-no-list;
+          @extend %cont-no-list !optional;
 
           .field {
             margin: 0 0 ($baseline*0.75) 0;
@@ -201,7 +201,7 @@
 
             &.required {
               label {
-                @extend %t-strong;
+                @extend %t-strong !optional;
               }
 
               label::after {
@@ -217,7 +217,7 @@
             }
 
             label {
-              @extend %t-copy-sub1;
+              @extend %t-copy-sub1 !optional;
 
               @include transition(color, 0.15s, ease-in-out);
 
@@ -229,14 +229,14 @@
             }
 
             &.add-textbook-name label {
-              @extend %t-title5;
+              @extend %t-title5 !optional;
             }
 
 
             //this section is borrowed from _account.scss - we should clean up and unify later
             input,
             textarea {
-              @extend %t-copy-base;
+              @extend %t-copy-base !optional;
 
               height: 100%;
               width: 100%;
@@ -289,7 +289,7 @@
             }
 
             .tip {
-              @extend %t-copy-sub2;
+              @extend %t-copy-sub2 !optional;
 
               @include transition(color, 0.15s, ease-in-out);
 
@@ -333,7 +333,7 @@
               }
 
               .action-upload {
-                @extend %ui-btn-flat-outline;
+                @extend %ui-btn-flat-outline !optional;
 
                 position: absolute;
                 top: 3px;
@@ -345,7 +345,7 @@
             .action-close {
               @include transition(color $tmg-f2 ease-in-out);
 
-              @extend %t-action1;
+              @extend %t-action1 !optional;
 
               display: inline-block;
               float: right;
@@ -364,8 +364,8 @@
 
 
         .action-add-chapter {
-          @extend %ui-btn-flat-outline;
-          @extend %t-action1;
+          @extend %ui-btn-flat-outline !optional;
+          @extend %t-action1 !optional;
 
           display: block;
           width: 100%;
@@ -377,6 +377,6 @@
   }
 
   .content-supplementary {
-    @extend .ui-col-narrow;
+    @extend .ui-col-narrow !optional;
   }
 }
diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss
index 96e3129c328a..2fb6d3c9da95 100644
--- a/cms/static/sass/views/_updates.scss
+++ b/cms/static/sass/views/_updates.scss
@@ -40,7 +40,7 @@
     }
 
     &.editing {
-      @extend %ui-depth4;
+      @extend %ui-depth4 !optional;
 
       position: relative;
       padding: 0;
@@ -54,15 +54,15 @@
     }
 
     h1 {
-      @extend %t-title4;
-      @extend %t-light;
+      @extend %t-title4 !optional;
+      @extend %t-light !optional;
 
       float: none;
     }
 
     h2 {
-      @extend %t-title7;
-      @extend %t-strong;
+      @extend %t-title7 !optional;
+      @extend %t-strong !optional;
 
       margin-bottom: 18px;
       line-height: 30px;
@@ -71,8 +71,8 @@
     }
 
     h3 {
-      @extend %t-title6;
-      @extend %t-strong;
+      @extend %t-title6 !optional;
+      @extend %t-strong !optional;
 
       margin: 34px 0 11px;
     }
@@ -97,7 +97,7 @@
 
   .update-contents {
     p {
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
 
       line-height: 25px;
     }
@@ -132,7 +132,7 @@
     }
 
     pre {
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
 
       margin: 1em 0;
       color: $body-color;
@@ -174,8 +174,8 @@
     .delete-button {
       @include white-button();
 
-      @extend %t-action4;
-      @extend %t-regular;
+      @extend %t-action4 !optional;
+      @extend %t-regular !optional;
 
       float: left;
       padding: 3px 10px 4px;
@@ -190,7 +190,7 @@
 }
 
 .course-handouts {
-  @extend %ui-window;
+  @extend %ui-window !optional;
 
   width: 30%;
   padding: 20px 30px;
@@ -202,8 +202,8 @@
   background: $uxpl-light-blue-base;
 
   .title {
-    @extend %t-title4;
-    @extend %t-light;
+    @extend %t-title4 !optional;
+    @extend %t-light !optional;
 
     margin-bottom: 24px;
   }
@@ -211,8 +211,8 @@
   .edit-button {
     @include white-button;
 
-    @extend %t-action4;
-    @extend %t-regular;
+    @extend %t-action4 !optional;
+    @extend %t-regular !optional;
 
     float: right;
     padding: 3px 10px 4px;
@@ -225,7 +225,7 @@
   }
 
   .handouts-content {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
   }
 
   .treeview-handoutsnav li {
@@ -234,7 +234,7 @@
 }
 
 .edit-handouts-form {
-  @extend %ui-depth4;
+  @extend %ui-depth4 !optional;
 
   @include edit-box;
 
diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss
index 0f3f587ce76d..3e6e5033212f 100644
--- a/cms/static/sass/views/_users.scss
+++ b/cms/static/sass/views/_users.scss
@@ -10,17 +10,17 @@
   }
 
   .content-primary {
-    @extend .ui-col-wide;
+    @extend .ui-col-wide !optional;
   }
 
   .content-supplementary {
-    @extend .ui-col-narrow;
+    @extend .ui-col-narrow !optional;
   }
 
   // ELEM: content
   .content {
     .introduction {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       margin: 0 0 ($baseline*2) 0;
     }
@@ -50,7 +50,7 @@
         margin-top: 0;
 
         .action-primary {
-          @extend %btn-primary-green;
+          @extend %btn-primary-green !optional;
 
           padding: ($baseline/2) $baseline;
         }
@@ -76,7 +76,7 @@
 
   .user-list {
     .user-item {
-      @extend %ui-window;
+      @extend %ui-window !optional;
 
       @include clearfix();
 
@@ -97,12 +97,12 @@
 
       // ELEM: item - flag
       .flag-role {
-        @extend %ui-badge;
+        @extend %ui-badge !optional;
 
         color: $white;
 
         .msg-you {
-          @extend %t-strong;
+          @extend %t-strong !optional;
 
           margin-left: ($baseline/5);
           text-transform: none;
@@ -144,8 +144,8 @@
         .user-username {
           @include transition(color $tmg-f2 ease-in-out 0s);
 
-          @extend %t-title4;
-          @extend %t-strong;
+          @extend %t-title4 !optional;
+          @extend %t-strong !optional;
 
           @include margin(0, ($baseline/2), ($baseline/10), 0);
 
@@ -153,7 +153,7 @@
         }
 
         .user-email {
-          @extend %t-title6;
+          @extend %t-title6 !optional;
         }
       }
 
@@ -176,8 +176,8 @@
             @include blue-button;
             @include transition(all 0.15s);
 
-            @extend %t-action2;
-            @extend %t-strong;
+            @extend %t-action2 !optional;
+            @extend %t-strong !optional;
 
             display: inline-block;
             padding: ($baseline/5) $baseline;
@@ -187,15 +187,15 @@
             @include grey-button;
             @include transition(all 0.15s);
 
-            @extend %t-action2;
-            @extend %t-strong;
+            @extend %t-action2 !optional;
+            @extend %t-strong !optional;
 
             display: inline-block;
             padding: ($baseline/5) $baseline;
           }
 
           .notoggleforyou {
-            @extend %t-copy-sub1;
+            @extend %t-copy-sub1 !optional;
 
             color: $gray-l2;
           }
@@ -213,7 +213,7 @@
         }
 
         .delete {
-          @extend %ui-btn-non;
+          @extend %ui-btn-non !optional;
         }
 
         // HACK: nasty reset needed due to base.scss
diff --git a/cms/static/sass/views/_video-upload.scss b/cms/static/sass/views/_video-upload.scss
index aef3803015e1..1a585fe1c406 100644
--- a/cms/static/sass/views/_video-upload.scss
+++ b/cms/static/sass/views/_video-upload.scss
@@ -6,7 +6,7 @@
 
   .nav-actions {
     .fa-cloud-upload {
-      @extend %t-copy;
+      @extend %t-copy !optional;
 
       vertical-align: bottom;
 
@@ -277,8 +277,8 @@
     }
 
     .button {
-      @extend %btn-primary-blue;
-      @extend %sizing;
+      @extend %btn-primary-blue !optional;
+      @extend %sizing !optional;
 
       .action-button-text {
         display: inline-block;
@@ -351,7 +351,7 @@
     margin-bottom: ($baseline*2);
 
     .active-video-upload-list {
-      @extend %cont-no-list;
+      @extend %cont-no-list !optional;
 
       .active-video-upload {
         display: inline-block;
@@ -364,8 +364,8 @@
         vertical-align: top;
 
         .video-detail-name {
-          @extend %cont-truncated;
-          @extend %t-strong;
+          @extend %cont-truncated !optional;
+          @extend %t-strong !optional;
 
           margin-bottom: ($baseline/2);
           font-size: 90%;
@@ -453,7 +453,7 @@
   }
 
   .button {
-    @extend %ui-btn-non;
+    @extend %ui-btn-non !optional;
   }
 
   .assets-library {
@@ -475,7 +475,7 @@
     }
 
     .actions-list {
-      @extend %actions-list;
+      @extend %actions-list !optional;
     }
   }
 
diff --git a/cms/static/sass/xmodule/_headings.scss b/cms/static/sass/xmodule/_headings.scss
index 07ae25606db4..0b1660549246 100644
--- a/cms/static/sass/xmodule/_headings.scss
+++ b/cms/static/sass/xmodule/_headings.scss
@@ -96,7 +96,7 @@ $headings-base-color:                       $gray-d2;
   .hd-6,
   .hd-7,
   .hd-8 {
-    @extend %reset-headings;
+    @extend %reset-headings !optional;
   }
 
 
@@ -106,12 +106,12 @@ $headings-base-color:                       $gray-d2;
   // canned heading classes
   @for $i from 1 through $headings-count {
     .hd-#{$i} {
-      @extend %hd-#{$i};
+      @extend %hd-#{$i} !optional;
     }
   }
 
   h3 {
-    @extend %hd-2;
+    @extend %hd-2 !optional;
 
     font-weight: $headings-font-weight-normal;
     // override external modules and xblocks that use inline CSS
diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss
index f35a16035639..51fc462dab0a 100644
--- a/common/lib/xmodule/xmodule/css/annotatable/display.scss
+++ b/common/lib/xmodule/xmodule/css/annotatable/display.scss
@@ -60,7 +60,7 @@ $annotatable--body-font-size: em(14);
 }
 
 .annotatable-span {
-  @extend %ui-fake-link;
+   @extend %ui-fake-link !optional;
 
   display: inline;
 
diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index f5136ef1f9be..08c94f611dfd 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -48,7 +48,7 @@ $asterisk-icon: '\f069'; // .fa-asterisk
 @mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d") {
   .status-icon {
     &::after {
-      @extend %use-font-awesome;
+      @extend %use-font-awesome !optional;
 
       color: $color;
       font-size: 1.2em;
@@ -92,7 +92,7 @@ h2 {
 }
 
 .feedback-hint-incorrect {
-  @extend %feedback-hint;
+  @extend %feedback-hint !optional;
 
   .icon {
     color: $incorrect;
@@ -101,7 +101,7 @@ h2 {
 
 .feedback-hint-partially-correct,
 .feedback-hint-correct {
-  @extend %feedback-hint;
+  @extend %feedback-hint !optional;
 
   .icon {
     color: $correct;
@@ -280,7 +280,7 @@ div.problem {
 // ====================
 div.problem {
   .choicegroup {
-    @extend %choicegroup-base;
+    @extend %choicegroup-base !optional;
 
     .field {
       position: relative;
@@ -454,7 +454,7 @@ div.problem {
       margin-bottom: 0;
 
       &::before {
-        @extend %t-strong;
+        @extend %t-strong !optional;
 
         display: inline;
         content: "Answer: ";
@@ -669,7 +669,7 @@ div.problem {
   }
 
   dl dt {
-    @extend %t-strong;
+    @extend %t-strong !optional;
 
   }
 
@@ -715,7 +715,7 @@ div.problem {
     }
 
     th {
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       text-align: left;
     }
@@ -918,7 +918,7 @@ div.problem {
       resize: none;
 
       &.CodeMirror-cursor {
-        @extend %ui-depth1;
+        @extend %ui-depth1 !optional;
 
         position: absolute;
         visibility: hidden;
@@ -1072,7 +1072,7 @@ div.problem {
     margin: 0;
 
     &:first-child {
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       margin-bottom: 0;
     }
@@ -1087,7 +1087,7 @@ div.problem {
       font-weight: normal;
 
       &:first-child {
-        @extend %t-strong;
+        @extend %t-strong !optional;
       }
     }
   }
@@ -1238,7 +1238,7 @@ div.problem {
     border: 1px solid $gray-l3;
 
     h3 {
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       padding: 9px;
       border-bottom: 1px solid #e3e3e3;
@@ -1280,7 +1280,7 @@ div.problem {
       margin-bottom: 12px;
 
       h3 {
-        @extend %t-strong;
+        @extend %t-strong !optional;
 
         color: #aaa;
         font-style: normal;
@@ -1340,7 +1340,7 @@ div.problem {
       }
 
       .shortform {
-        @extend %t-strong;
+        @extend %t-strong !optional;
       }
 
       .longform {
@@ -1491,7 +1491,7 @@ div.problem {
     border-radius: 1em;
 
     .annotation-header {
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       padding: .5em 1em;
       border-bottom: 1px solid $gray-l3;
@@ -1533,7 +1533,7 @@ div.problem {
         margin: 1em 0 0 0;
 
         .tag {
-          @extend %ui-fake-link;
+           @extend %ui-fake-link !optional;
 
           display: inline-block;
           margin-left: ($baseline*2);
@@ -1578,7 +1578,7 @@ div.problem {
       pre { background-color: $gray-l3; color: $black; }
 
       &::before {
-        @extend %t-strong;
+        @extend %t-strong !optional;
 
         display: block;
         content: "debug input value";
@@ -1592,7 +1592,7 @@ div.problem {
 // ====================
 div.problem {
   .choicetextgroup {
-    @extend %choicegroup-base;
+    @extend %choicegroup-base !optional;
 
     input[type="text"]{
       margin-bottom: 0.5em;
diff --git a/common/lib/xmodule/xmodule/css/html/display.scss b/common/lib/xmodule/xmodule/css/html/display.scss
index d16c2e74978f..93d16adab01e 100644
--- a/common/lib/xmodule/xmodule/css/html/display.scss
+++ b/common/lib/xmodule/xmodule/css/html/display.scss
@@ -169,7 +169,7 @@ th {
 // modal - image zoom, fill window
 .wrapper-modal-image {
   .modal-ui-icon {
-    @extend %ui-fake-link;
+     @extend %ui-fake-link !optional;
 
     position: absolute;
     display: block;
@@ -190,7 +190,7 @@ th {
   }
 
   .image-link {
-    @extend %ui-fake-link;
+     @extend %ui-fake-link !optional;
 
     position: relative;
     display: block;
@@ -207,8 +207,8 @@ th {
   }
 
   .image-modal {
-    @extend %ui-fake-link;
-    @extend %ui-depth5;
+     @extend %ui-fake-link !optional;
+     @extend %ui-depth5 !optional;
 
     position: fixed;
     top: 0;
diff --git a/common/lib/xmodule/xmodule/css/lti/lti.scss b/common/lib/xmodule/xmodule/css/lti/lti.scss
index 88540aee09e9..5d0188af8e00 100644
--- a/common/lib/xmodule/xmodule/css/lti/lti.scss
+++ b/common/lib/xmodule/xmodule/css/lti/lti.scss
@@ -26,7 +26,7 @@ div.lti {
       text-align: right;
 
       .link_lti_new_window {
-        @extend .gray-button;
+        @extend .gray-button !optional;
 
         @include font-size(13);
         @include line-height(14);
diff --git a/common/lib/xmodule/xmodule/css/poll/display.scss b/common/lib/xmodule/xmodule/css/poll/display.scss
index cf46fcf3bf4d..01a591e0c3b7 100644
--- a/common/lib/xmodule/xmodule/css/poll/display.scss
+++ b/common/lib/xmodule/xmodule/css/poll/display.scss
@@ -58,7 +58,7 @@ div.poll_question {
       }
 
       .button {
-        @extend %ui-fake-link;
+         @extend %ui-fake-link !optional;
 
         -webkit-appearance: none;
         -webkit-background-clip: padding-box;
@@ -133,7 +133,7 @@ div.poll_question {
       }
 
       .text {
-        @extend %ui-fake-link;
+         @extend %ui-fake-link !optional;
 
         display: inline;
         float: left;
diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss
index 6b9fa37e85f8..397ff2ee9516 100644
--- a/common/lib/xmodule/xmodule/css/sequence/display.scss
+++ b/common/lib/xmodule/xmodule/css/sequence/display.scss
@@ -60,7 +60,7 @@ $seq-nav-height: 50px;
 // ====================
 
 .sequence-nav {
-  @extend .topbar;
+  @extend .topbar !optional;
 
   margin: 0 auto $baseline;
   position: relative;
@@ -75,7 +75,7 @@ $seq-nav-height: 50px;
   }
 
   .sequence-list-wrapper {
-    @extend %ui-depth2;
+    @extend %ui-depth2 !optional;
 
     position: relative;
     height: 100%;
@@ -103,8 +103,8 @@ $seq-nav-height: 50px;
       }
 
       button {
-        @extend %ui-fake-link;
-        @extend %ui-clear-button;
+        @extend %ui-fake-link !optional;
+        @extend %ui-clear-button !optional;
 
         width: 100%;
         height: ($seq-nav-height - 1);
@@ -161,7 +161,7 @@ $seq-nav-height: 50px;
         .sequence-tooltip {
           @include text-align(left);
 
-          @extend %ui-depth2;
+          @extend %ui-depth2 !optional;
 
           margin-top: 12px;
           background: $seq-nav-tooltip-color;
@@ -208,7 +208,7 @@ $seq-nav-height: 50px;
 }
 
 .sequence-nav-button {
-  @extend %ui-depth3;
+  @extend %ui-depth3 !optional;
 
   display: block;
   top: 0;
diff --git a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss
index c9b56604c994..23098cf72f82 100644
--- a/common/lib/xmodule/xmodule/css/video/accessible_menu.scss
+++ b/common/lib/xmodule/xmodule/css/video/accessible_menu.scss
@@ -22,7 +22,7 @@ $a11y--blue-s1: saturate($blue, 15%);
   }
 
   .a11y-menu-list {
-    @extend %ui-depth3;
+    @extend %ui-depth3 !optional;
 
     top: 100%;
     margin: 0;
@@ -34,7 +34,7 @@ $a11y--blue-s1: saturate($blue, 15%);
     border: 1px solid #eee;
 
     li {
-      @extend %ui-fake-link;
+      @extend %ui-fake-link !optional;
 
       margin: 0;
       padding: 0;
@@ -107,7 +107,7 @@ $a11y--blue-s1: saturate($blue, 15%);
       text-overflow: ellipsis;
 
       &::after {
-        @extend %use-font-awesome;
+        @extend %use-font-awesome !optional;
 
         content: "\f0d7";
         position: absolute;
@@ -139,7 +139,7 @@ $a11y--blue-s1: saturate($blue, 15%);
 
 .contextmenu,
 .submenu {
-  @extend %ui-depth5;
+   @extend %ui-depth5 !optional;
 
   border: 1px solid #333;
   background: $white;
@@ -223,7 +223,7 @@ $a11y--blue-s1: saturate($blue, 15%);
 }
 
 .overlay {
-  @extend %ui-depth4;
+   @extend %ui-depth4 !optional;
 
   position: fixed;
   top: 0;
diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss
index 93a8f2f5a328..5695cf59ed64 100644
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -316,8 +316,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       }
 
       %video-control {
-        @extend %t-strong;
-        @extend %t-title7;
+        @extend %t-strong !optional;
+        @extend %t-title7 !optional;
 
         display: inline-block;
         vertical-align: middle;
@@ -343,7 +343,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       }
 
       .control {
-        @extend %video-control;
+        @extend %video-control !optional;
 
         .icon {
           width: 1em;
@@ -387,7 +387,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         }
 
         .ui-slider-handle {
-          @extend %ui-fake-link;
+          @extend %ui-fake-link !optional;
 
           @include transform-origin(bottom left);
           @include transition(all 0.7s ease-in-out 0s);
@@ -437,8 +437,8 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
         }
 
         .vidtime {
-          @extend %t-strong;
-          @extend %t-title7;
+          @extend %t-strong !optional;
+          @extend %t-title7 !optional;
 
           @include padding-left(lh(0.75));
 
@@ -481,7 +481,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
           .menu {
             @include transition(none);
 
-            @extend %ui-depth1;
+            @extend %ui-depth1 !optional;
 
             position: absolute;
             display: none;
@@ -498,7 +498,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
             list-style: none;
 
             li {
-              @extend %ui-fake-link;
+              @extend %ui-fake-link !optional;
 
               color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
 
@@ -639,7 +639,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
           .volume-slider-container {
             @include transition(none);
 
-            @extend %ui-depth1;
+            @extend %ui-depth1 !optional;
 
             display: none;
             position: absolute;
@@ -660,7 +660,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
               background: $cool-dark;
 
               .ui-slider-handle {
-                @extend %ui-fake-link;
+                @extend %ui-fake-link !optional;
 
                 @include transition(height $tmg-s2 ease-in-out 0s, width $tmg-s2 ease-in-out 0s);
                 @include left(-5px);
@@ -763,7 +763,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       list-style: none;
 
       li {
-        @extend %ui-fake-link;
+        @extend %ui-fake-link !optional;
 
         margin-bottom: 8px;
         border: 0;
@@ -832,11 +832,11 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     }
 
     .subtitles {
-      @extend .is-hidden;
+      @extend .is-hidden !optional;
     }
 
     .subtitles.html5 {
-      @extend %ui-depth0;
+      @extend %ui-depth0 !optional;
 
       background-color: rgba(243, 243, 243, 0.8);
       height: 100%;
@@ -851,7 +851,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
   }
 
   &.video-fullscreen {
-    @extend %ui-depth4;
+    @extend %ui-depth4 !optional;
 
     background: rgba(#000, 0.95);
     border: 0;
@@ -914,7 +914,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       }
 
       .video-controls {
-        @extend %ui-depth4;
+        @extend %ui-depth4 !optional;
 
         position: absolute;
         bottom: 0;
@@ -958,7 +958,7 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
   }
 
   .video-pre-roll {
-    @extend %ui-depth3;
+    @extend %ui-depth3 !optional;
 
     position: absolute;
     top: 0;
diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss
index e02e2510849a..75609043b971 100644
--- a/common/static/sass/_mixins-inherited.scss
+++ b/common/static/sass/_mixins-inherited.scss
@@ -70,12 +70,12 @@
 }
 
 .vertical-divider {
-  @extend .faded-vertical-divider;
+  @extend .faded-vertical-divider !optional;
 
   position: relative;
 
   &::after {
-    @extend .faded-vertical-divider-light;
+    @extend .faded-vertical-divider-light !optional;
 
     content: "";
     display: block;
@@ -87,12 +87,12 @@
 .horizontal-divider {
   border: none;
 
-  @extend .faded-hr-divider;
+  @extend .faded-hr-divider !optional;
 
   position: relative;
 
   &::after {
-    @extend .faded-hr-divider-light;
+    @extend .faded-hr-divider-light !optional;
 
     content: "";
     display: block;
@@ -134,8 +134,8 @@
 @mixin button {
   @include transition(background-color 0.15s, box-shadow 0.15s);
 
-  @extend %t-action3;
-  @extend %t-strong;
+  @extend %t-action3 !optional;
+  @extend %t-strong !optional;
 
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 $transparent;
   display: inline-block;
@@ -361,7 +361,7 @@
   }
 
   h5 {
-    @extend %t-strong;
+    @extend %t-strong !optional;
 
     margin-bottom: 8px;
     color: $white;
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 7b105b9305ac..64f14cfb525b 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -233,9 +233,9 @@
 
 // primary button
 %ui-btn-primary {
-  @extend %ui-btn;
-  @extend %ui-btn-pill;
-  @extend %t-strong;
+  @extend %ui-btn !optional;
+  @extend %ui-btn-pill !optional;
+  @extend %t-strong !optional;
 
   padding: ($baseline/2) $baseline;
   border-width: 1px;
@@ -264,8 +264,8 @@
 
 // secondary button
 %ui-btn-secondary {
-  @extend %ui-btn;
-  @extend %ui-btn-pill;
+  @extend %ui-btn !optional;
+  @extend %ui-btn-pill !optional;
 
   border-width: 1px;
   border-style: solid;
@@ -278,8 +278,8 @@
 %ui-btn-flat-outline {
   @include transition(all 0.15s);
 
-  @extend %t-strong;
-  @extend %t-action4;
+  @extend %t-strong !optional;
+  @extend %t-action4 !optional;
 
   text-align: center;
   border-radius: ($baseline/4);
@@ -308,7 +308,7 @@
 %ui-btn-non {
   @include transition(all 0.15s);
 
-  @extend %ui-btn-pill;
+  @extend %ui-btn-pill !optional;
 
   @include transition(all $tmg-f2 linear 0s);
 
@@ -328,7 +328,7 @@
 
 // button with no button shell until hover for understated actions
 %ui-btn-non-blue {
-  @extend %ui-btn-non;
+  @extend %ui-btn-non !optional;
 
   &:hover,
   &:focus {
@@ -345,7 +345,7 @@
 }
 
 %no-content {
-  @extend %ui-well;
+  @extend %ui-well !optional;
 
   padding: ($baseline*2);
   background-color: $gray-l4;
@@ -354,8 +354,8 @@
 
   .button,
   .action {
-    @extend %btn-primary-green;
-    @extend %t-action3;
+    @extend %btn-primary-green !optional;
+    @extend %t-action3 !optional;
 
     margin-left: $baseline;
 
@@ -368,8 +368,8 @@
 .ui-loading {
   @include animation(fadeIn $tmg-f2 linear 1);
 
-  @extend %ui-well;
-  @extend %t-copy-base;
+  @extend %ui-well !optional;
+  @extend %t-copy-base !optional;
 
   opacity: 0.6;
   background-color: $white;
@@ -377,7 +377,7 @@
   text-align: center;
 
   .spin {
-    @extend %anim-rotateCW;
+    @extend %anim-rotateCW !optional;
 
     display: inline-block;
   }
diff --git a/common/static/sass/edx-pattern-library-shims/_buttons.scss b/common/static/sass/edx-pattern-library-shims/_buttons.scss
index 09278a452c86..f5183052b655 100644
--- a/common/static/sass/edx-pattern-library-shims/_buttons.scss
+++ b/common/static/sass/edx-pattern-library-shims/_buttons.scss
@@ -31,7 +31,7 @@
   // STATE: is disabled
   &:disabled,
   &.is-disabled {
-    @extend %state-disabled;
+    @extend %state-disabled !optional;
   }
 
   .icon {
@@ -45,7 +45,7 @@
   }
 
   &.btn-small {
-    @extend %btn-small;
+    @extend %btn-small !optional;
   }
 }
 
@@ -53,7 +53,7 @@
 // #DEFAULT
 // ----------------------------
 .btn-default {
-  @extend %btn-shims;
+  @extend %btn-shims !optional;
 
   border-color: $btn-default-border-color;
   background: $btn-default-background;
@@ -89,7 +89,7 @@
 // #PRIMARY
 // ----------------------------
 .btn-primary {
-  @extend %btn-shims;
+  @extend %btn-shims !optional;
 
   border-color: $btn-brand-border-color;
   background: $btn-brand-background;
@@ -126,7 +126,7 @@
 // #UPGRADE
 // ----------------------------
 .btn-upgrade {
-  @extend %btn-shims;
+  @extend %btn-shims !optional;
 
   border-color: $btn-upgrade-border-color;
   background: $btn-upgrade-background;
@@ -155,5 +155,5 @@
 // #BRAND
 // ----------------------------
 .btn-brand {
-  @extend .btn-primary;
+  @extend .btn-primary !optional;
 }
diff --git a/lms/static/certificates/sass/_components.scss b/lms/static/certificates/sass/_components.scss
index 7784a52c4a5b..05c59a51ee55 100644
--- a/lms/static/certificates/sass/_components.scss
+++ b/lms/static/certificates/sass/_components.scss
@@ -47,15 +47,15 @@
 }
 
 .depth-base-focus {
-  @extend %depth-base-focus;
+  @extend %depth-base-focus !optional;
 }
 
 .depth-well {
-  @extend %depth-well;
+  @extend %depth-well !optional;
 }
 
 .depth-card {
-  @extend %depth-card;
+  @extend %depth-card !optional;
 }
 
 // ------------------------------
@@ -74,7 +74,7 @@
 // #HEADER APP
 // ------------------------------
 .wrapper-header {
-  @extend %divider-2;
+  @extend %divider-2 !optional;
 
   border-bottom-color: $gray-x-back;
   background: $white;
@@ -170,7 +170,7 @@
 
 // brief accomplishment
 .accomplishment-brief {
-  @extend %depth-card;
+  @extend %depth-card !optional;
 
   .accomplishment-type-symbol,
   .accomplishment-details {
@@ -217,7 +217,7 @@
 }
 
 .accomplishment-rendering {
-  @extend %depth-card;
+  @extend %depth-card !optional;
 
   position: relative;
   top: -(map-get($spacing-vertical, base));
@@ -251,39 +251,39 @@
 
   // statement
   .accomplishment-statement {
-    @extend %rendering-section;
+    @extend %rendering-section !optional;
 
     @include text-align(center);
   }
 
   .accomplishment-statement-lead {
-    @extend .hd-2;
+    @extend .hd-2 !optional;
   }
 
   .accomplishment-recipient {
-    @extend %rendering-accomplishment-line;
+    @extend %rendering-accomplishment-line !optional;
   }
 
   .accomplishment-summary {
-    @extend %rendering-accomplishment-line;
-    @extend %copy-lead;
+    @extend %rendering-accomplishment-line !optional;
+    @extend %copy-lead !optional;
 
     margin-bottom: map-get($spacing-vertical, mid-small);
   }
 
   .accomplishment-course {
-    @extend %rendering-accomplishment-line;
+    @extend %rendering-accomplishment-line !optional;
 
     font-weight: 600;
   }
 
   .accomplishment-course-description {
-    @extend %rendering-accomplishment-line;
+    @extend %rendering-accomplishment-line !optional;
   }
 
   .accomplishment-statement-detail {
-    @extend %rendering-accomplishment-line;
-    @extend %copy-lead;
+    @extend %rendering-accomplishment-line !optional;
+    @extend %copy-lead !optional;
   }
 
   // organizations
@@ -292,12 +292,12 @@
   }
 
   .accomplishment-orgs-title {
-    @extend %rendering-hd-section;
+    @extend %rendering-hd-section !optional;
   }
 
   // signatories
   .accomplishment-signatories {
-    @extend %rendering-section;
+    @extend %rendering-section !optional;
 
     .signatory-signature {
       display: block;
@@ -317,7 +317,7 @@
     }
 
     .signatory-credentials {
-      @extend %copy-micro;
+      @extend %copy-micro !optional;
 
       margin-top: 0;
 
@@ -330,7 +330,7 @@
   }
 
   .accomplishment-signatories-title {
-    @extend %rendering-hd-section;
+    @extend %rendering-hd-section !optional;
   }
 }
 
@@ -340,7 +340,7 @@
 
   .metadata {
     .label {
-      @extend %copy-meta;
+      @extend %copy-meta !optional;
 
       margin-bottom: map-get($spacing-vertical, xx-small);
       padding: 0 rem(8);
@@ -353,7 +353,7 @@
     }
 
     .value {
-      @extend %copy-base;
+      @extend %copy-base !optional;
 
       font-weight: 600;
       color: $gray-dark;
@@ -369,7 +369,7 @@
   }
 
   .recipient-img {
-    @extend %img-cropped;
+    @extend %img-cropped !optional;
 
     width: rem(100);
 
@@ -382,7 +382,7 @@
   }
 
   .recipient-details {
-    @extend %copy-base;
+    @extend %copy-base !optional;
 
     font-weight: 600;
     max-width: calc(100% - (#{rem(100)} + #{map-get($spacing-horizontal, small)} + 5px));
@@ -403,7 +403,7 @@
 }
 
 .accomplishment-metadata-title {
-  @extend %hd-subsection;
+  @extend %hd-subsection !optional;
 
   border-bottom-color: $gray-back;
 }
@@ -412,7 +412,7 @@
 // #ACCOMPLISHMENT RELATED
 // ------------------------------
 .accomplishment-related-title {
-  @extend %hd-subsection;
+  @extend %hd-subsection !optional;
 }
 
 // ------------------------------
@@ -574,7 +574,7 @@
   vertical-align: middle;
 
   .badges-modal {
-    @extend %copy-large;
+    @extend %copy-large !optional;
 
     box-sizing: content-box;
     position: fixed;
@@ -604,7 +604,7 @@
       display: table;
 
       a {
-        @extend %link;
+        @extend %link !optional;
       }
     }
 
diff --git a/lms/static/certificates/sass/_layouts.scss b/lms/static/certificates/sass/_layouts.scss
index 35b2ab452156..6da4f1c8d1b9 100644
--- a/lms/static/certificates/sass/_layouts.scss
+++ b/lms/static/certificates/sass/_layouts.scss
@@ -24,14 +24,14 @@
 
 // app header
 .wrapper-header {
-  @extend %layout-wrapper;
+  @extend %layout-wrapper !optional;
 
   padding-top: map-get($spacing-vertical, small);
   padding-bottom: map-get($spacing-vertical, small);
 }
 
 .header-app {
-  @extend %layout;
+  @extend %layout !optional;
 
   .logo {
     display: block;
@@ -56,13 +56,13 @@
 
 // banner
 .wrapper-banner {
-  @extend %layout-wrapper;
+  @extend %layout-wrapper !optional;
 
   padding-top: map-get($spacing-vertical, small);
   padding-bottom: map-get($spacing-vertical, small);
 
   .banner {
-    @extend %layout;
+    @extend %layout !optional;
   }
 }
 
@@ -128,15 +128,15 @@
 
 // app footer
 .wrapper-footer {
-  @extend %layout-wrapper;
+  @extend %layout-wrapper !optional;
 }
 
 .footer-app {
-  @extend %layout;
+  @extend %layout !optional;
 }
 
 .footer-app-copyright {
-  @extend %copy-micro;
+  @extend %copy-micro !optional;
 
   @include media-breakpoint-up(md) {
     @include make-col(6);
@@ -154,7 +154,7 @@
 
   .list {
     .nav-item {
-      @extend %copy-meta;
+      @extend %copy-meta !optional;
 
       display: block;
       font-weight: 600;
@@ -171,7 +171,7 @@
     }
 
     .action {
-      @extend %link;
+      @extend %link !optional;
     }
   }
 
@@ -187,23 +187,23 @@
 // ------------------------------
 .layout-accomplishment {
   .wrapper-introduction {
-    @extend %layout-wrapper;
+    @extend %layout-wrapper !optional;
 
     margin-bottom: map-get($spacing-vertical, large);
 
     .introduction {
-      @extend %layout;
+      @extend %layout !optional;
     }
   }
 
   .wrapper-accomplishment-rendering {
-    @extend %layout-wrapper;
+    @extend %layout-wrapper !optional;
 
     margin-bottom: map-get($spacing-vertical, small);
   }
 
   .accomplishment-rendering {
-    @extend %layout;
+    @extend %layout !optional;
 
     position: relative;
     top: -(map-get($spacing-vertical, base));
@@ -310,10 +310,10 @@
   }
 
   .wrapper-accomplishment-metadata {
-    @extend %layout-wrapper;
+    @extend %layout-wrapper !optional;
 
     .accomplishment-metadata {
-      @extend %layout;
+      @extend %layout !optional;
 
       .accomplishment-metadata-title {
         @include make-col(12);
@@ -321,14 +321,14 @@
     }
 
     .wrapper-metadata {
-      @extend %layout;
+      @extend %layout !optional;
 
       @include make-container();
 
       padding: 0;
 
       .metadata {
-        @extend %divider-2;
+        @extend %divider-2 !optional;
 
         @include make-col(12);
 
@@ -352,10 +352,10 @@
   }
 
   .wrapper-accomplishment-related {
-    @extend %layout-wrapper;
+    @extend %layout-wrapper !optional;
 
     .accomplishment-related {
-      @extend %layout;
+      @extend %layout !optional;
     }
 
     .accomplishment-brief {
@@ -373,10 +373,10 @@
   }
 
   .wrapper-about {
-    @extend %layout-wrapper;
+    @extend %layout-wrapper !optional;
 
     .about {
-      @extend %layout;
+      @extend %layout !optional;
     }
 
     .about-item {
@@ -393,7 +393,7 @@
       }
 
       a {
-        @extend %link;
+        @extend %link !optional;
       }
 
       .about-edx-title,
@@ -406,7 +406,7 @@
 
       .about-copy,
       .about-edx-copy {
-        @extend %copy-meta;
+        @extend %copy-meta !optional;
 
         margin: 0 rem(8);
 
diff --git a/lms/static/certificates/sass/_print.scss b/lms/static/certificates/sass/_print.scss
index cec4e82a5614..1b14f597fce0 100644
--- a/lms/static/certificates/sass/_print.scss
+++ b/lms/static/certificates/sass/_print.scss
@@ -69,7 +69,7 @@
   // reset body/view properties
   html,
   body {
-    @extend %print-black-on-white;
+    @extend %print-black-on-white !optional;
   }
 
   body {
@@ -106,14 +106,14 @@
   .accomplishment-metadata .accomplishment-recipient,
   .deco-corner,
   .accomplishment-date .label {
-    @extend %print-hide;
+    @extend %print-hide !optional;
   }
 
   // remove layout wrappers' padding
   .wrapper-introduction,
   .wrapper-accomplishment-rendering,
   .wrapper-accomplishment-metadata {
-    @extend %print-layout-wrapper;
+    @extend %print-layout-wrapper !optional;
   }
 }
 
@@ -186,7 +186,7 @@
 
   // accomplishment
   .accomplishment-main {
-    @extend %print-no-background;
+    @extend %print-no-background !optional;
   }
 
   .accomplishment-rendering {
@@ -215,7 +215,7 @@
     }
 
     .accomplishment-statement {
-      @extend %print-rendering-section;
+      @extend %print-rendering-section !optional;
 
       @include make-col(8);
 
@@ -249,7 +249,7 @@
     }
 
     .accomplishment-signatories {
-      @extend %print-rendering-section;
+      @extend %print-rendering-section !optional;
 
       @include make-col(12);
       @include margin-right(0);
diff --git a/lms/static/certificates/sass/_views.scss b/lms/static/certificates/sass/_views.scss
index 4fe83814a294..59e3e0bbc879 100644
--- a/lms/static/certificates/sass/_views.scss
+++ b/lms/static/certificates/sass/_views.scss
@@ -17,10 +17,10 @@
 // #INVALID
 // ------------------------------
 .wrapper-content.status-invalid {
-  @extend %layout-wrapper;
+  @extend %layout-wrapper !optional;
 
   .wrapper-content-grid {
-    @extend %layout;
+    @extend %layout !optional;
   }
 
   .content-main {
diff --git a/lms/static/sass/_developer.scss b/lms/static/sass/_developer.scss
index 4049474508a5..645a3a80cbc1 100644
--- a/lms/static/sass/_developer.scss
+++ b/lms/static/sass/_developer.scss
@@ -31,10 +31,10 @@
 .ui-loading-base {
   @include animation(fadeIn $tmg-f2 linear 1);
 
-  @extend %t-copy-base;
+  @extend %t-copy-base !optional;
 
   .spin {
-    @extend %anim-rotateCW;
+    @extend %anim-rotateCW !optional;
 
     display: inline-block;
   }
@@ -45,8 +45,8 @@
 }
 
 .ui-loading {
-  @extend .ui-loading-base;
-  @extend %ui-well;
+  @extend .ui-loading-base !optional;
+  @extend %ui-well !optional;
 
   opacity: 0.6;
   background-color: $white;
@@ -77,7 +77,7 @@
     .product-info,
     .product-name,
     .price {
-      @extend %t-ultrastrong;
+      @extend %t-ultrastrong !optional;
 
       color: $m-blue-d3;
     }
@@ -150,7 +150,7 @@
   }
 
   .edit-members {
-    @extend %ui-no-list;
+    @extend %ui-no-list !optional;
 
     .team-member {
       line-height: $body-line-height;
@@ -200,7 +200,7 @@
 //copied from cms/static/sass/elements/_system-feedback.scss#L106
 //along with some "hide the inherited value, we want none" action
 .prompt.warning button {
-  @extend %btn-no-style;
+  @extend %btn-no-style !optional;
 
   box-shadow: none;
   text-shadow: none;
@@ -221,7 +221,7 @@
 //copied from cms/static/sass/elements/_system-feedback.scss#L106
 //along with some "hide the inherited value, we want none" action
 .prompt.warning button {
-  @extend %btn-no-style;
+  @extend %btn-no-style !optional;
 
   box-shadow: none;
   text-shadow: none;
diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss
index 997e46db5f69..c758ee194196 100644
--- a/lms/static/sass/_shame.scss
+++ b/lms/static/sass/_shame.scss
@@ -36,8 +36,8 @@
 
 // primary button
 %m-btn-base {
-  @extend %m-btn;
-  @extend %m-btn-edged;
+  @extend %m-btn !optional;
+  @extend %m-btn-edged !optional;
 
   border: none;
   padding: ($baseline/2) ($baseline);
@@ -60,7 +60,7 @@
 
 // primary button
 %m-btn-primary {
-  @extend %m-btn-base;
+  @extend %m-btn-base !optional;
 
   box-shadow: 0 2px 1px 0 $action-primary-shadow;
   background: $action-primary-bg;
@@ -99,7 +99,7 @@
 
 // secondary button
 %m-btn-secondary {
-  @extend %m-btn-base;
+  @extend %m-btn-base !optional;
 
   box-shadow: 0 2px 1px 0 $action-secondary-shadow;
   background: $action-secondary-bg;
@@ -201,7 +201,7 @@ footer .references {
 // modal semantic button resetting - overriding the poorly scoped button mixin styling
 .close-modal,
 button.close-modal {
-  @extend %ui-reset-button;
+  @extend %ui-reset-button !optional;
 
   &:focus {
     border: none !important;
@@ -232,12 +232,12 @@ button.close-modal {
   }
 
   .action-primary {
-    @extend %t-action4;
+    @extend %t-action4 !optional;
   }
 
   .action-secondary {
-    @extend %btn-no-style;
-    @extend %t-strong;
+    @extend %btn-no-style !optional;
+    @extend %t-strong !optional;
 
     box-shadow: none;
     text-shadow: none;
diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index 4cfee159fb30..c7f4b4dacf5f 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -122,7 +122,7 @@ a:visited:not(.btn) {
   &:disabled,
   &.is-disabled,
   &.disabled {
-    @extend %ui-disabled;
+    @extend %ui-disabled !optional;
 
     opacity: 0.5;
     cursor: not-allowed;
@@ -245,7 +245,7 @@ mark {
 
 // UI - disabled state
 .is-disabled {
-  @extend %ui-disabled;
+  @extend %ui-disabled !optional;
 }
 
 // UI - is hidden
@@ -255,20 +255,20 @@ mark {
 
 // UI - is deprecated
 .is-deprecated {
-  @extend %ui-deprecated;
+  @extend %ui-deprecated !optional;
 }
 
 // UI - semantically hide text
 .sr,
 .sr-only {
-  @extend %text-sr;
-  @extend %a11y-ensure-contrast;
+  @extend %text-sr !optional;
+  @extend %a11y-ensure-contrast !optional;
 }
 
 // UI - skipnav
 .nav-skip,
 .transcript-skip {
-  @extend %ui-print-excluded;
+  @extend %ui-print-excluded !optional;
 
   display: inline-block;
   position: absolute;
diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss
index 43317328de52..8f6a41885152 100644
--- a/lms/static/sass/base/_extends.scss
+++ b/lms/static/sass/base/_extends.scss
@@ -35,12 +35,12 @@
 }
 
 %vertical-divider {
-  @extend %faded-vertical-divider;
+  @extend %faded-vertical-divider !optional;
 
   position: relative;
 
   &::after {
-    @extend %faded-vertical-divider-light;
+    @extend %faded-vertical-divider-light !optional;
 
     content: "";
     display: block;
@@ -52,12 +52,12 @@
 %horizontal-divider {
   border: none;
 
-  @extend %faded-hr-divider;
+  @extend %faded-hr-divider !optional;
 
   position: relative;
 
   &::after {
-    @extend %faded-hr-divider-light;
+    @extend %faded-hr-divider-light !optional;
 
     content: "";
     display: block;
@@ -141,7 +141,7 @@
 }
 
 %ui-deprecated {
-  @extend %t-weight4;
+  @extend %t-weight4 !optional;
 
   background: tint($warning-color, 85%);
   padding: ($baseline/5) ($baseline/2);
diff --git a/lms/static/sass/base/_headings.scss b/lms/static/sass/base/_headings.scss
index 52668327cf98..492d8ae28681 100644
--- a/lms/static/sass/base/_headings.scss
+++ b/lms/static/sass/base/_headings.scss
@@ -95,7 +95,7 @@ $headings-base-color:                       $gray-d2;
 .hd-6,
 .hd-7,
 .hd-8 {
-  @extend %reset-headings;
+  @extend %reset-headings !optional;
 }
 
 
@@ -105,7 +105,7 @@ $headings-base-color:                       $gray-d2;
 // canned heading classes
 @for $i from 1 through $headings-count {
   .hd-#{$i} {
-    @extend %hd-#{$i};
+    @extend %hd-#{$i} !optional;
   }
 }
 
@@ -113,7 +113,7 @@ $headings-base-color:                       $gray-d2;
 
 .xblock .xblock {
   h2 {
-    @extend %hd-2;
+    @extend %hd-2 !optional;
 
     font-weight: $headings-font-weight-bold;
     // override external modules and xblocks that use inline CSS
diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss
index a88f7654b12e..4da98b2ace90 100644
--- a/lms/static/sass/base/_mixins.scss
+++ b/lms/static/sass/base/_mixins.scss
@@ -215,7 +215,7 @@
 }
 
 %shame-link-text {
-  @extend %shame-link-base;
+  @extend %shame-link-base !optional;
 
   &:hover,
   &:focus {
diff --git a/lms/static/sass/base/_utilities.scss b/lms/static/sass/base/_utilities.scss
index dab066b7ed72..bd89f95f543b 100644
--- a/lms/static/sass/base/_utilities.scss
+++ b/lms/static/sass/base/_utilities.scss
@@ -8,5 +8,5 @@
 .sr-is-focusable,
 .sr-is-focusable:focus,
 .sr-is-focusable:active {
-  @extend %no-outline;
+    @extend %no-outline !optional;
 }
diff --git a/lms/static/sass/bootstrap/_layouts.scss b/lms/static/sass/bootstrap/_layouts.scss
index 4a675a07365e..5531b5bb5f47 100644
--- a/lms/static/sass/bootstrap/_layouts.scss
+++ b/lms/static/sass/bootstrap/_layouts.scss
@@ -43,7 +43,7 @@
   &.container-fluid {
     max-width: map-get($container-max-widths, xl);
 
-    @extend %ui-print-excluded;
+    @extend %ui-print-excluded !optional;
   }
 }
 
diff --git a/lms/static/sass/bootstrap/_legacy.scss b/lms/static/sass/bootstrap/_legacy.scss
index 489452e0e4cf..62518925b541 100644
--- a/lms/static/sass/bootstrap/_legacy.scss
+++ b/lms/static/sass/bootstrap/_legacy.scss
@@ -22,7 +22,7 @@
 
 // Support .sr as a synonym for .sr-only
 .sr {
-  @extend .sr-only;
+  @extend .sr-only !optional;
 }
 
 // ----------------------------
diff --git a/lms/static/sass/bootstrap/elements/_pagination.scss b/lms/static/sass/bootstrap/elements/_pagination.scss
index 30cc9782bfd7..0422e497edb7 100644
--- a/lms/static/sass/bootstrap/elements/_pagination.scss
+++ b/lms/static/sass/bootstrap/elements/_pagination.scss
@@ -52,7 +52,7 @@
   }
 
   .nav-label {
-    @extend .sr-only;
+    @extend .sr-only !optional;
   }
 
   .pagination-form,
@@ -90,7 +90,7 @@
 
     .page-number-label,
     .submit-pagination-form {
-      @extend .sr-only;
+      @extend .sr-only !optional;
     }
 
     .page-number-input {
diff --git a/lms/static/sass/course/_auto-cert.scss b/lms/static/sass/course/_auto-cert.scss
index fe549e32124e..a04ff2eaeaf4 100644
--- a/lms/static/sass/course/_auto-cert.scss
+++ b/lms/static/sass/course/_auto-cert.scss
@@ -22,14 +22,14 @@
       }
 
       .msg-actions {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         display: inline-block;
         width: flex-grid(3, 12);
 
         .btn {
-          @extend %btn-primary-blue;
-          @extend %t-weight4;
+          @extend %btn-primary-blue !optional;
+          @extend %t-weight4 !optional;
 
           text-shadow: none;
         }
diff --git a/lms/static/sass/course/_dates.scss b/lms/static/sass/course/_dates.scss
index 9fa6b3753f88..c2b55c3a691e 100644
--- a/lms/static/sass/course/_dates.scss
+++ b/lms/static/sass/course/_dates.scss
@@ -1,5 +1,5 @@
 .date-wrapper {
-  @extend .content;
+  @extend .content !optional;
 
   font-family: $helvetica;
 
diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss
index 86baef306830..491305519139 100644
--- a/lms/static/sass/course/_gradebook.scss
+++ b/lms/static/sass/course/_gradebook.scss
@@ -12,7 +12,7 @@ $table-border-color: #c8c8c8;
 
 div.gradebook-wrapper {
   section.gradebook-content {
-    @extend .content;
+    @extend .content !optional;
 
     display: block;
     width: 100%;
@@ -101,7 +101,7 @@ div.gradebook-wrapper {
 
       .left-shadow,
       .right-shadow {
-        @extend %ui-depth4;
+        @extend %ui-depth4 !optional;
 
         position: absolute;
         top: 0;
@@ -216,7 +216,7 @@ div.gradebook-wrapper {
     }
 
     h1 {
-      @extend .top-header;
+      @extend .top-header !optional;
     }
   }
 
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index b1331985c61b..00db2454a052 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -39,7 +39,7 @@ $notification-background: rgb(255, 255, 255) !default;
     border-radius: 2px;
 
     .last-accessed-link {
-      @extend %t-title6;
+      @extend %t-title6 !optional;
 
       color: $very-light-text;
     }
@@ -50,7 +50,7 @@ div.info-wrapper {
   background-color: $homepage-background;
 
   section.updates {
-    @extend .content;
+    @extend .content !optional;
 
     @include padding-left($baseline);
 
@@ -80,7 +80,7 @@ div.info-wrapper {
       }
 
       .show-older-updates {
-        @extend %btn-pl-white-base;
+        @extend %btn-pl-white-base !optional;
 
         padding: ($baseline/2);
 
@@ -102,7 +102,7 @@ div.info-wrapper {
 
       > li,
       article {
-        @extend .clearfix;
+        @extend .clearfix !optional;
 
         padding: $baseline;
         list-style-type: none;
@@ -118,7 +118,7 @@ div.info-wrapper {
         }
 
         .date {
-          @extend %t-title9;
+          @extend %t-title9 !optional;
 
           margin-bottom: ($baseline/4);
           text-transform: none;
@@ -130,7 +130,7 @@ div.info-wrapper {
 
 
         .toggle-visibility-button {
-          @extend %t-title9;
+          @extend %t-title9 !optional;
 
           @include float(right);
 
@@ -193,7 +193,7 @@ div.info-wrapper {
     padding: 20px 30px;
     margin: 0;
 
-    @extend .sidebar;
+    @extend .sidebar !optional;
 
     background: rgba(0, 0, 0, 0);
     box-shadow: none;
@@ -222,8 +222,8 @@ div.info-wrapper {
     .handouts-header {
       @include text-align(left);
 
-      @extend %t-strong;
-      @extend %t-title6;
+      @extend %t-strong !optional;
+      @extend %t-title6 !optional;
 
       margin-bottom: 0;
       padding: 12px 26px 10px 0;
diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss
index 76fece68f72a..cb44ee05174c 100644
--- a/lms/static/sass/course/_profile.scss
+++ b/lms/static/sass/course/_profile.scss
@@ -2,7 +2,7 @@
   color: $black;
 
   .user-info {
-    @extend .sidebar;
+    @extend .sidebar !optional;
 
     border-left: 1px solid #d3d3d3;
     border-radius: 0 4px 4px 0;
@@ -14,7 +14,7 @@
     }
 
     header {
-      @extend .bottom-border;
+      @extend .bottom-border !optional;
 
       margin: 0;
       padding: lh(0.5);
@@ -26,7 +26,7 @@
     }
 
     ul {
-      @extend %ui-no-list;
+      @extend %ui-no-list !optional;
 
       li {
         border-bottom: 1px solid #d3d3d3;
@@ -130,10 +130,10 @@
   }
 
   .course-info {
-    @extend .content;
+    @extend .content !optional;
 
     header {
-      @extend .clearfix;
+      @extend .clearfix !optional;
       @extend h1.top-header;
 
       margin-bottom: lh();
@@ -238,13 +238,13 @@
               display: inline-block;
 
               .fa-times {
-                @extend %t-icon6;
+                @extend %t-icon6 !optional;
 
                 color: $alert-color;
               }
 
               .fa-check {
-                @extend %t-icon6;
+                @extend %t-icon6 !optional;
 
                 color: theme-color("success");
               }
@@ -264,7 +264,7 @@
       padding-left: 0;
 
       > section {
-        @extend .clearfix;
+        @extend .clearfix !optional;
 
         border-bottom: 1px solid #e3e3e3;
         display: table;
diff --git a/lms/static/sass/course/_student-notes.scss b/lms/static/sass/course/_student-notes.scss
index 4cc3fe1f4009..60db372babee 100644
--- a/lms/static/sass/course/_student-notes.scss
+++ b/lms/static/sass/course/_student-notes.scss
@@ -27,7 +27,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
 %notes-tab-control {
   @include transition(none);
 
-  @extend %shame-link-base;
+  @extend %shame-link-base !optional;
 
   display: inline-block;
   vertical-align: middle;
@@ -46,7 +46,8 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
     .student-notes {
       @include clearfix();
 
-      @extend .content; // needed extend carried over from course handouts UI, but should be cleaned up
+      @extend .content !optional;
+ // needed extend carried over from course handouts UI, but should be cleaned up
 
       width: 100%;
     }
@@ -65,14 +66,14 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
       width: flex-grid(7, 12);
 
       .page-title {
-        @extend %t-title4;
-        @extend %t-weight1;
+        @extend %t-title4 !optional;
+        @extend %t-weight1 !optional;
 
         margin-bottom: 0;
 
         .page-subtitle {
-          @extend %t-title7;
-          @extend %t-weight2;
+          @extend %t-title7 !optional;
+          @extend %t-weight2 !optional;
 
           display: block;
           margin-top: ($baseline/4);
@@ -97,7 +98,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
     }
 
     .search-notes-input {
-      @extend %t-demi-strong;
+      @extend %t-demi-strong !optional;
 
       position: relative;
 
@@ -109,8 +110,8 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
     }
 
     .search-notes-submit {
-      @extend %btn-inherited-primary;
-      @extend %t-action2;
+      @extend %btn-inherited-primary !optional;
+      @extend %t-action2 !optional;
 
       padding: 8px $baseline 9px $baseline; // manually syncing up height with search input
     }
@@ -126,16 +127,16 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
     // course structure labels
     .course-title,
     .tags-title {
-      @extend %t-title6;
-      @extend %t-weight4;
+      @extend %t-title6 !optional;
+      @extend %t-weight4 !optional;
 
       margin: 0 0 ($baseline/2) 0;
       color: $gray-d3;
     }
 
     .course-subtitle {
-      @extend %t-title7;
-      @extend %t-weight4;
+      @extend %t-title7 !optional;
+      @extend %t-weight4 !optional;
 
       margin: 0 0 ($baseline/4) 0;
       border-bottom: $divider-visual-tertiary;
@@ -172,14 +173,14 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
           .note-excerpt-p,
           .note-excerpt-ul,
           .note-excerpt-ol {
-            @extend %t-copy-base;
+            @extend %t-copy-base !optional;
           }
         }
 
         .note-excerpt-more-link {
-          @extend %t-copy-sub1;
-          @extend %t-weight2;
-          @extend %shame-link-text;
+          @extend %t-copy-sub1 !optional;
+          @extend %t-weight2 !optional;
+          @extend %shame-link-text !optional;
 
           display: inline;
 
@@ -197,7 +198,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
 
         // note - comment made on highlighted content
         .note-comments {
-          @extend %ui-no-list;
+          @extend %ui-no-list !optional;
 
           border-top: ($baseline/5) solid $student-notes-highlight-color-focus;
 
@@ -208,7 +209,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
             color: $gray;
 
             .note-comment-title {
-              @extend %t-title8;
+              @extend %t-title8 !optional;
 
               letter-spacing: ($baseline/20);
               margin: 0 0 ($baseline/4) 0;
@@ -218,8 +219,8 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
             .note-comment-p,
             .note-comment-ul,
             .note-comment-ol {
-              @extend %t-copy-sub1;
-              @extend %t-weight2;
+              @extend %t-copy-sub1 !optional;
+              @extend %t-weight2 !optional;
 
               padding: 0;
               margin: 0;
@@ -246,7 +247,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
 
       // note reference
       .reference {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         display: inline-block;
         width: flex-grid(3, 12);
@@ -257,8 +258,8 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
           color: $gray-l2;
 
           .reference-title {
-            @extend %t-title8;
-            @extend %t-weight3;
+            @extend %t-title8 !optional;
+            @extend %t-weight3 !optional;
 
             margin-top: ($baseline/2);
             letter-spacing: ($baseline/20);
@@ -271,7 +272,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
           }
 
           .reference-meta {
-            @extend %t-weight2;
+            @extend %t-weight2 !optional;
 
             color: $m-gray-d2;
           }
@@ -297,7 +298,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
 
           // needed for poor base LMS styling scope
           a.reference-meta {
-            @extend %shame-link-text;
+            @extend %shame-link-text !optional;
           }
         }
       }
@@ -327,7 +328,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
     .tab-panel,
     .inline-error,
     .ui-loading {
-      @extend %no-outline;
+      @extend %no-outline !optional;
 
       border-top: $divider-visual-primary;
 
@@ -364,7 +365,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
       }
 
       .tabs-label {
-        @extend %hd-lv5;
+        @extend %hd-lv5 !optional;
 
         margin-bottom: 0;
         padding: ($baseline*0.75) 0;
@@ -378,7 +379,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
       .tabs {
         @include clearfix();
 
-        @extend %ui-no-list;
+        @extend %ui-no-list !optional;
 
         position: relative;
         bottom: -($baseline/4);
@@ -389,7 +390,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
         display: inline;
 
         .tab-label {
-          @extend %notes-tab-control;
+          @extend %notes-tab-control !optional;
 
           padding: ($baseline/2) ($baseline*0.75);
           text-align: center;
@@ -414,7 +415,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
 
         // CASE: tab-label can be closed
         .action-close {
-          @extend %notes-tab-control;
+          @extend %notes-tab-control !optional;
 
           position: relative;
 
@@ -431,7 +432,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
   // NOTE: not a lot of elements/classes to reference in this DOM
   #no-results-panel {
     p {
-      @extend %t-copy-lead1;
+      @extend %t-copy-lead1 !optional;
 
       margin: ($baseline*1.5) 0;
     }
@@ -456,7 +457,7 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
   }
 
   .placeholder-title {
-    @extend %hd-lv3;
+    @extend %hd-lv3 !optional;
 
     margin-bottom: $baseline;
     text-transform: none; // reset needed for poor h2 element styling
@@ -464,13 +465,13 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
   }
 
   .placeholder-copy {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     ul {
-      @extend %ui-no-list;
+      @extend %ui-no-list !optional;
 
       li {
-        @extend %wipe-last-child;
+        @extend %wipe-last-child !optional;
 
         display: block;
         margin-bottom: ($baseline/2);
@@ -484,10 +485,10 @@ $divider-visual-tertiary: ($baseline/20) solid $gray-l4;
   }
 
   .placeholder-cta-copy {
-    @extend %t-strong;
+    @extend %t-strong !optional;
 
     a {
-      @extend %t-strong;
+      @extend %t-strong !optional;
     }
   }
 }
diff --git a/lms/static/sass/course/_syllabus.scss b/lms/static/sass/course/_syllabus.scss
index 4fb063b83bc2..247ba75dbb3c 100644
--- a/lms/static/sass/course/_syllabus.scss
+++ b/lms/static/sass/course/_syllabus.scss
@@ -3,7 +3,7 @@ div.syllabus {
   text-align: center;
 
   h1 {
-    @extend .top-header;
+    @extend .top-header !optional;
   }
 
   .notes {
diff --git a/lms/static/sass/course/_tabs.scss b/lms/static/sass/course/_tabs.scss
index 4e58e2a6739a..b3c8a48e7d4a 100644
--- a/lms/static/sass/course/_tabs.scss
+++ b/lms/static/sass/course/_tabs.scss
@@ -3,7 +3,7 @@ div.static_tab_wrapper {
   padding: 2em 2.5em;
 
   h1 {
-    @extend .top-header;
+    @extend .top-header !optional;
   }
 
   section {
diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss
index 888db22b25eb..50a7336ec596 100755
--- a/lms/static/sass/course/_textbook.scss
+++ b/lms/static/sass/course/_textbook.scss
@@ -17,8 +17,8 @@ div.book-wrapper {
   }
 
   section.book-sidebar {
-    @extend .sidebar;
-    @extend .tran;
+    @extend .sidebar !optional;
+    @extend .tran !optional;
 
     box-sizing: border-box;
     padding: ($baseline/2) 0;
@@ -100,22 +100,22 @@ div.book-wrapper {
   }
 
   .book {
-    @extend .content;
+    @extend .content !optional;
 
     padding: 0;
     width: 76%;
 
     nav {
-      @extend .clearfix;
+      @extend .clearfix !optional;
 
       a {
-        @extend .block-link;
+        @extend .block-link !optional;
 
         padding: 0 lh();
       }
 
       ul {
-        @extend .clearfix;
+        @extend .clearfix !optional;
 
         li {
           position: absolute;
diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss
index e04763c4e9b5..875cc8d3d17a 100644
--- a/lms/static/sass/course/base/_base.scss
+++ b/lms/static/sass/course/base/_base.scss
@@ -28,7 +28,7 @@
     background: $container-bg;
     box-shadow: 0 1px 2px $shadow-l2;
 
-    @extend %ui-print-excluded;
+    @extend %ui-print-excluded !optional;
   }
 }
 
@@ -136,10 +136,10 @@ input[type="submit"],
 input[type="button"],
 button,
 .button {
-  @extend .gray-button;
+  @extend .gray-button !optional;
 
   form & {
-    @extend .gray-button;
+    @extend .gray-button !optional;
   }
 }
 
diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss
index b1f3f96c3b6e..eaf6717eef54 100644
--- a/lms/static/sass/course/base/_extends.scss
+++ b/lms/static/sass/course/base/_extends.scss
@@ -34,7 +34,7 @@ a.light-button, // only used in askbot as classes
 .gray-button {
   @include simple($gray-l5);
 
-  @extend .button-reset;
+  @extend .button-reset !optional;
 
   font-size: em(13);
 }
@@ -42,7 +42,7 @@ a.light-button, // only used in askbot as classes
 .blue-button {
   @include simple($blue);
 
-  @extend .button-reset;
+  @extend .button-reset !optional;
 
   font-size: em(13);
 }
@@ -50,7 +50,7 @@ a.light-button, // only used in askbot as classes
 .pink-button {
   @include simple($pink);
 
-  @extend .button-reset;
+  @extend .button-reset !optional;
 
   font-size: em(13);
 }
@@ -176,7 +176,7 @@ a.light-button, // only used in askbot as classes
 }
 
 .topbar {
-  @extend .clearfix;
+  @extend .clearfix !optional;
 
   border-bottom: 1px solid $border-color;
 
diff --git a/lms/static/sass/course/courseware/_amplifier.scss b/lms/static/sass/course/courseware/_amplifier.scss
index ac14587ed270..c04abcb61e24 100644
--- a/lms/static/sass/course/courseware/_amplifier.scss
+++ b/lms/static/sass/course/courseware/_amplifier.scss
@@ -1,6 +1,6 @@
 // JM MOSFET AMPLIFIER
 section.tool-wrapper {
-  @extend .clearfix;
+  @extend .clearfix !optional;
 
   background: #073642;
   border-bottom: 1px solid darken(#002b36, 10%);
@@ -74,7 +74,7 @@ section.tool-wrapper {
   }
 
   div#controlls-container {
-    @extend .clearfix;
+    @extend .clearfix !optional;
 
     background: darken(#073642, 2%);
     border-right: 1px solid darken(#002b36, 6%);
@@ -87,7 +87,7 @@ section.tool-wrapper {
 
     div.graph-controls {
       div.music-wrapper {
-        @extend .clearfix;
+        @extend .clearfix !optional;
 
         border-bottom: 1px solid darken(#073642, 10%);
         box-shadow: 0 1px 0 lighten(#073642, 2%);
@@ -121,7 +121,7 @@ section.tool-wrapper {
       }
 
       div.inputs-wrapper {
-        @extend .clearfix;
+        @extend .clearfix !optional;
 
         border-bottom: 1px solid darken(#073642, 10%);
         box-shadow: 0 1px 0 lighten(#073642, 2%);
@@ -203,7 +203,7 @@ section.tool-wrapper {
 
     div.schematic-sliders {
       div.top-sliders {
-        @extend .clearfix;
+        @extend .clearfix !optional;
 
         border-bottom: 1px solid darken(#073642, 10%);
         box-shadow: 0 1px 0 lighten(#073642, 2%);
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index de9df3eb3d35..76af843ae2aa 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -16,7 +16,7 @@ html.video-fullscreen {
 }
 
 .wrap-instructor-info {
-  @extend %ui-print-excluded;
+  @extend %ui-print-excluded !optional;
 
   margin: ($baseline/2) ($baseline/4) 0 0;
   display: none;
@@ -31,7 +31,7 @@ html.video-fullscreen {
   }
 
   .instructor-info-action {
-    @extend %t-copy-sub2;
+    @extend %t-copy-sub2 !optional;
 
     @include float(right);
     @include margin-left($baseline/2);
@@ -43,7 +43,7 @@ html.video-fullscreen {
     color: $staff-color;
     text-transform: uppercase;
 
-    @extend %ui-print-excluded;
+    @extend %ui-print-excluded !optional;
 
     &:hover {
       background-color: $staff-color;
@@ -68,7 +68,7 @@ html.video-fullscreen {
   .xblock-license {
     @include text-align(right);
 
-    @extend %t-title7;
+    @extend %t-title7 !optional;
 
     display: block;
     width: auto;
@@ -129,7 +129,7 @@ html.video-fullscreen {
 
   .course-content,
   .courseware-results-wrapper {
-    @extend .content;
+    @extend .content !optional;
 
     line-height: 1.6;
 
@@ -194,7 +194,7 @@ html.video-fullscreen {
 
         @include text-align(left);
 
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         width: 100%;
 
@@ -236,7 +236,7 @@ html.video-fullscreen {
       }
 
       .exam-action-button {
-        @extend %t-weight4;
+        @extend %t-weight4 !optional;
 
         @include margin-right($baseline);
 
@@ -245,7 +245,7 @@ html.video-fullscreen {
         text-shadow: none;
 
         &.btn-pl-primary {
-          @extend %btn-pl-primary-base;
+          @extend %btn-pl-primary-base !optional;
 
           border: 0;
 
@@ -305,7 +305,7 @@ html.video-fullscreen {
     }
 
     div.proctored-exam {
-      @extend .timed-exam;
+      @extend .timed-exam !optional;
 
       .proctored-exam-message {
         border-top: ($baseline/10) solid $uxpl-gray-background;
@@ -389,15 +389,15 @@ html.video-fullscreen {
       background-color: rgb(242, 244, 245);
 
       .msg-title {
-        @extend %t-title5;
-        @extend %t-strong;
+        @extend %t-title5 !optional;
+        @extend %t-strong !optional;
       }
 
       .msg-content {
         color: $gray-l1;
 
         strong {
-          @extend %t-strong;
+          @extend %t-strong !optional;
         }
       }
 
@@ -467,7 +467,7 @@ html.video-fullscreen {
     }
 
     .faq-proctoring-exam {
-      @extend .footer-sequence;
+      @extend .footer-sequence !optional;
 
       border-bottom: none;
 
@@ -497,7 +497,7 @@ html.video-fullscreen {
     }
 
     .path {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       margin-top: -($baseline);
       margin-bottom: $baseline;
@@ -630,7 +630,7 @@ html.video-fullscreen {
       }
 
       .vert {
-        @extend .clearfix;
+        @extend .clearfix !optional;
 
         border-bottom: 1px solid #ddd;
         margin-bottom: ($baseline*0.75);
diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss
index b0c948933482..39dffd085651 100644
--- a/lms/static/sass/course/courseware/_sidebar.scss
+++ b/lms/static/sass/course/courseware/_sidebar.scss
@@ -14,12 +14,12 @@
 
   // reseting bolded fonts for the course index
   .group-heading {
-    @extend %t-regular;
+    @extend %t-regular !optional;
   }
 
   // we're targetting the .class now, instead of the #id
   .accordion {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     .course-navigation {
       .button-chapter {
@@ -41,7 +41,7 @@
         -webkit-font-smoothing: subpixel-antialiased; // this brings back our nice, dark blue
 
         .group-heading {
-          @extend %t-title6;
+          @extend %t-title6 !optional;
 
           position: relative;
           display: block;
@@ -67,7 +67,7 @@
 
         &.active {
           .group-heading {
-            @extend %t-strong;
+            @extend %t-strong !optional;
 
             color: $body-color;
           }
@@ -96,14 +96,14 @@
           overflow: hidden;
 
           .menu-item {
-            @extend %t-strong;
+            @extend %t-strong !optional;
 
             margin: ($baseline/5) 0;
             background: inherit;
 
             a {
-              @extend %t-action3;
-              @extend %t-strong;
+              @extend %t-action3 !optional;
+              @extend %t-strong !optional;
 
               position: relative;
               display: block;
@@ -116,8 +116,8 @@
 
               p {
                 &.subtitle {
-                  @extend %t-action4;
-                  @extend %t-regular;
+                  @extend %t-action4 !optional;
+                  @extend %t-regular !optional;
 
                   display: block;
                   margin: 0;
@@ -170,7 +170,7 @@
 
             &.active {
               a {
-                @extend %t-ultrastrong;
+                @extend %t-ultrastrong !optional;
 
                 background: $gray-l4;
               }
@@ -185,5 +185,5 @@
     }
   }
 
-  @extend %ui-print-excluded;
+  @extend %ui-print-excluded !optional;
 }
diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss
index c57e53a1b701..882588925d47 100644
--- a/lms/static/sass/course/instructor/_instructor_2.scss
+++ b/lms/static/sass/course/instructor/_instructor_2.scss
@@ -1,7 +1,7 @@
 @mixin idashbutton ($color) {
   @include button(simple, $color);
 
-  @extend .button-reset;
+  @extend .button-reset !optional;
 
   margin-bottom: 1em;
   padding: 8px 17px;
@@ -146,7 +146,7 @@
   }
 
   .btn-blue {
-    @extend %btn-primary-blue;
+    @extend %btn-primary-blue !optional;
 
     margin-bottom: 0;
     padding: ($baseline/2.5) ($baseline/2);
@@ -221,7 +221,7 @@
 // instructor dashboard 2
 // ====================
 .instructor-dashboard-content-2 {
-  @extend .content;
+  @extend .content !optional;
 
   display: block; // override the table-cell display set in .content
   width: 100%;
@@ -263,7 +263,7 @@
   }
 
   .instructor-dashboard-title {
-    @extend .top-header;
+    @extend .top-header !optional;
 
     display: inline-block;
     margin-bottom: ($baseline*0.75);
@@ -285,12 +285,12 @@
   }
 
   .instructor-nav {
-    @extend %ui-no-list;
+    @extend %ui-no-list !optional;
 
     border-bottom: 1px solid $gray-l3;
 
     .nav-item {
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
 
       display: inline-block;
 
@@ -353,14 +353,14 @@
   }
 
   .message-title {
-    @extend %t-title6;
-    @extend %t-weight4;
+    @extend %t-title6 !optional;
+    @extend %t-weight4 !optional;
 
     margin-bottom: ($baseline/4);
   }
 
   .message-copy {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
   }
 
   .message-actions {
@@ -444,7 +444,7 @@
     }
 
     .description {
-      @extend %t-title7;
+      @extend %t-title7 !optional;
 
       @include float(right);
       @include text-align(right);
@@ -456,8 +456,8 @@
   }
 
   .subsection-title {
-    @extend %hd-lv5;
-    @extend %t-weight4;
+    @extend %hd-lv5 !optional;
+    @extend %t-weight4 !optional;
 
     margin-bottom: ($baseline/2);
   }
@@ -672,7 +672,7 @@
   }
 
   .batch-enrollment-ccx {
-    @extend .batch-enrollment;
+    @extend .batch-enrollment !optional;
 
     float: left;
     width: 100%;
@@ -693,7 +693,7 @@
     position: relative;
 
     .hint {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       display: block;
       position: absolute;
@@ -777,7 +777,7 @@
 
         .label,
         .form-label {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
           color: $lighter-base-font-color;
         }
@@ -808,7 +808,7 @@
 
           th,
           td {
-            @extend %t-copy-sub1;
+            @extend %t-copy-sub1 !optional;
 
             vertical-align: middle;
             padding: ($baseline/2) ($baseline/4);
@@ -857,7 +857,7 @@
   }
 
   .member-lists-management-ccx {
-    @extend .member-lists-management;
+    @extend .member-lists-management !optional;
 
     float: left;
     width: 100%;
@@ -881,14 +881,14 @@
 
       .label,
       .form-label {
-        @extend %t-title7;
-        @extend %t-weight4;
+        @extend %t-title7 !optional;
+        @extend %t-weight4 !optional;
 
         margin-bottom: ($baseline/2);
       }
 
       .tip {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         margin-top: ($baseline/4);
         color: $gray-l2;
@@ -926,7 +926,7 @@
     }
 
     .form-cancel {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
     }
   }
 
@@ -957,7 +957,7 @@
     .action-create {
       @include idashbutton($primary);
 
-      @extend %t-weight4;
+      @extend %t-weight4 !optional;
 
       @include float(right);
       @include text-align(right);
@@ -988,13 +988,13 @@
   // create or edit cohort
   .cohort-management-settings,
   .cohort-management-edit {
-    @extend %cohort-management-form;
+    @extend %cohort-management-form !optional;
 
     margin-bottom: $baseline;
 
     .form-title {
-      @extend %t-title5;
-      @extend %t-weight4;
+      @extend %t-title5 !optional;
+      @extend %t-weight4 !optional;
 
       padding: $baseline;
       background: $gray-l5;
@@ -1050,15 +1050,15 @@
     }
 
     .title-value {
-      @extend %t-title5;
-      @extend %t-weight4;
+      @extend %t-title5 !optional;
+      @extend %t-weight4 !optional;
 
       @include margin-right($baseline/4);
     }
 
     .group-count {
-      @extend %t-title7;
-      @extend %t-weight4;
+      @extend %t-title7 !optional;
+      @extend %t-weight4 !optional;
     }
 
     .action-edit-name {
@@ -1078,7 +1078,7 @@
   .cohort-management-group-setup {
     @include clearfix();
 
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     color: $gray-l2;
 
@@ -1098,17 +1098,17 @@
   }
 
   .cohort-management-group-add {
-    @extend %cohort-management-form;
+    @extend %cohort-management-form !optional;
 
     border: 1px solid $gray-l5;
 
     .message-title {
-      @extend %t-title7;
+      @extend %t-title7 !optional;
     }
 
     .form-title {
-      @extend %t-title6;
-      @extend %t-weight4;
+      @extend %t-title6 !optional;
+      @extend %t-weight4 !optional;
 
       margin-bottom: ($baseline/4);
       padding: 0;
@@ -1117,7 +1117,7 @@
     }
 
     .form-introduction {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       margin-bottom: $baseline;
 
@@ -1145,7 +1145,7 @@
   // cohort the discussion topics.
   .toggle-cohort-management-secondary,
   .toggle-cohort-management-discussions {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     background: transparent;
     border: none;
@@ -1162,11 +1162,11 @@
 
   .cohort-management-file-upload {
     .message-title {
-      @extend %t-title7;
+      @extend %t-title7 !optional;
     }
 
     .form-introduction {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       margin-bottom: $baseline;
 
@@ -1177,7 +1177,7 @@
   }
 
   .file-upload-form {
-    @extend %cohort-management-form;
+    @extend %cohort-management-form !optional;
 
     .form-fields {
       margin-bottom: $baseline;
@@ -1195,7 +1195,7 @@
   }
 
   .cohort-management-supplemental {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     margin-top: $baseline;
     padding: ($baseline/2) $baseline;
@@ -1289,7 +1289,7 @@
       }
 
       .cohort-details-name {
-        @extend %t-action1;
+        @extend %t-action1 !optional;
 
         display: block;
         width: 100%;
@@ -1310,8 +1310,8 @@
   }
 
   .wrapper-tabs { // This applies to the tab-like interface that toggles between the student management and the group settings
-    @extend %ui-no-list;
-    @extend %ui-depth1;
+    @extend %ui-no-list !optional;
+    @extend %ui-depth1 !optional;
 
     position: relative;
     top: 1px;
@@ -1413,7 +1413,7 @@
   }
 
   .discussions-management-supplemental {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     margin-top: $baseline;
     padding: ($baseline/2) $baseline;
@@ -1452,7 +1452,7 @@
     }
 
     .discussions-wrapper {
-      @extend %ui-no-list;
+      @extend %ui-no-list !optional;
 
       padding: 0 ($baseline/2);
 
@@ -1463,8 +1463,8 @@
   }
 
   .wrapper-tabs {
-    @extend %ui-no-list;
-    @extend %ui-depth1;
+    @extend %ui-no-list !optional;
+    @extend %ui-depth1 !optional;
 
     position: relative;
     top: 1px;
@@ -1904,7 +1904,7 @@ input[name="subject"] {
     .add {
       @include button(simple, $primary);
 
-      @extend .button-reset;
+      @extend .button-reset !optional;
 
       font-size: em(13);
 
@@ -2156,7 +2156,7 @@ input[name="subject"] {
     input[type="button"]#lookup_regcode {
       @include button(simple, $primary);
 
-      @extend .button-reset;
+      @extend .button-reset !optional;
 
       display: block;
       height: auto;
@@ -2168,7 +2168,7 @@ input[name="subject"] {
     input[name="generate-registration-codes-csv"] {
       @include button(simple, $primary);
 
-      @extend .button-reset;
+      @extend .button-reset !optional;
     }
 
     .modal-form-error {
@@ -2519,7 +2519,7 @@ input[name="subject"] {
     .add {
       @include button(simple, $primary);
 
-      @extend .button-reset;
+      @extend .button-reset !optional;
 
       font-size: em(13);
 
@@ -2547,7 +2547,7 @@ input[name="subject"] {
     .add {
       @include button(simple, $primary);
 
-      @extend .button-reset;
+      @extend .button-reset !optional;
 
       font-size: em(13);
     }
@@ -2579,7 +2579,7 @@ input[name="subject"] {
     .add {
       @include button(simple, $primary);
 
-      @extend .button-reset;
+      @extend .button-reset !optional;
 
       font-size: em(13);
     }
@@ -2612,7 +2612,7 @@ input[name="subject"] {
       }
 
       th {
-        @extend %t-action2;
+        @extend %t-action2 !optional;
 
         text-align: left;
         border-bottom: 1px solid $border-color-1;
@@ -2853,7 +2853,7 @@ input[name="subject"] {
 
   .certificates-wrapper {
     .message {
-      @extend %exception-message;
+      @extend %exception-message !optional;
     }
   }
 
@@ -2912,7 +2912,7 @@ input[name="subject"] {
       }
 
       .message {
-        @extend %exception-message;
+        @extend %exception-message !optional;
       }
     }
   }
@@ -2928,7 +2928,7 @@ input[name="subject"] {
       word-wrap: break-word;
 
       th {
-        @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
         background-color: $gray-l5;
         padding: ($baseline*0.75) ($baseline/2) ($baseline*0.75) ($baseline/2);
@@ -2993,7 +2993,7 @@ input[name="subject"] {
     }
 
     .message {
-      @extend %exception-message;
+      @extend %exception-message !optional;
     }
   }
 
diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss
index 5c04f2388d74..d940de5821d6 100644
--- a/lms/static/sass/course/layout/_courseware_header.scss
+++ b/lms/static/sass/course/layout/_courseware_header.scss
@@ -3,7 +3,7 @@
 
   box-sizing: border-box;
 
-  @extend %ui-print-excluded;
+  @extend %ui-print-excluded !optional;
 
   border-bottom: none;
   margin: 0 auto;
@@ -11,7 +11,7 @@
   width: 100%;
 
   .course-material {
-    @extend %inner-wrapper;
+    @extend %inner-wrapper !optional;
 
     @include media-breakpoint-down(md) {
       overflow-x: scroll;
@@ -46,8 +46,8 @@
       a:visited {
         @include padding(($baseline/2), ($baseline*0.75), 13px, ($baseline*0.75));
 
-        @extend %t-title7;
-        @extend %t-regular;
+        @extend %t-title7 !optional;
+        @extend %t-regular !optional;
 
         color: theme-color("dark");
         display: block;
diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss
index 53bfa3717543..3003608eab77 100644
--- a/lms/static/sass/course/layout/_courseware_preview.scss
+++ b/lms/static/sass/course/layout/_courseware_preview.scss
@@ -13,7 +13,7 @@ $proctoring-banner-text-size: 14px;
   }
 
   .preview-menu {
-    @extend %inner-wrapper;
+    @extend %inner-wrapper !optional;
 
     width: auto;
 
@@ -64,7 +64,7 @@ $proctoring-banner-text-size: 14px;
 .proctored_exam_status {
   // STATE: Fixed to viewport (used for scrolling)
   &.is-fixed {
-    @extend %ui-depth4;
+    @extend %ui-depth4 !optional;
 
     box-shadow: 0 3px 3px $shadow-d1;
     position: fixed;
@@ -169,9 +169,9 @@ $proctoring-banner-text-size: 14px;
     }
 
     .exam-button-turn-in-exam {
-      @extend %btn-pl-primary-base;
-      @extend %t-action3;
-      @extend %t-weight4;
+      @extend %btn-pl-primary-base !optional;
+      @extend %t-action3 !optional;
+      @extend %t-weight4 !optional;
 
       margin-right: $baseline;
       border: 0;
@@ -193,7 +193,7 @@ $proctoring-banner-text-size: 14px;
       border-radius: 3px;
 
       #toggle_timer {
-        @extend .exam-button-turn-in-exam;
+        @extend .exam-button-turn-in-exam !optional;
 
         padding: ($baseline/5) ($baseline/3);
         border-bottom-left-radius: 0;
diff --git a/lms/static/sass/course/modules/_calculator.scss b/lms/static/sass/course/modules/_calculator.scss
index 000180afcc28..177066d70b59 100644
--- a/lms/static/sass/course/modules/_calculator.scss
+++ b/lms/static/sass/course/modules/_calculator.scss
@@ -2,7 +2,7 @@
 // ====================
 
 .calc-main {
-  @extend %ui-print-excluded;
+  @extend %ui-print-excluded !optional;
 
   bottom: -129px;
   left: 0;
@@ -66,7 +66,7 @@
     }
 
     form {
-      @extend .clearfix;
+      @extend .clearfix !optional;
 
       box-sizing: border-box;
       padding: lh();
@@ -126,7 +126,7 @@
       }
 
       .input-wrapper {
-        @extend .clearfix;
+        @extend .clearfix !optional;
 
         float: left;
         margin: 0;
diff --git a/lms/static/sass/course/modules/_student-notes.scss b/lms/static/sass/course/modules/_student-notes.scss
index d54a1de7073f..97597bbea34f 100644
--- a/lms/static/sass/course/modules/_student-notes.scss
+++ b/lms/static/sass/course/modules/_student-notes.scss
@@ -68,8 +68,8 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
 // --------------------
 .edx-notes-visibility {
   .edx-notes-visibility-error {
-    @extend %t-copy-sub2;
-    @extend %text-truncated;
+    @extend %t-copy-sub2 !optional;
+    @extend %text-truncated !optional;
 
     position: relative;
     bottom: -($baseline/20); // needed to sync up with current rogue/more complex calc utility alignment
@@ -100,8 +100,8 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
 
 // CASE: annotator error in toggling notes (vendor customization)
 .annotator-notice {
-  @extend %t-weight4;
-  @extend %t-copy-sub1;
+  @extend %t-weight4 !optional;
+  @extend %t-copy-sub1 !optional;
 
   padding: ($baseline/4) $baseline;
   background: $black-t3;
@@ -110,8 +110,8 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
 // CASE: annotator error in toggling notes
 // vendor customization
 .annotator-notice {
-  @extend %t-weight4;
-  @extend %t-copy-sub1;
+  @extend %t-weight4 !optional;
+  @extend %t-copy-sub1 !optional;
 
   padding: ($baseline/2) $baseline;
   background: $gray-d4;
@@ -130,13 +130,13 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
   // +individual note (in context)
   // --------------------
   .annotator-outer {
-    @extend %ui-depth4;
-    @extend %notes-reset-font;
+    @extend %ui-depth4 !optional;
+    @extend %notes-reset-font !optional;
   }
 
   // bubble
   .annotator-widget.annotator-widget {
-    @extend %notes-bubble;
+    @extend %notes-bubble !optional;
   }
 
   .annotator-listing {
@@ -145,7 +145,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
 
     .annotator-widget {
       &::after {
-        @extend %bubble;
+        @extend %bubble !optional;
       }
     }
   }
@@ -153,7 +153,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
   .annotator-editor {
     .annotator-widget {
       &::after {
-        @extend %bubble;
+        @extend %bubble !optional;
 
         background: $gray-l5;
       }
@@ -169,18 +169,18 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
   // --------------------
   // adding
   .annotator-adder {
-    @extend %notes-reset-background;
-    @extend %ui-depth4;
+    @extend %notes-reset-background !optional;
+    @extend %ui-depth4 !optional;
 
     button {
-      @extend %notes-bubble;
+      @extend %notes-bubble !optional;
 
       position: relative;
       display: block;
 
       &::after {
-        @extend %notes-reset-icon;
-        @extend %shame-link-base;
+        @extend %notes-reset-icon !optional;
+        @extend %shame-link-base !optional;
 
         @include font-size(30);
 
@@ -194,7 +194,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
 
       // using annotatorJS triangle styling for adder
       &::before {
-        @extend %bubble;
+        @extend %bubble !optional;
 
         @include left(10px);
 
@@ -209,7 +209,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
       @include text-align(left);
       @include clearfix();
 
-      @extend %ui-depth1;
+      @extend %ui-depth1 !optional;
 
       position: relative;
       padding: 8px;
@@ -221,7 +221,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
       // actions
       .annotator-save,
       .annotator-cancel {
-        @extend %notes-reset-background;
+        @extend %notes-reset-background !optional;
 
         padding: ($baseline/4) ($baseline/2) !important;
         border: none;
@@ -247,8 +247,8 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
 
     .annotator-item {
       textarea {
-        @extend %notes-reset-font;
-        @extend %t-demi-strong;
+        @extend %notes-reset-font !optional;
+        @extend %t-demi-strong !optional;
 
         padding: ($baseline/5) !important;
         font-size: 14px !important;
@@ -285,7 +285,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
       // STATE: disabled
       &:disabled,
       &.is-disabled {
-        @extend %ui-disabled;
+        @extend %ui-disabled !optional;
 
         opacity: 0.5;
         cursor: not-allowed;
@@ -312,7 +312,7 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
 
     // poorly scoped selector for content of a note's comment
     div:first-of-type {
-      @extend %notes-reset-font;
+      @extend %notes-reset-font !optional;
 
       padding: ($baseline/4) !important;
       font-size: 14px !important;
@@ -339,9 +339,9 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
         vertical-align: middle;
 
         &::before {
-          @extend %notes-reset-icon;
-          @extend %shame-link-base;
-          @extend %t-icon4;
+          @extend %notes-reset-icon !optional;
+          @extend %shame-link-base !optional;
+          @extend %t-icon4 !optional;
 
           position: absolute;
         }
@@ -386,18 +386,18 @@ $notes-annotator-background-dark: rgba(122, 122, 122, 0.6); // taken from annota
 // +necessary, but ugly overrides
 // --------------------
 .edx-notes-wrapper .annotator-wrapper.annotator-wrapper .annotator-outer.annotator-viewer .annotator-controls button {
-  @extend %notes-reset-background;
+  @extend %notes-reset-background !optional;
 
   opacity: 1;
 }
 
 .edx-notes-wrapper .annotator-wrapper .annotator-editor.annotator-outer button.annotator-save {
-  @extend %btn-inherited-primary;
-  @extend %t-action2;
+  @extend %btn-inherited-primary !optional;
+  @extend %t-action2 !optional;
 }
 
 .edx-notes-wrapper .annotator-wrapper .annotator-editor.annotator-outer button.annotator-cancel {
-  @extend %shame-link-base;
-  @extend %t-action2;
-  @extend %t-regular;
+  @extend %shame-link-base !optional;
+  @extend %t-action2 !optional;
+  @extend %t-regular !optional;
 }
diff --git a/lms/static/sass/course/modules/_timer.scss b/lms/static/sass/course/modules/_timer.scss
index af22961e14c6..1d7cf60cc418 100644
--- a/lms/static/sass/course/modules/_timer.scss
+++ b/lms/static/sass/course/modules/_timer.scss
@@ -2,7 +2,7 @@
 // ====================
 
 div.timer-main {
-  @extend %ui-depth2;
+  @extend %ui-depth2 !optional;
 
   position: fixed;
   top: 0;
diff --git a/lms/static/sass/course/wiki/_sidebar.scss b/lms/static/sass/course/wiki/_sidebar.scss
index 32952697a5f4..d0fefb3654b6 100644
--- a/lms/static/sass/course/wiki/_sidebar.scss
+++ b/lms/static/sass/course/wiki/_sidebar.scss
@@ -1,5 +1,5 @@
 div#wiki_panel {
-  @extend .sidebar;
+  @extend .sidebar !optional;
 
   overflow: auto;
 
@@ -16,7 +16,7 @@ div#wiki_panel {
   }
 
   div#wiki_create_form {
-    @extend .clearfix;
+    @extend .clearfix !optional;
 
     padding: lh(0.5) lh() lh(0.5) 0;
 
diff --git a/lms/static/sass/course/wiki/_table.scss b/lms/static/sass/course/wiki/_table.scss
index 3c3bfcc7dac3..b5acde99e201 100644
--- a/lms/static/sass/course/wiki/_table.scss
+++ b/lms/static/sass/course/wiki/_table.scss
@@ -44,6 +44,6 @@ div.history-controls {
   margin-top: $baseline;
 
   input[type="submit"] {
-    @extend .light-button;
+    @extend .light-button !optional;
   }
 }
diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss
index b3023af1d7bb..5f45e22cac96 100644
--- a/lms/static/sass/course/wiki/_wiki.scss
+++ b/lms/static/sass/course/wiki/_wiki.scss
@@ -382,7 +382,7 @@
     }
 
     &::before {
-      @extend %ui-depth4;
+      @extend %ui-depth4 !optional;
 
       content: 'click to edit schematic';
       position: absolute;
@@ -457,7 +457,7 @@
   }
 
   .modal {
-    @extend %ui-depth4;
+    @extend %ui-depth4 !optional;
 
     width: 960px;
     min-height: 500px;
@@ -978,7 +978,7 @@
 }
 
 .modal-backdrop {
-  @extend %ui-depth3;
+  @extend %ui-depth3 !optional;
 
   position: fixed;
   top: 0;
diff --git a/lms/static/sass/discussion/_discussion-v1.scss b/lms/static/sass/discussion/_discussion-v1.scss
index 0a6a26d6c181..2b2187238abd 100644
--- a/lms/static/sass/discussion/_discussion-v1.scss
+++ b/lms/static/sass/discussion/_discussion-v1.scss
@@ -57,14 +57,14 @@
 .discussion-module,
 .wmd-prompt-dialog {
   .btn {
-    @extend %pattern-library-btn;
+    @extend %pattern-library-btn !optional;
 
     background-color: $forum-color-background;
     color: $forum-color-active-thread;
   }
 
   .btn-brand {
-    @extend %pattern-library-btn;
+    @extend %pattern-library-btn !optional;
 
     background-color: $forum-color-active-thread;
     color: $forum-color-active-text;
diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss
index 68643e0c9921..25c4f246c77c 100644
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/lms/static/sass/discussion/_discussion.scss
@@ -56,7 +56,7 @@
 
 // inline discussion module
 .discussion-module {
-  @extend .discussion-body;
+  @extend .discussion-body !optional;
 
   display: block;
   position: relative;
@@ -128,7 +128,7 @@ section.discussion {
 }
 
 .xblock-student_view-discussion {
-  @extend %ui-print-excluded;
+  @extend %ui-print-excluded !optional;
   // Overrides overspecific courseware CSS from:
   // https://github.com/edx/edx-platform/blob/master/lms/static/sass/course/courseware/_courseware.scss#L499
   padding-top: 15px !important;
diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss
index 91b6ee7ec2b9..74711c5ff517 100644
--- a/lms/static/sass/discussion/elements/_actions.scss
+++ b/lms/static/sass/discussion/elements/_actions.scss
@@ -7,7 +7,7 @@
   .post-actions-list,
   .response-actions-list,
   .comment-actions-list {
-    @extend %ui-no-list;
+    @extend %ui-no-list !optional;
 
     @include text-align(right);
 
@@ -52,8 +52,8 @@
 
   // UI: general actions dropdown layout
   .actions-dropdown {
-    @extend %ui-no-list;
-    @extend %ui-depth1;
+    @extend %ui-no-list !optional;
+    @extend %ui-depth1 !optional;
 
     @include right(0);
 
@@ -148,7 +148,7 @@
     }
 
     .action-label {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       display: none;
       vertical-align: middle;
@@ -286,7 +286,7 @@
 
     // UI: secondary action
     .action-list-item {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       @include text-align(right);
 
diff --git a/lms/static/sass/discussion/elements/_editor.scss b/lms/static/sass/discussion/elements/_editor.scss
index 750b0ad9a2b4..9f45f4cf016c 100644
--- a/lms/static/sass/discussion/elements/_editor.scss
+++ b/lms/static/sass/discussion/elements/_editor.scss
@@ -120,7 +120,7 @@
 }
 
 .wmd-prompt-dialog {
-  @extend .modal;
+  @extend .modal !optional;
 
   background: $forum-color-background;
   padding: $baseline;
diff --git a/lms/static/sass/discussion/elements/_labels.scss b/lms/static/sass/discussion/elements/_labels.scss
index 2609889c2a6c..dd1266214bae 100644
--- a/lms/static/sass/discussion/elements/_labels.scss
+++ b/lms/static/sass/discussion/elements/_labels.scss
@@ -5,7 +5,7 @@
   .post-label {
     @include margin($baseline/4, $baseline/2, 0, 0);
 
-    @extend %t-light;
+    @extend %t-light !optional;
 
     font-size: $forum-small-font-size;
     display: inline;
diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss
index ad5daead77e0..f0a9bb925634 100644
--- a/lms/static/sass/discussion/elements/_navigation.scss
+++ b/lms/static/sass/discussion/elements/_navigation.scss
@@ -159,17 +159,17 @@
 }
 
 .forum-nav-filter-main-control {
-  @extend %forum-nav-select;
+  @extend %forum-nav-select !optional;
 }
 
 .forum-nav-filter-cohort-control {
-  @extend %forum-nav-select;
+  @extend %forum-nav-select !optional;
 
   max-width: 60%;
 }
 
 .forum-nav-sort-control {
-  @extend %forum-nav-select;
+  @extend %forum-nav-select !optional;
 }
 
 // -----------
@@ -276,7 +276,7 @@
 }
 
 .forum-nav-thread-wrapper-0 {
-  @extend %forum-nav-thread-wrapper;
+  @extend %forum-nav-thread-wrapper !optional;
 
   @include margin-right($baseline/5);
 
@@ -296,7 +296,7 @@
 }
 
 .forum-nav-thread-wrapper-1 {
-  @extend %forum-nav-thread-wrapper;
+  @extend %forum-nav-thread-wrapper !optional;
 
   margin: 0 ($baseline / 4);
   // 125 is the width we need to save for the "X new" comments indicator - and we want to clip the preview
@@ -306,7 +306,7 @@
 }
 
 .forum-nav-thread-wrapper-2 {
-  @extend %forum-nav-thread-wrapper;
+  @extend %forum-nav-thread-wrapper !optional;
 
   @include text-align(right);
 
@@ -335,12 +335,12 @@
 }
 
 .forum-nav-thread-votes-count {
-  @extend %forum-nav-thread-wrapper-2-content;
+  @extend %forum-nav-thread-wrapper-2-content !optional;
 }
 
 .forum-nav-thread-comments-count {
-  @extend %forum-nav-thread-wrapper-2-content;
-  @extend %t-weight4;
+  @extend %forum-nav-thread-wrapper-2-content !optional;
+  @extend %t-weight4 !optional;
 
   position: relative;
 
@@ -382,7 +382,7 @@
 }
 
 .forum-nav-load-more-link {
-  @extend %forum-nav-load-more-content;
+  @extend %forum-nav-load-more-content !optional;
 
   color: $link-color;
   width: 100%;
@@ -397,5 +397,5 @@
 }
 
 .forum-nav-loading {
-  @extend %forum-nav-load-more-content;
+  @extend %forum-nav-load-more-content !optional;
 }
diff --git a/lms/static/sass/discussion/utilities/_developer.scss b/lms/static/sass/discussion/utilities/_developer.scss
index 9a5b2270af23..fe50af16cf7b 100644
--- a/lms/static/sass/discussion/utilities/_developer.scss
+++ b/lms/static/sass/discussion/utilities/_developer.scss
@@ -43,7 +43,7 @@
       color: $white;
 
       em {
-        @extend %t-weight5;
+        @extend %t-weight5 !optional;
 
         font-style: italic;
       }
@@ -53,7 +53,7 @@
     .link-jump {
       @include transition(none);
 
-      @extend %t-weight5;
+      @extend %t-weight5 !optional;
     }
   }
 
@@ -66,7 +66,7 @@
     .control {
       @include transition(none);
 
-      @extend %t-weight5;
+      @extend %t-weight5 !optional;
 
       padding: ($baseline/4) ($baseline/2);
       color: $white;
diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss
index b1cdb031f9b7..52593dc062b8 100644
--- a/lms/static/sass/discussion/utilities/_shame.scss
+++ b/lms/static/sass/discussion/utilities/_shame.scss
@@ -88,7 +88,7 @@ li[class*=forum-nav-thread-label-] {
   .post-actions-list,
   .response-actions-list,
   .comment-actions-list {
-    @extend %t-copy-sub2;
+    @extend %t-copy-sub2 !optional;
   }
 
   // Override global span
diff --git a/lms/static/sass/discussion/utilities/_v1-compatibility.scss b/lms/static/sass/discussion/utilities/_v1-compatibility.scss
index 982a8ff3a379..4a48073b2e4a 100644
--- a/lms/static/sass/discussion/utilities/_v1-compatibility.scss
+++ b/lms/static/sass/discussion/utilities/_v1-compatibility.scss
@@ -62,7 +62,7 @@
 }
 
 %t-copy-sub1 {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include line-height(14);
 
@@ -70,7 +70,7 @@
 }
 
 %t-copy-sub2 {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include line-height(12);
 
diff --git a/lms/static/sass/discussion/views/_home.scss b/lms/static/sass/discussion/views/_home.scss
index 6df353907fff..df6291704a41 100644
--- a/lms/static/sass/discussion/views/_home.scss
+++ b/lms/static/sass/discussion/views/_home.scss
@@ -17,7 +17,7 @@
   }
 
   .label {
-    @extend %t-copy-sub2;
+    @extend %t-copy-sub2 !optional;
 
     display: block;
   }
@@ -38,7 +38,7 @@
   }
 
   .home-description {
-    @extend %t-copy-sub2;
+    @extend %t-copy-sub2 !optional;
 
     margin-bottom: ($baseline/2);
   }
@@ -64,7 +64,7 @@
       width: 70%;
 
       .profile-stat {
-        @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
         display: inline-block;
         width: 32.5%;
diff --git a/lms/static/sass/discussion/views/_response.scss b/lms/static/sass/discussion/views/_response.scss
index 5cd9bfd56f37..ab63f3b830be 100644
--- a/lms/static/sass/discussion/views/_response.scss
+++ b/lms/static/sass/discussion/views/_response.scss
@@ -12,7 +12,7 @@
 
 // +wrapper - response list
 .discussion .responses {
-  @extend %ui-no-list;
+  @extend %ui-no-list !optional;
 
   &:empty {
     display: none;
@@ -39,7 +39,7 @@
   }
 
   .posted-by {
-    @extend %t-ultrastrong;
+    @extend %t-ultrastrong !optional;
   }
 }
 
@@ -49,7 +49,7 @@
 
     // CASE: larger username for responses
     .username {
-      @extend %t-weight5;
+      @extend %t-weight5 !optional;
 
       font-size: $forum-base-font-size;
     }
@@ -142,7 +142,7 @@
 
 // +comments styling
 .discussion .comments {
-  @extend %ui-no-list;
+  @extend %ui-no-list !optional;
 
   @include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
 
diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss
index baa81109474a..df9b65505ade 100644
--- a/lms/static/sass/discussion/views/_thread.scss
+++ b/lms/static/sass/discussion/views/_thread.scss
@@ -21,14 +21,14 @@
 // post article
 .discussion-article {
   .posted-details {
-    @extend %t-copy-sub2;
-    @extend %t-light;
+    @extend %t-copy-sub2 !optional;
+    @extend %t-light !optional;
 
     margin: ($baseline/5) 0;
     color: $forum-color-copy-light;
 
     .username {
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       display: inline;
     }
@@ -73,14 +73,14 @@
 
   // response body
   .response-body {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
   }
 }
 
 // comments layout
 .discussion-comment {
   .response-body {
-    @extend %t-copy-sub2;
+    @extend %t-copy-sub2 !optional;
 
     @include padding(($baseline / 2), ($baseline * 1.5), 0, 0);
 
@@ -174,7 +174,7 @@
 
   // post body
   .post-body {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     padding: ($baseline/2) 0;
     max-width: calc(100% - #{$actions-dropdown-offset});
@@ -182,8 +182,8 @@
 
   // post context
   .post-context {
-    @extend %t-copy-sub2;
-    @extend %t-light;
+    @extend %t-copy-sub2 !optional;
+    @extend %t-light !optional;
 
     color: $forum-color-copy-light;
 
@@ -229,7 +229,7 @@
         .inline-comment-count {
           @include margin-right($baseline/2);
 
-          @extend %ui-depth2;
+          @extend %ui-depth2 !optional;
 
           @include float(right);
 
diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss
index 8f89339805b3..79cf4b8d553e 100644
--- a/lms/static/sass/elements/_controls.scss
+++ b/lms/static/sass/elements/_controls.scss
@@ -58,7 +58,7 @@
 }
 
 %btn-inherited-primary {
-  @extend %btn-inherited;
+  @extend %btn-inherited !optional;
 
   @include linear-gradient(top, rgba($white, 0.3), rgba($white, 0));
 
@@ -86,9 +86,9 @@
 
 // primary button
 %btn-primary {
-  @extend %t-weight3;
-  @extend %btn;
-  @extend %btn-edged;
+  @extend %t-weight3 !optional;
+  @extend %btn !optional;
+  @extend %btn-edged !optional;
 
   border: none;
   padding: ($baseline*0.75) $baseline;
@@ -105,7 +105,7 @@
 
 // blue primary gray
 %btn-primary-gray {
-  @extend %btn-primary;
+  @extend %btn-primary !optional;
 
   box-shadow: 0 2px 1px 0 $m-gray-d2;
   background: $m-gray;
@@ -140,7 +140,7 @@
 
 // blue primary error color
 %btn-primary-error {
-  @extend %btn-primary;
+  @extend %btn-primary !optional;
 
   box-shadow: 0 2px 1px 0 shade($error-color, 25%);
   background: shade($error-color, 25%);
@@ -161,7 +161,7 @@
 
 // blue primary button
 %btn-primary-blue {
-  @extend %btn-primary;
+  @extend %btn-primary !optional;
 
   background: $m-blue-d3;
   color: $white;
@@ -193,7 +193,7 @@
 
 // pink primary button
 %btn-primary-pink {
-  @extend %btn-primary;
+  @extend %btn-primary !optional;
 
   box-shadow: 0 2px 1px 0 $m-pink-d2;
   background: $m-pink;
@@ -228,7 +228,7 @@
 
 // green primary button
 %btn-primary-green {
-  @extend %btn-primary;
+  @extend %btn-primary !optional;
 
   box-shadow: 0 2px 1px 0 $m-green-d2;
   background: $m-green-d1;
@@ -277,9 +277,9 @@
 
 // blue secondary button outline style
 %btn-secondary-blue-outline {
-  @extend %t-action2;
-  @extend %btn;
-  @extend %btn-edged;
+  @extend %t-action2 !optional;
+  @extend %btn !optional;
+  @extend %btn-edged !optional;
 
   box-shadow: none;
   border: 1px solid $m-blue-d3;
@@ -317,7 +317,7 @@
 
 // grey secondary button outline style
 %btn-secondary-grey-outline {
-  @extend %btn-secondary-blue-outline;
+  @extend %btn-secondary-blue-outline !optional;
 
   border: 1px solid $gray-l4;
 
@@ -339,11 +339,11 @@
 %btn-pl-default-base {
   box-sizing: border-box;
 
-  @extend %t-copy-base;
+  @extend %t-copy-base !optional;
 
   letter-spacing: 0; // reset letterspacing from elsewhere
 
-  @extend %btn-primary;
+  @extend %btn-primary !optional;
 
   border: 1px solid darken($action-primary-bg, 10%);
   border-radius: 3px;
@@ -362,21 +362,21 @@
 }
 
 %btn-pl-primary-base {
-  @extend %btn-pl-default-base;
+  @extend %btn-pl-default-base !optional;
 
   background-color: darken($action-primary-bg, 10%);
   color: $action-primary-fg;
 }
 
 %btn-pl-white-base {
-  @extend %btn-pl-default-base;
+  @extend %btn-pl-default-base !optional;
 
   background-color: $action-primary-fg;
   color: $action-primary-bg;
 }
 
 %btn-pl-green-base {
-  @extend %btn-pl-default-base;
+  @extend %btn-pl-default-base !optional;
 
   background-color: darken($green-d1, 10%);
   color: $action-primary-fg;
@@ -389,7 +389,7 @@
 }
 
 %btn-pl-yellow-base {
-  @extend %btn-pl-default-base;
+  @extend %btn-pl-default-base !optional;
 
   border: 1px solid transparent;
   background-color: $credit-color-base;
@@ -403,7 +403,7 @@
 }
 
 %btn-pl-black-border {
-  @extend %btn-pl-default-base;
+  @extend %btn-pl-default-base !optional;
 
   border: 1px solid $m-gray-d4;
   background-color: transparent;
@@ -417,7 +417,7 @@
 }
 
 %btn-pl-black-base {
-  @extend %btn-pl-default-base;
+  @extend %btn-pl-default-base !optional;
 
   border: 1px solid transparent;
   background-color: $m-gray-d4;
@@ -432,7 +432,7 @@
 }
 
 %btn-pl-secondary-base {
-  @extend %btn-pl-default-base;
+  @extend %btn-pl-default-base !optional;
 
   @include transition(border $tmg-f2 ease-in-out);
 
@@ -447,7 +447,7 @@
 }
 
 %btn-pl-elevated-alt {
-  @extend %btn-pl-default-base;
+  @extend %btn-pl-default-base !optional;
 
   box-shadow: 0 3px 0 0 $gray-l4;
   border: 1px solid $gray-l4;
@@ -469,20 +469,20 @@
 }
 
 .btn-large {
-  @extend %t-action1;
-  @extend %t-weight3;
+  @extend %t-action1 !optional;
+  @extend %t-weight3 !optional;
 
   display: block;
   padding: ($baseline*0.75) ($baseline*1.5);
 }
 
 .btn-avg {
-  @extend %t-action2;
-  @extend %t-weight3;
+  @extend %t-action2 !optional;
+  @extend %t-weight3 !optional;
 }
 
 .btn-blue {
-  @extend %btn-primary-blue;
+  @extend %btn-primary-blue !optional;
 
   margin-bottom: $baseline;
 
@@ -493,7 +493,7 @@
 }
 
 .btn-pink {
-  @extend %btn-primary-pink;
+  @extend %btn-primary-pink !optional;
 
   margin-bottom: $baseline;
 
@@ -504,7 +504,7 @@
 }
 
 .btn-secondary {
-  @extend %btn-pl-secondary-base;
+  @extend %btn-pl-secondary-base !optional;
 
   background-image: none;
 
@@ -517,7 +517,7 @@
 }
 
 .btn-link {
-  @extend %shame-link-text;
+  @extend %shame-link-text !optional;
 
   // reset of inherited buttons
   border-radius: 0;
@@ -529,8 +529,8 @@
   text-shadow: none;
   white-space: nowrap;
 
-  @extend %t-action3;
-  @extend %t-strong;
+  @extend %t-action3 !optional;
+  @extend %t-strong !optional;
 
   &:focus,
   &:hover {
diff --git a/lms/static/sass/elements/_course-card.scss b/lms/static/sass/elements/_course-card.scss
index 47209b04b20d..1d8378d3419a 100644
--- a/lms/static/sass/elements/_course-card.scss
+++ b/lms/static/sass/elements/_course-card.scss
@@ -11,7 +11,7 @@
   padding: $baseline/2 0;
 
   .section {
-    @extend .grid-manual;
+    @extend .grid-manual !optional;
 
     padding: $baseline/2 $baseline;
   }
diff --git a/lms/static/sass/elements/_navigation.scss b/lms/static/sass/elements/_navigation.scss
index 0bf6d9a22324..711a7eb3e24a 100644
--- a/lms/static/sass/elements/_navigation.scss
+++ b/lms/static/sass/elements/_navigation.scss
@@ -18,26 +18,26 @@
 // +skip navigation
 // --------------------
 %nav-skip {
-  @extend %text-sr;
+  @extend %text-sr !optional;
 }
 
 .nav-contents,
 .nav-skip,
 .transcript-skip {
-  @extend %nav-skip;
+  @extend %nav-skip !optional;
 }
 
 // +utility navigation (course utiltiies)
 // --------------------
 .nav-utilities {
-  @extend %ui-depth3;
+  @extend %ui-depth3 !optional;
 
   position: fixed;
   right: ($baseline/4);
   bottom: 0;
 
   .wrapper-utility {
-    @extend %wipe-last-child;
+    @extend %wipe-last-child !optional;
 
     display: inline-block;
     vertical-align: bottom;
@@ -89,7 +89,7 @@
 
   // specific utility navigation - student notes toggling
   .action-toggle-notes {
-    @extend %no-outline;
+    @extend %no-outline !optional;
 
     // STATE: is active/in use
     &.is-active {
@@ -100,8 +100,8 @@
   // +toggling utilities
   // --------------------
   .action-toggle-message {
-    @extend %t-title8;
-    @extend %t-strong;
+    @extend %t-title8 !optional;
+    @extend %t-strong !optional;
 
     position: absolute;
     bottom: 0;
@@ -144,7 +144,7 @@
   border-bottom: 1px solid $gray-l5;
 
   .nav-item {
-    @extend %button-reset;
+    @extend %button-reset !optional;
 
     display: inline-block;
     padding: ($baseline*0.75);
diff --git a/lms/static/sass/elements/_pagination.scss b/lms/static/sass/elements/_pagination.scss
index f41d0c7aeeee..73b8038eb883 100644
--- a/lms/static/sass/elements/_pagination.scss
+++ b/lms/static/sass/elements/_pagination.scss
@@ -56,7 +56,7 @@
   }
 
   .nav-label {
-    @extend %text-sr;
+    @extend %text-sr !optional;
   }
 
   .pagination-form,
@@ -69,8 +69,8 @@
   .current-page,
   .page-number-input,
   .total-pages {
-    @extend %t-copy-base;
-    @extend %t-strong;
+    @extend %t-copy-base !optional;
+    @extend %t-strong !optional;
 
     width: ($baseline*2.5);
     vertical-align: middle;
@@ -81,7 +81,7 @@
   }
 
   .current-page {
-    @extend %ui-depth1;
+    @extend %ui-depth1 !optional;
 
     position: absolute;
 
@@ -89,21 +89,21 @@
   }
 
   .page-divider {
-    @extend %t-title4;
-    @extend %t-regular;
+    @extend %t-title4 !optional;
+    @extend %t-regular !optional;
 
     vertical-align: middle;
     color: $gray-l2;
   }
 
   .pagination-form {
-    @extend %ui-depth2;
+    @extend %ui-depth2 !optional;
 
     position: relative;
 
     .page-number-label,
     .submit-pagination-form {
-      @extend %text-sr;
+      @extend %text-sr !optional;
     }
 
     .page-number-input {
@@ -136,7 +136,7 @@
 
 // styles for search/pagination metadata and sorting
 .listing-tools {
-  @extend %t-copy-sub1;
+  @extend %t-copy-sub1 !optional;
 
   color: $gray-d1;
 
@@ -147,8 +147,8 @@
   }
 
   .listing-sort-select {
-    @extend %t-copy-sub1;
-    @extend %t-regular;
+    @extend %t-copy-sub1 !optional;
+    @extend %t-regular !optional;
 
     border: 0;
   }
diff --git a/lms/static/sass/elements/_system-feedback.scss b/lms/static/sass/elements/_system-feedback.scss
index 0a16127ff33e..fc59c5a64fa5 100644
--- a/lms/static/sass/elements/_system-feedback.scss
+++ b/lms/static/sass/elements/_system-feedback.scss
@@ -28,8 +28,8 @@
 
   .msg-content {
     .title {
-      @extend %t-title5;
-      @extend %t-weight4;
+      @extend %t-title5 !optional;
+      @extend %t-weight4 !optional;
 
       margin-bottom: ($baseline/4);
       color: inherit;
@@ -38,12 +38,12 @@
     }
 
     .copy {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       color: inherit;
 
       p { // nasty reset
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         color: inherit;
       }
@@ -63,7 +63,7 @@
       text-align: right;
 
       .action-primary {
-        @extend %btn-primary-green;
+        @extend %btn-primary-green !optional;
       }
     }
   }
@@ -80,7 +80,7 @@
       text-align: right;
 
       .button-dismiss {  //ugly reset on button element
-        @extend %t-icon4;
+        @extend %t-icon4 !optional;
 
         background: none;
         box-shadow: none;
@@ -210,7 +210,7 @@
 
 // messages
 .message {
-  @extend %t-copy-sub1;
+  @extend %t-copy-sub1 !optional;
 
   display: block;
 }
@@ -220,7 +220,7 @@
 
   box-sizing: border-box;
 
-  @extend %t-strong;
+  @extend %t-strong !optional;
 
   display: none;
   margin: 0 0 $baseline 0;
@@ -228,7 +228,7 @@
   color: $white;
 
   .feedback-symbol {
-    @extend %t-icon5;
+    @extend %t-icon5 !optional;
 
     position: relative;
     top: 1px;
@@ -261,7 +261,7 @@
   box-sizing: border-box;
 
   .copy {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
   }
 }
 
@@ -294,7 +294,7 @@
     .nav-actions .action-primary {
       @include blue-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $blue-d2;
     }
@@ -313,7 +313,7 @@
     .nav-actions .action-primary {
       @include orange-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $orange-d2;
       color: $gray-d4;
@@ -333,7 +333,7 @@
     .nav-actions .action-primary {
       @include red-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $red-d2;
     }
@@ -352,7 +352,7 @@
     .nav-actions .action-primary {
       @include blue-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $blue-d2;
     }
@@ -371,7 +371,7 @@
     .nav-actions .action-primary {
       @include green-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $green-d2;
     }
@@ -390,7 +390,7 @@
     .nav-actions .action-primary {
       @include pink-button();
 
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       border-color: $pink-d2;
     }
@@ -407,7 +407,7 @@
 
 // prompts
 .wrapper-prompt {
-  @extend %ui-depth5;
+  @extend %ui-depth5 !optional;
 
   @include transition(all $tmg-f3 ease-in-out  0s);
 
@@ -458,12 +458,12 @@
       }
 
       .action-primary {
-        @extend %t-action4;
-        @extend %t-strong;
+        @extend %t-action4 !optional;
+        @extend %t-strong !optional;
       }
 
       .action-secondary {
-        @extend %t-action4;
+        @extend %t-action4 !optional;
       }
     }
   }
@@ -506,7 +506,7 @@
 
 // notifications
 .wrapper-notification {
-  @extend %ui-depth5;
+  @extend %ui-depth5 !optional;
 
   @include clearfix();
 
@@ -624,7 +624,7 @@
   max-width: $fg-max-width;
 
   strong {
-    @extend %t-strong;
+    @extend %t-strong !optional;
   }
 
   .feedback-symbol,
@@ -637,7 +637,7 @@
   .feedback-symbol {
     @include transition (color $tmg-f1 ease-in-out 0s);
 
-    @extend %t-icon3;
+    @extend %t-icon3 !optional;
 
     width: flex-grid(1, 12);
     height: ($baseline*1.25);
@@ -648,13 +648,13 @@
   }
 
   .copy {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     width: flex-grid(10, 12);
     color: $gray-l2;
 
     .title {
-      @extend %t-title7;
+      @extend %t-title7 !optional;
 
       margin-bottom: 0;
       color: $white;
@@ -696,13 +696,13 @@
     .action-primary {
       @include blue-button();
 
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       border-color: $blue-d2;
     }
 
     .action-secondary {
-      @extend %t-action4;
+      @extend %t-action4 !optional;
     }
   }
 
@@ -731,11 +731,11 @@
     }
 
     .title {
-      @extend %cont-truncated;
+      @extend %cont-truncated !optional;
     }
 
     .copy p {
-      @extend %cont-text-sr;
+      @extend %cont-text-sr !optional;
     }
   }
 }
@@ -744,7 +744,7 @@
 
 // alerts
 .wrapper-alert {
-  @extend %ui-depth2;
+  @extend %ui-depth2 !optional;
 
   box-sizing: border-box;
   box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
@@ -816,7 +816,7 @@
   color: $white;
 
   strong {
-    @extend %t-strong;
+    @extend %t-strong !optional;
   }
 
   .feedback-symbol,
@@ -827,7 +827,7 @@
   .feedback-symbol {
     @include transition (color $tmg-f1 ease-in-out 0s);
 
-    @extend %t-icon3;
+    @extend %t-icon3 !optional;
 
     width: flex-grid(1, 12);
     margin: ($baseline/4) flex-gutter() 0 0;
@@ -840,7 +840,7 @@
     color: $gray-l2;
 
     .title {
-      @extend %t-title7;
+      @extend %t-title7 !optional;
 
       margin-bottom: 0;
       color: $white;
@@ -878,12 +878,12 @@
         }
 
         .action-primary {
-          @extend %t-action4;
-          @extend %t-strong;
+          @extend %t-action4 !optional;
+          @extend %t-strong !optional;
         }
 
         .action-secondary {
-          @extend %t-action4;
+          @extend %t-action4 !optional;
         }
       }
     }
@@ -901,11 +901,11 @@
     text-align: center;
 
     .label {
-      @extend %cont-text-sr;
+      @extend %cont-text-sr !optional;
     }
 
     .icon {
-      @extend %t-icon6;
+      @extend %t-icon6 !optional;
 
       color: $white;
       width: auto;
@@ -938,13 +938,13 @@
     }
 
     .icon {
-      @extend %t-icon4;
+      @extend %t-icon4 !optional;
 
       margin-right: ($baseline/4);
     }
 
     .button-copy {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
     }
   }
 }
@@ -1003,7 +1003,7 @@
 // block-level messages and validation
 .wrapper-message {
   .message {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     background-color: $gray-d2;
     padding: ($baseline/2) ($baseline*0.75);
@@ -1014,7 +1014,7 @@
     }
 
     &.information {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       background-color: $gray-l5;
       color: $gray-d2;
@@ -1074,7 +1074,7 @@ body.uxdesign.alerts {
   }
 
   .content-primary {
-    @extend %ui-window;
+    @extend %ui-window !optional;
 
     width: flex-grid(12, 12);
 
@@ -1122,7 +1122,7 @@ body.uxdesign.alerts {
 // artifact styles
 .main-wrapper {
   .alert {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     padding: 15px 20px;
     margin-bottom: ($baseline*1.5);
@@ -1140,7 +1140,7 @@ body.uxdesign.alerts {
     }
 
     strong {
-      @extend %t-strong;
+      @extend %t-strong !optional;
     }
 
     .alert-action {
@@ -1171,8 +1171,8 @@ body.error {
   }
 
   h1 {
-    @extend %t-title1;
-    @extend %t-light;
+    @extend %t-title1 !optional;
+    @extend %t-light !optional;
 
     float: none;
     margin: 0;
@@ -1180,7 +1180,7 @@ body.error {
   }
 
   .description {
-    @extend %t-copy-lead2;
+    @extend %t-copy-lead2 !optional;
 
     margin-bottom: 50px;
   }
@@ -1188,7 +1188,7 @@ body.error {
   .back-button {
     @include blue-button();
 
-    @extend %t-action1;
+    @extend %t-action1 !optional;
 
     padding: 14px 40px 18px;
   }
diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss
index 3fd45ab60658..3272bfc76e1c 100644
--- a/lms/static/sass/elements/_typography.scss
+++ b/lms/static/sass/elements/_typography.scss
@@ -4,6 +4,8 @@
 // Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
 
 // weights
+@import "themes/red-theme/lms/static/sass/partials/lms/theme/_variables.scss";
+
 %t-ultrastrong {
   font-weight: 700;
 }
@@ -28,69 +30,76 @@
   font-weight: 200;
 }
 
+@mixin t-title{
+     font-family: $font-family-sans-serif;
+}
+
 // headings/titles
 %t-title {
-  font-family: $font-family-sans-serif;
+    @include t-title
 }
 
 %t-title1 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(60);
   @include line-height(60);
 }
 
 %t-title2 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(48);
   @include line-height(48);
 }
 
 %t-title3 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(36);
   @include line-height(36);
 }
 
-%t-title4 {
-  @extend %t-title;
+@mixin t-title4{
+    @include t-title;
+    @include font-size(24);
+    @include line-height(24);
+}
 
-  @include font-size(24);
-  @include line-height(24);
+%t-title4 {
+  @include t-title4
 }
 
 %t-title5 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(18);
   @include line-height(18);
 }
 
 %t-title6 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(16);
   @include line-height(16);
 }
 
 %t-title7 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(14);
   @include line-height(14);
 }
 
 %t-title8 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(12);
   @include line-height(12);
 }
 
 %t-title9 {
-  @extend %t-title;
+  @extend %t-title !optional;
 
   @include font-size(11);
   @include line-height(11);
@@ -104,35 +113,35 @@
 }
 
 %t-copy-base {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include font-size(16);
   @include line-height(16);
 }
 
 %t-copy-lead1 {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include font-size(18);
   @include line-height(18);
 }
 
 %t-copy-lead2 {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include font-size(24);
   @include line-height(24);
 }
 
 %t-copy-sub1 {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include font-size(14);
   @include line-height(14);
 }
 
 %t-copy-sub2 {
-  @extend %t-copy;
+  @extend %t-copy !optional;
 
   @include font-size(12);
   @include line-height(12);
@@ -240,16 +249,16 @@
 // MISC: extends - type
 // application: canned headings
 %hd-lv1 {
-  @extend %t-title1;
-  @extend %t-weight1;
+  @extend %t-title1 !optional;
+  @extend %t-weight1 !optional;
 
   color: $m-gray-d4;
   margin: 0 0 ($baseline*2) 0;
 }
 
 %hd-lv2 {
-  @extend %t-title4;
-  @extend %t-weight1;
+  @extend %t-title4 !optional;
+  @extend %t-weight1 !optional;
 
   margin: 0 0 ($baseline*0.75) 0;
   border-bottom: 1px solid $m-gray-l3;
@@ -258,24 +267,24 @@
 }
 
 %hd-lv3 {
-  @extend %t-title6;
-  @extend %t-weight4;
+  @extend %t-title6 !optional;
+  @extend %t-weight4 !optional;
 
   margin: 0 0 ($baseline/4) 0;
   color: $m-gray-d4;
 }
 
 %hd-lv4 {
-  @extend %t-title6;
-  @extend %t-weight2;
+  @extend %t-title6 !optional;
+  @extend %t-weight2 !optional;
 
   margin: 0 0 $baseline 0;
   color: $m-gray-d4;
 }
 
 %hd-lv5 {
-  @extend %t-title7;
-  @extend %t-weight4;
+  @extend %t-title7 !optional;
+  @extend %t-weight4 !optional;
 
   margin: 0 0 ($baseline/4) 0;
   color: $m-gray-d4;
@@ -283,36 +292,36 @@
 
 // application: canned copy
 %copy-base {
-  @extend %t-copy-base;
+  @extend %t-copy-base !optional;
 
   color: $m-gray-d2;
 }
 
 %copy-lead1 {
-  @extend %t-copy-lead2;
+  @extend %t-copy-lead2 !optional;
 
   color: $m-gray;
 }
 
 %copy-detail {
-  @extend %t-copy-sub1;
-  @extend %t-weight3;
+  @extend %t-copy-sub1 !optional;
+  @extend %t-weight3 !optional;
 
   color: $m-gray-d1;
 }
 
 %copy-metadata {
-  @extend %t-copy-sub2;
+  @extend %t-copy-sub2 !optional;
 
   color: $m-gray-d1;
 
 
   %copy-metadata-value {
-    @extend %t-weight2;
+    @extend %t-weight2 !optional;
   }
 
   %copy-metadata-value {
-    @extend %t-weight4;
+    @extend %t-weight4 !optional;
   }
 }
 
@@ -328,8 +337,8 @@
 }
 
 %copy-badge {
-  @extend %t-title9;
-  @extend %t-weight3;
+  @extend %t-title9 !optional;
+  @extend %t-weight3 !optional;
 
   border-radius: ($baseline/5);
   padding: ($baseline/2) $baseline;
diff --git a/lms/static/sass/features/_bookmarks-v1.scss b/lms/static/sass/features/_bookmarks-v1.scss
index 525f8414dc52..938243af3dcf 100644
--- a/lms/static/sass/features/_bookmarks-v1.scss
+++ b/lms/static/sass/features/_bookmarks-v1.scss
@@ -18,10 +18,10 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
   vertical-align: top;
 
   .bookmarks-list-button {
-    @extend %ui-clear-button;
+    @extend %ui-clear-button !optional;
 
     // set styles
-    @extend %btn-pl-default-base;
+    @extend %btn-pl-default-base !optional;
 
     @include font-size(13);
 
@@ -48,7 +48,7 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
   .bookmark-button-wrapper {
     margin-bottom: ($baseline * 1.5);
 
-    @extend %ui-print-excluded;
+    @extend %ui-print-excluded !optional;
   }
 
   .bookmark-button {
diff --git a/lms/static/sass/features/_bookmarks.scss b/lms/static/sass/features/_bookmarks.scss
index 2aaa1ec208ef..aa0963286e3d 100644
--- a/lms/static/sass/features/_bookmarks.scss
+++ b/lms/static/sass/features/_bookmarks.scss
@@ -103,11 +103,11 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
 }
 
 .bookmarks-empty-header {
-  @extend %t-title5;
+  @extend %t-title5 !optional;
 
   margin-bottom: ($baseline/2);
 }
 
 .bookmarks-empty-detail {
-  @extend %t-copy-sub1;
+  @extend %t-copy-sub1 !optional;
 }
diff --git a/lms/static/sass/features/_learner-profile.scss b/lms/static/sass/features/_learner-profile.scss
index 8d35a7eccc67..08eef4bcf7f2 100644
--- a/lms/static/sass/features/_learner-profile.scss
+++ b/lms/static/sass/features/_learner-profile.scss
@@ -3,7 +3,7 @@
 
 .learner-achievements {
   .learner-message {
-    @extend %no-content;
+    @extend %no-content !optional;
 
     margin: $baseline*0.75 0;
 
@@ -53,20 +53,20 @@
   }
 
   .card-supertitle {
-    @extend %t-title6;
+    @extend %t-title6 !optional;
 
     color: $lightest-base-font-color;
   }
 
   .card-title {
-    @extend %t-title5;
-    @extend %t-strong;
+    @extend %t-title5 !optional;
+    @extend %t-strong !optional;
 
     margin-bottom: $baseline/2;
   }
 
   .card-text {
-    @extend %t-title8;
+    @extend %t-title8 !optional;
 
     color: $lightest-base-font-color;
   }
@@ -126,7 +126,7 @@
   }
 
   .ui-loading-indicator {
-    @extend .ui-loading-base;
+    @extend .ui-loading-base !optional;
 
     padding-bottom: $baseline;
 
@@ -275,7 +275,7 @@
         display: table-row;
 
         button {
-          @extend %btn-secondary-blue-outline;
+          @extend %btn-secondary-blue-outline !optional;
 
           margin-top: 1em;
           background: $blue;
@@ -296,7 +296,7 @@
       }
 
       .u-field-account_privacy {
-        @extend .container;
+        @extend .container !optional;
 
         display: table-cell;
         border: none;
@@ -311,7 +311,7 @@
         }
 
         .btn-change-privacy {
-          @extend %btn-primary-blue;
+          @extend %btn-primary-blue !optional;
 
           padding-top: 4px;
           padding-bottom: 5px;
@@ -321,7 +321,7 @@
       }
 
       .u-field-title {
-        @extend %t-strong;
+        @extend %t-strong !optional;
 
         width: auto;
         color: $body-color;
@@ -350,7 +350,7 @@
   }
 
   .wrapper-profile-sections {
-    @extend .container;
+    @extend .container !optional;
 
     @include padding($baseline*1.5, 5%, $baseline*1.5, 5%);
 
@@ -371,15 +371,15 @@
     padding: $baseline 5% 0;
 
     .header {
-      @extend %t-title4;
-      @extend %t-ultrastrong;
+      @extend %t-title4 !optional;
+      @extend %t-ultrastrong !optional;
 
       display: inline-block;
       color: #222;
     }
 
     .subheader {
-      @extend %t-title6;
+      @extend %t-title6 !optional;
     }
   }
 
@@ -457,7 +457,7 @@
 
           &:not(.u-field-readonly) {
             &.u-field-value {
-              @extend %t-weight3;
+              @extend %t-weight3 !optional;
             }
 
             &:not(:last-child) {
@@ -481,8 +481,8 @@
           }
 
           &:first-child {
-            @extend %t-title4;
-            @extend %t-weight4;
+            @extend %t-title4 !optional;
+            @extend %t-weight4 !optional;
 
             font-size: em(24);
           }
@@ -547,7 +547,7 @@
     }
 
     .u-field-title {
-      @extend %t-title6;
+      @extend %t-title6 !optional;
 
       display: inline-block;
       margin-top: 0;
@@ -558,7 +558,7 @@
     }
 
     .u-field-value {
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
 
       width: 100%;
       overflow: auto;
@@ -613,7 +613,7 @@
         text-align: center;
         line-height: 1.5em;
 
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         color: $body-color;
       }
@@ -638,7 +638,7 @@
 
       .u-field-footer {
         .field-textarea-character-count {
-          @extend %t-weight1;
+          @extend %t-weight1 !optional;
 
           @include float(right);
 
@@ -659,11 +659,11 @@
   }
 
   .page-content-nav {
-    @extend %page-content-nav;
+    @extend %page-content-nav !optional;
   }
 
   .badge-set-display {
-    @extend .container;
+    @extend .container !optional;
 
     padding: 0;
 
@@ -701,16 +701,16 @@
       }
 
       .badge-details {
-        @extend %t-copy-sub1;
-        @extend %t-regular;
+        @extend %t-copy-sub1 !optional;
+        @extend %t-regular !optional;
 
         max-width: 70%;
         display: inline-block;
         color: $gray-d1;
 
         .badge-name {
-          @extend %t-strong;
-          @extend %t-copy-base;
+          @extend %t-strong !optional;
+          @extend %t-copy-base !optional;
 
           color: $gray-d3;
         }
@@ -721,7 +721,7 @@
         }
 
         .badge-date-stamp {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
         }
 
         .find-button-container {
@@ -734,8 +734,8 @@
         }
 
         .share-button {
-          @extend %t-action3;
-          @extend %button-reset;
+          @extend %t-action3 !optional;
+          @extend %button-reset !optional;
 
           background: $gray-l6;
           color: $gray-d1;
@@ -783,7 +783,7 @@
   // #BADGES MODAL
   // ------------------------------
   .badges-overlay {
-    @extend %ui-depth1;
+    @extend %ui-depth1 !optional;
 
     position: fixed;
     top: 0;
@@ -794,8 +794,8 @@
     vertical-align: middle;
 
     .badges-modal {
-      @extend %t-copy-lead1;
-      @extend %ui-depth2;
+      @extend %t-copy-lead1 !optional;
+      @extend %ui-depth2 !optional;
 
       color: $lighter-base-font-color;
       box-sizing: content-box;
@@ -821,8 +821,8 @@
       }
 
       .close {
-        @extend %button-reset;
-        @extend %t-strong;
+        @extend %button-reset !optional;
+        @extend %t-strong !optional;
 
         color: $lighter-base-font-color;
         position: absolute;
diff --git a/lms/static/sass/multicourse/_about_pages.scss b/lms/static/sass/multicourse/_about_pages.scss
index 086bb10c8bc8..89ed3810a748 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 !optional;
 
       content: "";
       display: block;
diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index 7a635ab89996..0579ae0abfa0 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -130,7 +130,7 @@
 
       // CASE: normal typographical headings
       h1 {
-        @extend %heading-2;
+        @extend %heading-2 !optional;
 
         @include text-align(left);
 
@@ -147,7 +147,7 @@
 
         .title-super,
         .title-sub {
-          @extend %t-weight1;
+          @extend %t-weight1 !optional;
 
           display: block;
           letter-spacing: 0;
@@ -191,7 +191,7 @@
   label,
   input,
   textarea {
-    @extend %body-text;
+    @extend %body-text !optional;
   }
 
   h1,
@@ -265,7 +265,7 @@
       }
 
       h3 {
-        @extend %heading-4;
+        @extend %heading-4 !optional;
 
         margin: 0 0 ($baseline/4) 0;
       }
@@ -279,7 +279,7 @@
       }
 
       .btn-login-action {
-        @extend %btn-secondary-grey-outline;
+        @extend %btn-secondary-grey-outline !optional;
 
         padding: ($baseline/10) ($baseline*0.75);
 
@@ -291,7 +291,7 @@
   // forms
   form {
     .instructions {
-      @extend %body-text-emphasized;
+      @extend %body-text-emphasized !optional;
 
       margin-bottom: $baseline;
     }
@@ -507,8 +507,8 @@
     @include clearfix();
 
     button[type="submit"] {
-      @extend %m-btn-primary;
-      @extend %t-action2;
+      @extend %m-btn-primary !optional;
+      @extend %t-action2 !optional;
 
       &:disabled,
       &.is-disabled {
@@ -544,8 +544,8 @@
     border-top: ($baseline/5) solid $m-gray-l4;
 
     .copy {
-      @extend %t-copy-lead1;
-      @extend %t-weight4;
+      @extend %t-copy-lead1 !optional;
+      @extend %t-weight4 !optional;
 
       position: absolute;
       top: -($baseline);
@@ -561,7 +561,7 @@
 
   // downplay required note
   .instructions .note {
-    @extend %t-copy-sub2;
+    @extend %t-copy-sub2 !optional;
 
     display: block;
     font-weight: normal;
@@ -573,14 +573,14 @@
     margin-bottom: $baseline;
 
     button[type="submit"] {
-      @extend %btn-secondary-blue-outline;
+      @extend %btn-secondary-blue-outline !optional;
 
       width: flex-grid(4, 8);
 
       @include margin-right($baseline/2);
 
       .icon {
-        @extend %sso-icon;
+        @extend %sso-icon !optional;
 
         @include margin-right($baseline/2);
 
@@ -642,7 +642,7 @@
     background: tint($yellow, 20%);
 
     .message-title {
-      @extend %heading-4;
+      @extend %heading-4 !optional;
 
       margin: 0 0 ($baseline/4) 0;
       font-size: em(14);
@@ -650,7 +650,7 @@
     }
 
     .message-copy {
-      @extend %body-text;
+      @extend %body-text !optional;
 
       margin: 0 !important;
       padding: 0;
@@ -768,7 +768,7 @@
       }
 
       h2 {
-        @extend %heading-2;
+        @extend %heading-2 !optional;
 
         @include text-align(left);
       }
@@ -818,7 +818,7 @@
   }
 
   .modal-form-error {
-    @extend %body-text;
+    @extend %body-text !optional;
 
     box-shadow: inset 0 -1px 2px 0 tint($red, 85%);
     box-sizing: border-box;
diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index 33df96922c60..188e1e3574ae 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -288,7 +288,7 @@
       }
 
       .instructor-info-action {
-        @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
         @include float(right);
 
@@ -305,7 +305,7 @@
           color: $white;
         }
 
-        @extend %ui-print-excluded;
+        @extend %ui-print-excluded !optional;
       }
     }
   }
@@ -465,7 +465,7 @@
       text-align: center;
 
       &::after {
-        @extend %faded-hr-divider;
+        @extend %faded-hr-divider !optional;
 
         content: "";
         display: block;
@@ -632,7 +632,7 @@
         .pre-requisite {
           max-width: 39%;
 
-          @extend %text-truncated;
+          @extend %text-truncated !optional;
         }
 
         .tip {
diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss
index 9da6d4b7e164..fce78d2f5131 100644
--- a/lms/static/sass/multicourse/_courses.scss
+++ b/lms/static/sass/multicourse/_courses.scss
@@ -26,7 +26,7 @@ $facet-background-color: #007db8;
 .find-courses,
 .university-profile {
   .discovery-button:not(:disabled) {
-    @extend %t-action2;
+    @extend %t-action2 !optional;
 
     @include text-align(left);
 
@@ -228,7 +228,7 @@ $facet-background-color: #007db8;
     @include rtl() { $layout-direction: "RTL"; }
 
     .search-status-label {
-      @extend %t-title3;
+      @extend %t-title3 !optional;
 
       @include span-columns(9);
 
@@ -256,7 +256,7 @@ $facet-background-color: #007db8;
     .wrapper-search-input {
       @include span-columns(3);
 
-      @extend %ui-depth0;
+      @extend %ui-depth0 !optional;
 
       position: relative;
 
@@ -279,9 +279,9 @@ $facet-background-color: #007db8;
   }
 
   .discovery-input {
-    @extend %ui-depth1;
-    @extend %t-copy-sub1;
-    @extend %t-demi-strong;
+    @extend %ui-depth1 !optional;
+    @extend %t-copy-sub1 !optional;
+    @extend %t-demi-strong !optional;
 
     @include border-radius(3px);
     @include padding-right(55px);
@@ -294,7 +294,7 @@ $facet-background-color: #007db8;
 
     //STATE: focus
     &:focus {
-      @extend %no-outline;
+      @extend %no-outline !optional;
 
       box-shadow: none;
       border-color: $m-blue-d6;
@@ -302,9 +302,9 @@ $facet-background-color: #007db8;
   }
 
   .discovery-submit {
-    @extend %ui-depth2;
-    @extend %t-icon3;
-    @extend %t-strong;
+    @extend %ui-depth2 !optional;
+    @extend %t-icon3 !optional;
+    @extend %t-strong !optional;
 
     @include margin-left(-2px);
     @include right(0);
@@ -380,7 +380,7 @@ $facet-background-color: #007db8;
       background: $courseware-button-border-color;
 
       .facet-option {
-        @extend %t-strong;
+        @extend %t-strong !optional;
 
         color: $gray-d2;
         text-decoration: none;
@@ -394,8 +394,8 @@ $facet-background-color: #007db8;
     .clear-filters {
       @include line-height(29.73);
 
-      @extend %t-icon5;
-      @extend %t-strong;
+      @extend %t-icon5 !optional;
+      @extend %t-strong !optional;
 
       margin: ($baseline/2);
       width: auto;
@@ -419,7 +419,7 @@ $facet-background-color: #007db8;
 
     box-sizing: border-box;
 
-    @extend %ui-depth1;
+    @extend %ui-depth1 !optional;
 
     position: relative;
     margin: ($baseline*2) 0 ($baseline*3.5) 0;
@@ -470,8 +470,8 @@ $facet-background-color: #007db8;
 
     .header-search-facets,
     .header-facet {
-      @extend %t-title6;
-      @extend %t-strong;
+      @extend %t-title6 !optional;
+      @extend %t-strong !optional;
 
       margin: 0;
       padding: ($baseline/2);
@@ -484,7 +484,7 @@ $facet-background-color: #007db8;
     }
 
     .facet-list {
-      @extend %ui-no-list;
+      @extend %ui-no-list !optional;
 
       @include clearfix();
 
@@ -510,8 +510,8 @@ $facet-background-color: #007db8;
       @include transition(all $tmg-f2 ease-out 0s);
       @include clearfix();
 
-      @extend %t-action3;
-      @extend %text-truncated;
+      @extend %t-action3 !optional;
+      @extend %text-truncated !optional;
 
       opacity: 1;
       border-radius: 0;
@@ -575,8 +575,8 @@ $facet-background-color: #007db8;
       @include clearfix();
 
       button {
-        @extend %t-icon6;
-        @extend %t-strong;
+        @extend %t-icon6 !optional;
+        @extend %t-strong !optional;
 
         padding: ($baseline/4) ($baseline/2);
         color: $facet-background-color;
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 7eb5384443b9..2aab653c756d 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -3,6 +3,8 @@
 
 // +Dashboard
 // ====================
+@import "lms/static/sass/elements/_typography.scss";
+
 .dashboard {
   @include clearfix();
 
@@ -26,7 +28,7 @@
         margin-bottom: $baseline/2;
 
         .header-courses {
-          @extend %t-title5;
+          @extend %t-title5 !optional;
 
           @include padding-right($baseline/2);
         }
@@ -34,7 +36,7 @@
 
       // UI: course list
       .listing-courses {
-        @extend %ui-no-list;
+        @extend %ui-no-list !optional;
 
         .course-item {
           margin-bottom: $baseline;
@@ -60,7 +62,7 @@
         @include transition(all 0.15s linear 0s);
         @include clearfix();
 
-        @extend %ui-depth2;
+        @extend %ui-depth2 !optional;
 
         .details {
           @include clearfix();
@@ -97,7 +99,7 @@
               text-align: center;
 
               .label {
-                @extend %text-sr;
+                @extend %text-sr !optional;
               }
 
               .deco-graphic {
@@ -108,9 +110,9 @@
               }
 
               .sts-enrollment-value {
-                @extend %ui-depth1;
-                @extend %copy-badge;
-                @extend %t-demi-strong;
+                @extend %ui-depth1 !optional;
+                @extend %copy-badge !optional;
+                @extend %t-demi-strong !optional;
 
                 font-size: 0.6em;
                 line-height: 1.5em;
@@ -141,8 +143,8 @@
               span {
                 font: -apple-system-short-headline !important;
 
-                @extend %t-title3;
-                @extend %t-regular;
+                @extend %t-title3 !optional;
+                @extend %t-regular !optional;
 
                 display: inline-block;
                 margin-bottom: ($baseline/2);
@@ -150,7 +152,7 @@
 
                 // Responsive behavior
                 @include media-breakpoint-down(sm) {
-                  @extend %t-title4;
+                  @include t-title4
                 }
               }
             }
@@ -160,7 +162,7 @@
                 font: -apple-system-short-subheadline !important;
                 color: $gray-d1;
 
-                @extend %t-title7;
+                @extend %t-title7 !optional;
 
                 display: inline-block;
               }
@@ -171,7 +173,7 @@
                 .info-date-block {
                   font: -apple-system-short-subheadline !important;
 
-                  @extend %t-title7;
+                  @extend %t-title7 !optional;
 
                   color: $gray; // WCAG 2.0 AA compliant
 
@@ -185,7 +187,7 @@
                 }
 
                 .change-session {
-                  @extend %t-title7;
+                  @extend %t-title7 !optional;
 
                   @include margin(0, 0, 0, $baseline/4);
 
@@ -288,8 +290,8 @@
               }
 
               .actions-dropdown {
-                @extend %ui-no-list;
-                @extend %ui-depth1;
+                @extend %ui-no-list !optional;
+                @extend %ui-depth1 !optional;
 
                 display: none;
                 position: absolute;
@@ -306,7 +308,7 @@
                 }
 
                 .actions-dropdown-list {
-                  @extend %ui-no-list;
+                  @extend %ui-no-list !optional;
 
                   box-sizing: border-box;
                   display: table;
@@ -350,7 +352,7 @@
                 }
 
                 .actions-item {
-                  @extend %t-title7;
+                  @extend %t-title7 !optional;
 
                   display: block;
                   margin: 0;
@@ -411,12 +413,12 @@
           .enter-course {
             font: -apple-system-short-subheadline !important;
 
-            @extend %btn-pl-white-base;
+            @extend %btn-pl-white-base !optional;
 
             @include float(right);
 
             &.archived {
-              @extend %btn-pl-default-base;
+              @extend %btn-pl-default-base !optional;
             }
           }
 
@@ -440,7 +442,7 @@
           // course enrollment status message
           .sts-enrollment {
             .label {
-              @extend %text-sr;
+              @extend %text-sr !optional;
             }
 
             // status message
@@ -462,11 +464,11 @@
           // course enrollment status message
           .sts-enrollment {
             .label {
-              @extend %text-sr;
+              @extend %text-sr !optional;
             }
 
             .deco-graphic {
-              @extend %ui-depth3;
+              @extend %ui-depth3 !optional;
 
               width: 40px;
               position: absolute;
@@ -624,7 +626,7 @@
   }
 
   .message {
-    @extend %ui-depth1;
+    @extend %ui-depth1 !optional;
 
     border-radius: 3px;
     display: none;
@@ -661,8 +663,8 @@
 
     .message-title,
     .message-copy .title {
-      @extend %t-title6;
-      @extend %t-weight4;
+      @extend %t-title6 !optional;
+      @extend %t-weight4 !optional;
 
       line-height: 1em;
       margin-bottom: ($baseline/4);
@@ -670,7 +672,7 @@
 
     .message-copy,
     .message-copy .copy {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       margin: 2px 0 0;
     }
@@ -773,7 +775,7 @@
       }
 
       .action-upgrade {
-        @extend %btn-primary-green;
+        @extend %btn-primary-green !optional;
 
         @include clearfix();
 
@@ -817,26 +819,26 @@
         }
 
         .copy {
-          @extend %t-action3;
-          @extend %t-weight4;
+          @extend %t-action3 !optional;
+          @extend %t-weight4 !optional;
 
           @include margin-right($baseline);
         }
 
         .copy-sub {
-          @extend %t-action4;
+          @extend %t-action4 !optional;
 
           opacity: 0.875;
         }
       }
 
       .action-view-consent {
-        @extend %btn-pl-white-base;
+        @extend %btn-pl-white-base !optional;
 
         @include float(right);
 
         &.archived {
-          @extend %btn-pl-default-base;
+          @extend %btn-pl-default-base !optional;
         }
       }
     }
@@ -851,14 +853,14 @@
       }
 
       .message-copy {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         margin: 0;
       }
 
       .credit-action {
         .credit-btn {
-          @extend %btn-pl-yellow-base;
+          @extend %btn-pl-yellow-base !optional;
 
           @include float(right);
           @include margin-right(5px);
@@ -994,7 +996,7 @@
           }
 
           .action-certificate .btn {
-            @extend %btn-inherited-primary;
+            @extend %btn-inherited-primary !optional;
 
             box-sizing: border-box;
             padding: 7px $baseline*0.75;
@@ -1029,7 +1031,7 @@
       }
 
       .certificate-explanation {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         margin-top: ($baseline/2);
         border-top: 1px solid $gray-l4;
@@ -1052,7 +1054,7 @@
         position: relative;
 
         .btn {
-          @extend %btn-pl-green-base;
+          @extend %btn-pl-green-base !optional;
 
           @include float(right);
         }
@@ -1194,17 +1196,17 @@
   }
 
   .status-data-message {
-    @extend %t-copy-sub1;
-    @extend %t-weight4;
+    @extend %t-copy-sub1 !optional;
+    @extend %t-weight4 !optional;
 
     margin-bottom: ($baseline/2);
   }
 
   .list-actions {
-    @extend %ui-no-list;
+    @extend %ui-no-list !optional;
 
     .action {
-      @extend %t-weight4;
+      @extend %t-weight4 !optional;
 
       display: block;
 
@@ -1213,13 +1215,13 @@
   }
 
   .status-note {
-    @extend %t-copy-sub2;
+    @extend %t-copy-sub2 !optional;
 
     position: relative;
     padding-top: $baseline/2;
 
     p {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
     }
 
     .deco-arrow {
@@ -1243,8 +1245,8 @@
     }
 
     .action-reverify {
-      @extend %btn-primary-error;
-      @extend %t-weight4;
+      @extend %btn-primary-error !optional;
+      @extend %t-weight4 !optional;
 
       display: block;
 
@@ -1270,8 +1272,8 @@
     }
 
     .action-reverify {
-      @extend %btn-primary-error;
-      @extend %t-weight4;
+      @extend %btn-primary-error !optional;
+      @extend %t-weight4 !optional;
 
       display: block;
 
@@ -1353,18 +1355,18 @@
 }
 
 .msg__title {
-  @extend %hd-lv5;
+  @extend %hd-lv5 !optional;
 
   color: $lighter-base-font-color;
 }
 
 .msg__copy {
-  @extend %copy-metadata;
+  @extend %copy-metadata !optional;
 
   color: $lighter-base-font-color;
 
   p {
-    @extend %t-copy;
+    @extend %t-copy !optional;
   }
 }
 
@@ -1411,7 +1413,7 @@ a.disable-look {
 }
 
 a.fade-cover {
-  @extend .cover;
+  @extend .cover !optional;
 
   opacity: 0.5;
 }
@@ -1435,8 +1437,8 @@ a.fade-cover {
       border-bottom: thin solid $gray;
 
       &.title {
-        @extend %t-title5;
-        @extend %t-weight4;
+        @extend %t-title5 !optional;
+        @extend %t-weight4 !optional;
 
         font-family: $font-family-sans-serif;
 
diff --git a/lms/static/sass/multicourse/_entitlement_dashboard.scss b/lms/static/sass/multicourse/_entitlement_dashboard.scss
index dd6ef3e93dcc..14fae8f40215 100644
--- a/lms/static/sass/multicourse/_entitlement_dashboard.scss
+++ b/lms/static/sass/multicourse/_entitlement_dashboard.scss
@@ -1,48 +1,48 @@
 .entitlement-actions-wrapper {
-  @extend .wrapper-action-more;
+  @extend .wrapper-action-more !optional;
 
   .entitlement-action {
-    @extend .action;
+    @extend .action !optional;
   }
 
   .entitlement-action-more {
-    @extend .action-more;
+    @extend .action-more !optional;
   }
 
   .entitlement-actions-dropdown {
-    @extend .actions-dropdown;
+    @extend .actions-dropdown !optional;
 
     .entitlement-actions-dropdown-list {
-      @extend .actions-dropdown-list;
+      @extend .actions-dropdown-list !optional;
 
       .entitlement-actions-item {
-        @extend .actions-item;
+        @extend .actions-item !optional;
       }
     }
   }
 }
 
 .entitlement-unenrollment-modal {
-  @extend .modal;
+  @extend .modal !optional;
 
   margin-top: -3*$baseline;
 
   .entitlement-unenrollment-modal-inner-wrapper {
-    @extend .inner-wrapper;
+    @extend .inner-wrapper !optional;
 
     height: 98%;
     overflow-y: scroll;
 
     .entitlement-unenrollment-modal-close-btn {
-      @extend .close-modal;
+      @extend .close-modal !optional;
     }
 
     .entitlement-unenrollment-modal-header {
-      @extend .unenroll-header;
+      @extend .unenroll-header !optional;
     }
 
     .entitlement-unenrollment-modal-error-text {
-      @extend .modal-form-error;
+      @extend .modal-form-error !optional;
 
       background: tint($red, 95%);
       margin-left: $baseline;
diff --git a/lms/static/sass/multicourse/_error-pages.scss b/lms/static/sass/multicourse/_error-pages.scss
index c0c43a42257a..9b1f62de2bfd 100644
--- a/lms/static/sass/multicourse/_error-pages.scss
+++ b/lms/static/sass/multicourse/_error-pages.scss
@@ -1,5 +1,5 @@
 section.outside-app {
-  @extend .container;
+  @extend .container !optional;
 
   @include text-align(left);
 
diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss
index 3ca7761fc722..20e3dad5a3ec 100644
--- a/lms/static/sass/multicourse/_home.scss
+++ b/lms/static/sass/multicourse/_home.scss
@@ -27,7 +27,7 @@ $course-search-input-height: ($button-size);
     .outer-wrapper {
       @include clearfix();
 
-      @extend .animation-home-header-pop-up;
+      @extend .animation-home-header-pop-up !optional;
 
       position: relative;
       margin: 0 auto;
@@ -118,8 +118,8 @@ $course-search-input-height: ($button-size);
           @include padding-right($button-size);
           @include padding-left($baseline*0.5);
 
-          @extend %ui-depth1;
-          @extend %t-title5;
+          @extend %ui-depth1 !optional;
+          @extend %t-title5 !optional;
 
           border: 2px solid $gray-l3;
           border-radius: 3px;
@@ -132,7 +132,7 @@ $course-search-input-height: ($button-size);
 
           // STATE: focus
           &:focus {
-            @extend %no-outline;
+            @extend %no-outline !optional;
 
             border-color: $m-blue-d1;
           }
@@ -142,9 +142,9 @@ $course-search-input-height: ($button-size);
           @include right($baseline*1.5);
           @include border-radius(1px, 3px, 3px, 1px);
 
-          @extend %ui-depth2;
-          @extend %t-icon3;
-          @extend %t-strong;
+          @extend %ui-depth2 !optional;
+          @extend %t-icon3 !optional;
+          @extend %t-strong !optional;
 
           position: absolute;
           border: 2px solid $m-blue-d1;
@@ -293,14 +293,14 @@ $course-search-input-height: ($button-size);
     width: flex-grid(12);
 
     &::before {
-      @extend %faded-hr-divider-medium;
+      @extend %faded-hr-divider-medium !optional;
 
       content: "";
       display: block;
     }
 
     &::after {
-      @extend %faded-hr-divider-medium;
+      @extend %faded-hr-divider-medium !optional;
 
       content: "";
       display: block;
@@ -308,7 +308,7 @@ $course-search-input-height: ($button-size);
 
 
     hr {
-      @extend %faded-hr-divider-light;
+      @extend %faded-hr-divider-light !optional;
 
       border: none;
       margin: 0;
@@ -316,7 +316,7 @@ $course-search-input-height: ($button-size);
       z-index: 2;
 
       &::after {
-        @extend %faded-hr-divider;
+        @extend %faded-hr-divider !optional;
 
         bottom: 0;
         content: "";
@@ -339,7 +339,7 @@ $course-search-input-height: ($button-size);
         overflow: hidden;
 
         &::before {
-          @extend %faded-vertical-divider;
+          @extend %faded-vertical-divider !optional;
 
           content: "";
           display: block;
@@ -353,7 +353,7 @@ $course-search-input-height: ($button-size);
         }
 
         &::after {
-          @extend %faded-vertical-divider-light;
+          @extend %faded-vertical-divider-light !optional;
 
           content: "";
           display: block;
diff --git a/lms/static/sass/multicourse/_media-kit.scss b/lms/static/sass/multicourse/_media-kit.scss
index 8c9e05f9c882..89cf6af6db36 100644
--- a/lms/static/sass/multicourse/_media-kit.scss
+++ b/lms/static/sass/multicourse/_media-kit.scss
@@ -32,7 +32,7 @@ $white: rgb(255, 255, 255);
   }
 
   hr {
-    @extend %faded-hr-divider-light;
+    @extend %faded-hr-divider-light !optional;
 
     border: none;
     margin: 0;
@@ -40,7 +40,7 @@ $white: rgb(255, 255, 255);
     z-index: 2;
 
     &::after {
-      @extend %faded-hr-divider;
+      @extend %faded-hr-divider !optional;
 
       bottom: 0;
       content: "";
diff --git a/lms/static/sass/multicourse/_survey-page.scss b/lms/static/sass/multicourse/_survey-page.scss
index 5af944a499fa..ee4044118c8a 100644
--- a/lms/static/sass/multicourse/_survey-page.scss
+++ b/lms/static/sass/multicourse/_survey-page.scss
@@ -21,8 +21,8 @@
 
   .header-survey {
     .title {
-      @extend %t-title4;
-      @extend %t-weight4;
+      @extend %t-title4 !optional;
+      @extend %t-weight4 !optional;
 
       margin-bottom: $baseline;
       border-bottom: 1px solid $gray-l4;
@@ -30,14 +30,14 @@
     }
 
     .course-info {
-      @extend %t-title;
+      @extend %t-title !optional;
 
       padding-bottom: ($baseline/4);
     }
 
     .course-org,
     .course-number {
-      @extend %t-title8;
+      @extend %t-title8 !optional;
 
       display: inline-block;
       color: $gray-l1;
@@ -48,7 +48,7 @@
     }
 
     .course-name {
-      @extend %t-title5;
+      @extend %t-title5 !optional;
 
       display: block;
     }
@@ -68,7 +68,7 @@
     margin-bottom: $baseline;
     font-style: italic;
 
-    @extend %t-copy-base;
+    @extend %t-copy-base !optional;
   }
 
   .message.submission-error {
@@ -81,15 +81,15 @@
     background-color: tint($error-color, 85%);
 
     .message-title {
-      @extend %t-title5;
-      @extend %t-weight4;
+      @extend %t-title5 !optional;
+      @extend %t-weight4 !optional;
 
       margin-bottom: ($baseline/2);
       color: $error-color;
     }
 
     .message-copy {
-      @extend %ui-no-list;
+      @extend %ui-no-list !optional;
 
       line-height: 1.3;
 
@@ -104,7 +104,7 @@
   }
 
   .list-input {
-    @extend %ui-no-list;
+    @extend %ui-no-list !optional;
 
     .field {
       margin-bottom: $baseline;
@@ -116,7 +116,7 @@
       }
 
       .tip {
-        @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
         display: block;
         margin-top: ($baseline/4);
@@ -132,22 +132,22 @@
   }
 
   .action-primary {
-    @extend %m-btn-primary;
-    @extend %t-copy-base;
+    @extend %m-btn-primary !optional;
+    @extend %t-copy-base !optional;
 
     @include padding-left($baseline*2);
   }
 
   .action-cancel {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     @include margin-left($baseline);
   }
 
   // override basic label styles
   label {
-    @extend %t-copy-base;
-    @extend %t-weight4;
+    @extend %t-copy-base !optional;
+    @extend %t-weight4 !optional;
 
     display: block;
     font-style: normal;
@@ -158,19 +158,19 @@
   input,
   select,
   textarea {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
   }
 
   .bit {
     margin-bottom: $baseline;
 
     .title {
-      @extend %t-title7;
-      @extend %t-weight4;
+      @extend %t-title7 !optional;
+      @extend %t-weight4 !optional;
     }
 
     p {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       color: $gray;
     }
diff --git a/lms/static/sass/search/_search.scss b/lms/static/sass/search/_search.scss
index 0e1abd63e3a2..1359886728cb 100644
--- a/lms/static/sass/search/_search.scss
+++ b/lms/static/sass/search/_search.scss
@@ -7,7 +7,7 @@
   }
 
   .search-field {
-    @extend %t-weight2;
+    @extend %t-weight2 !optional;
 
     box-sizing: border-box;
     top: 5px;
@@ -20,7 +20,7 @@
   .cancel-button,
   .search-button:hover,
   .cancel-button:hover {
-    @extend %t-regular;
+    @extend %t-regular !optional;
 
     box-sizing: border-box;
 
@@ -122,7 +122,7 @@
     }
 
     .search-results-ellipsis {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       color: theme-color("dark");
 
@@ -144,7 +144,7 @@
 .courseware-search-bar {
   width: flex-grid(7);
 
-  @extend %ui-print-excluded;
+  @extend %ui-print-excluded !optional;
 }
 
 .dashboard-search-bar {
@@ -152,7 +152,7 @@
   display: block;
 
   label {
-    @extend %t-regular;
+    @extend %t-regular !optional;
 
     font-family: $font-family-sans-serif;
     color: theme-color("dark");
@@ -182,7 +182,7 @@
     }
 
     h2 {
-      @extend %t-title5;
+      @extend %t-title5 !optional;
 
       @include float(left);
       @include clear(left);
diff --git a/lms/static/sass/shared/_activation_messages.scss b/lms/static/sass/shared/_activation_messages.scss
index f42804ef15eb..2b10768f75fa 100644
--- a/lms/static/sass/shared/_activation_messages.scss
+++ b/lms/static/sass/shared/_activation_messages.scss
@@ -6,11 +6,11 @@
     padding: ($baseline/2);
 
     &.invalid {
-      @extend %error-message-colors;
+      @extend %error-message-colors !optional;
     }
 
     &.valid {
-      @extend %success-message-colors;
+      @extend %success-message-colors !optional;
     }
   }
 
diff --git a/lms/static/sass/shared/_alerts_pattern_library_shim.scss b/lms/static/sass/shared/_alerts_pattern_library_shim.scss
index e22217d63960..bef5ae4974d4 100644
--- a/lms/static/sass/shared/_alerts_pattern_library_shim.scss
+++ b/lms/static/sass/shared/_alerts_pattern_library_shim.scss
@@ -141,8 +141,8 @@ $bp-screen-md: 768px !default;
   }
 
   .alert-title {
-    @extend %hd-5;
-    @extend %headings-emphasized;
+    @extend %hd-5 !optional;
+    @extend %headings-emphasized !optional;
 
     @media (min-width: $bp-screen-md) {
       // shift the section up to make the alert more compact
@@ -151,7 +151,7 @@ $bp-screen-md: 768px !default;
   }
 
   .alert-copy {
-    @extend %copy-base;
+    @extend %copy-base !optional;
 
     @media (min-width: $bp-screen-md) {
       // shift the message down to be in line with the icon
@@ -160,7 +160,7 @@ $bp-screen-md: 768px !default;
   }
 
   .alert-copy-with-title {
-    @extend %copy-base;
+    @extend %copy-base !optional;
   }
 
   .alert-action {
diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss
index 82ec1d9c98c6..2ef7cbff8216 100644
--- a/lms/static/sass/shared/_course_object.scss
+++ b/lms/static/sass/shared/_course_object.scss
@@ -30,7 +30,7 @@
       @include transition(all 0.15s linear 0s);
 
       .status {
-        @extend %ui-depth3;
+        @extend %ui-depth3 !optional;
 
         background: $link-color;
         color: white;
diff --git a/lms/static/sass/shared/_fields.scss b/lms/static/sass/shared/_fields.scss
index 34536fd7c05f..53e8a572f445 100644
--- a/lms/static/sass/shared/_fields.scss
+++ b/lms/static/sass/shared/_fields.scss
@@ -107,7 +107,7 @@
 }
 
 .u-field-message {
-  @extend %t-copy-sub1;
+  @extend %t-copy-sub1 !optional;
 
   @include padding-left($baseline/2);
 
diff --git a/lms/static/sass/shared/_footer-edx.scss b/lms/static/sass/shared/_footer-edx.scss
index 6a7fe943ad26..fac3e1505091 100644
--- a/lms/static/sass/shared/_footer-edx.scss
+++ b/lms/static/sass/shared/_footer-edx.scss
@@ -247,7 +247,7 @@ footer#footer-edx-v3 {
   .legal-links,
   .social-media-links,
   .mobile-app-links {
-    @extend %ui-no-list;
+    @extend %ui-no-list !optional;
 
     .list-item {
       display: inline-block;
@@ -343,7 +343,7 @@ footer#footer-edx-v3 {
   .legal-notices,
   .footer-logo,
   .external-links {
-    @extend %ui-print-excluded;
+    @extend %ui-print-excluded !optional;
   }
 
   @media print {
@@ -863,5 +863,5 @@ footer#footer-edx-v3 {
   }
 
 
-  @extend %ui-print-excluded;
+  @extend %ui-print-excluded !optional;
 }
diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss
index 18ef6d6a7dc8..486b256b74f5 100644
--- a/lms/static/sass/shared/_footer.scss
+++ b/lms/static/sass/shared/_footer.scss
@@ -4,7 +4,7 @@
 @import 'neat/neat'; // lib - Neat
 
 .wrapper-footer {
-  @extend %ui-print-excluded;
+  @extend %ui-print-excluded !optional;
 
   box-shadow: 0 -1px 5px 0 $shadow-l1;
   border-top: 1px solid tint($m-gray, 50%);
@@ -248,7 +248,7 @@
   .wrapper-footer footer {
     width: 960px;
 
-    @extend %ui-print-excluded;
+    @extend %ui-print-excluded !optional;
 
     .colophon-about img {
       margin-top: ($baseline*1.5);
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 898933685b26..38919f10d4ba 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -2,7 +2,7 @@
 @import 'neat/neat'; // lib - Neat
 
 .header-global {
-  @extend %ui-depth1;
+  @extend %ui-depth1 !optional;
 
   border-bottom: 1px solid $header-border-color;
   box-shadow: 0 1px 5px 0 $shadow-l1;
@@ -122,7 +122,7 @@
   .user {
     @include float(right);
 
-    @extend %ui-print-excluded;
+    @extend %ui-print-excluded !optional;
 
     padding-left: 0;
     margin: 0;
@@ -363,7 +363,7 @@
       display: inline-block;
 
       .btn {
-        @extend %m-btn-primary;
+        @extend %m-btn-primary !optional;
       }
     }
   }
@@ -394,7 +394,7 @@
 
 // CASE: marketing/course discovery
 .header-global-new {
-  @extend %ui-depth1;
+  @extend %ui-depth1 !optional;
 
   /* Temp. fix until applied globally */
   box-sizing: border-box;
diff --git a/lms/static/sass/shared/_help-tab.scss b/lms/static/sass/shared/_help-tab.scss
index ea48096d10f1..9861a1f06eab 100644
--- a/lms/static/sass/shared/_help-tab.scss
+++ b/lms/static/sass/shared/_help-tab.scss
@@ -18,8 +18,8 @@
 }
 
 .help-tab {
-  @extend %ui-depth2;
-  @extend %ui-print-excluded;
+  @extend %ui-depth2 !optional;
+  @extend %ui-print-excluded !optional;
 
   transform: rotate(-90deg);
   transform-origin: top left;
diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss
index 88eb6c354d53..f8b05adda666 100644
--- a/lms/static/sass/shared/_modal.scss
+++ b/lms/static/sass/shared/_modal.scss
@@ -10,7 +10,7 @@
 }
 
 .modal {
-  @extend %ui-depth1;
+  @extend %ui-depth1 !optional;
 
   display: none;
   position: absolute;
@@ -51,7 +51,7 @@
   }
 
   .inner-wrapper {
-    @extend %ui-depth1;
+    @extend %ui-depth1 !optional;
 
     background: $modal-content-bg;
     border-radius: 0;
@@ -69,7 +69,7 @@
     }
 
     header {
-      @extend %ui-depth1;
+      @extend %ui-depth1 !optional;
 
       margin-bottom: ($baseline*1.5);
       overflow: hidden;
@@ -89,7 +89,7 @@
       }
 
       hr {
-        @extend %faded-hr-divider-light;
+        @extend %faded-hr-divider-light !optional;
 
         border: none;
         margin: 0;
@@ -97,7 +97,7 @@
         z-index: 2;
 
         &::after {
-          @extend %faded-hr-divider;
+          @extend %faded-hr-divider !optional;
 
           bottom: 0;
           content: "";
@@ -341,7 +341,7 @@
 }
 
 .leanModal_box {
-  @extend .modal;
+  @extend .modal !optional;
 }
 
 // --------------------
@@ -352,7 +352,7 @@
   // general reset
   .list-input,
   .list-actions {
-    @extend %ui-no-list;
+    @extend %ui-no-list !optional;
   }
 
   .settings-language-select .select {
@@ -367,7 +367,7 @@
     padding: 0 ($baseline*2) $baseline ($baseline*2);
 
     .list-actions-item {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       color: $body-color;
       text-align: center;
diff --git a/lms/static/sass/shared/_tooltips.scss b/lms/static/sass/shared/_tooltips.scss
index 5b75ab5b9bf2..8579e424c7c4 100644
--- a/lms/static/sass/shared/_tooltips.scss
+++ b/lms/static/sass/shared/_tooltips.scss
@@ -15,7 +15,7 @@
 // custom tool tip style.
 @mixin tooltip-hover-style ($margin-top) {
   p {
-    @extend %ui-depth2;
+    @extend %ui-depth2 !optional;
 
     background: $dark-gray;
     border-radius: ($baseline/5);
diff --git a/lms/static/sass/shared/_unsubscribe.scss b/lms/static/sass/shared/_unsubscribe.scss
index ed4bdce5a016..4a48cbe1102f 100644
--- a/lms/static/sass/shared/_unsubscribe.scss
+++ b/lms/static/sass/shared/_unsubscribe.scss
@@ -5,7 +5,7 @@
     margin-bottom: $baseline;
     padding: ($baseline/2);
 
-    @extend %success-message-colors;
+    @extend %success-message-colors !optional;
   }
 
   h1 + hr {
diff --git a/lms/static/sass/views/_account-settings.scss b/lms/static/sass/views/_account-settings.scss
index a4e5ff76eab6..1a4c4cc4ef65 100644
--- a/lms/static/sass/views/_account-settings.scss
+++ b/lms/static/sass/views/_account-settings.scss
@@ -21,7 +21,7 @@
 
   .ui-loading-indicator,
   .ui-loading-error {
-    @extend .ui-loading-base;
+    @extend .ui-loading-base !optional;
     // center horizontally
     @include margin-left(auto);
     @include margin-right(auto);
@@ -43,7 +43,7 @@
     border-bottom: 4px solid $m-gray-l4;
 
     .header-title {
-      @extend %t-title4;
+      @extend %t-title4 !optional;
 
       margin-bottom: ($baseline/2);
       padding-top: ($baseline*2);
@@ -74,8 +74,8 @@
       }
 
       button {
-        @extend %ui-clear-button;
-        @extend %btn-no-style;
+        @extend %ui-clear-button !optional;
+        @extend %btn-no-style !optional;
 
         @include appearance(none);
 
@@ -112,8 +112,8 @@
 // +Settings Section
 .account-settings-sections {
   .section-header {
-    @extend %t-title5;
-    @extend %t-strong;
+    @extend %t-title5 !optional;
+    @extend %t-strong !optional;
 
     padding-top: ($baseline/2)*3;
     color: $dark-gray1;
@@ -132,7 +132,7 @@
     }
 
     .account-settings-header-subtitle-warning {
-      @extend .account-settings-header-subtitle;
+      @extend .account-settings-header-subtitle !optional;
 
       color: $alert-color;
     }
@@ -202,10 +202,10 @@
           }
 
           .u-field-link {
-            @extend %ui-clear-button;
+            @extend %ui-clear-button !optional;
 
             // set styles
-            @extend %btn-pl-default-base;
+            @extend %btn-pl-default-base !optional;
 
             @include font-size(18);
 
@@ -257,8 +257,8 @@
             padding: 0;
 
             .u-field-link {
-              @extend %ui-clear-button;
-              @extend %btn-pl-default-base;
+              @extend %ui-clear-button !optional;
+              @extend %btn-pl-default-base !optional;
 
               @include font-size(14);
 
@@ -272,7 +272,7 @@
         }
 
         .u-field-order-lines {
-          @extend .u-field-order;
+          @extend .u-field-order !optional;
 
           padding: 5px 0 0;
           font-weight: 100;
@@ -492,10 +492,10 @@
 
     .account-deletion-details {
       .btn-outline-primary {
-        @extend %ui-clear-button;
+        @extend %ui-clear-button !optional;
 
         // set styles
-        @extend %btn-pl-default-base;
+        @extend %btn-pl-default-base !optional;
 
         @include font-size(18);
 
@@ -536,7 +536,7 @@
         }
 
         .paragon__btn:not(.cancel-btn) {
-          @extend %btn-primary-blue;
+          @extend %btn-primary-blue !optional;
         }
       }
 
@@ -566,10 +566,10 @@
       .delete-confirmation-wrapper {
         .paragon__modal-footer {
           .paragon__btn-outline-primary {
-            @extend %ui-clear-button;
+            @extend %ui-clear-button !optional;
 
             // set styles
-            @extend %btn-pl-default-base;
+            @extend %btn-pl-default-base !optional;
 
             @include margin-left(25px);
 
@@ -653,7 +653,7 @@
       margin-top: 10px;
 
       .btn-alert-primary {
-        @extend %btn-primary-blue;
+        @extend %btn-primary-blue !optional;
 
         @include font-size(18);
 
@@ -665,10 +665,10 @@
       }
 
       .btn-alert-secondary {
-        @extend %ui-clear-button;
+        @extend %ui-clear-button !optional;
 
         // set styles
-        @extend %btn-pl-default-base;
+        @extend %btn-pl-default-base !optional;
 
         @include font-size(18);
 
diff --git a/lms/static/sass/views/_api-access.scss b/lms/static/sass/views/_api-access.scss
index 75c32fa52fa6..8d23ed5bf3a3 100644
--- a/lms/static/sass/views/_api-access.scss
+++ b/lms/static/sass/views/_api-access.scss
@@ -1,6 +1,6 @@
 #api-access-wrapper {
   h1 {
-    @extend %t-title4;
+    @extend %t-title4 !optional;
 
     margin-bottom: 0;
     padding: $baseline;
@@ -9,7 +9,7 @@
   }
 
   h2 {
-    @extend %t-title5;
+    @extend %t-title5 !optional;
 
     margin: $baseline;
 
@@ -17,7 +17,7 @@
   }
 
   p {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     margin: $baseline;
   }
@@ -41,7 +41,7 @@
   }
 
   #api-access-status {
-    @extend %t-copy-base;
+    @extend %t-copy-base !optional;
   }
 
   .catalog-body {
@@ -61,14 +61,14 @@
         margin: 1.5*$baseline 0;
 
         .helptext {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
           display: block;
         }
       }
 
       label {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         display: block;
         font-style: normal;
@@ -80,7 +80,7 @@
 
       input,
       textarea {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         font-family: 'Open Sans';
         font-style: normal;
@@ -94,7 +94,7 @@
         }
 
         &[type=submit] {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
 
           border-radius: 3px;
           border: none;
@@ -111,7 +111,7 @@
         list-style-type: none;
 
         li {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
 
           margin: 0;
           color: $red;
@@ -120,7 +120,7 @@
 
       #api-access-submit,
       .preview-query {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         border-radius: 3px;
         border: none;
@@ -148,12 +148,12 @@
     margin: $baseline 0;
 
     p {
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
 
       margin: $baseline/2 0;
 
       .application-label {
-        @extend %t-weight4;
+        @extend %t-weight4 !optional;
       }
     }
   }
diff --git a/lms/static/sass/views/_decoupled-verification.scss b/lms/static/sass/views/_decoupled-verification.scss
index 674cd903adf1..e58be8e4271b 100644
--- a/lms/static/sass/views/_decoupled-verification.scss
+++ b/lms/static/sass/views/_decoupled-verification.scss
@@ -194,7 +194,7 @@
     }
 
     .photo-tip {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       color: black;
       margin-bottom: 20px;
diff --git a/lms/static/sass/views/_financial-assistance.scss b/lms/static/sass/views/_financial-assistance.scss
index 20370aa617da..24840ffa9f6c 100644
--- a/lms/static/sass/views/_financial-assistance.scss
+++ b/lms/static/sass/views/_financial-assistance.scss
@@ -1,5 +1,5 @@
 %fa-copy {
-  @extend %t-copy-base;
+  @extend %t-copy-base !optional;
 
   padding: ($baseline/2) 0;
   margin: 0;
@@ -12,7 +12,7 @@
   max-width: 1180px;
 
   h1 {
-    @extend %t-title4;
+    @extend %t-title4 !optional;
 
     @include text-align(left);
 
@@ -23,15 +23,15 @@
   }
 
   h2 {
-    @extend %t-title6;
-    @extend %t-strong;
+    @extend %t-title6 !optional;
+    @extend %t-strong !optional;
 
     margin-top: ($baseline/2);
     text-transform: none;
   }
 
   p {
-    @extend %fa-copy;
+    @extend %fa-copy !optional;
 
     font-size: 0.875em;
   }
@@ -129,7 +129,7 @@
     }
 
     .title {
-      @extend %fa-copy;
+      @extend %fa-copy !optional;
 
       padding: 0;
 
@@ -139,7 +139,7 @@
     }
 
     .data {
-      @extend %fa-copy;
+      @extend %fa-copy !optional;
 
       padding: 0;
       color: $black;
@@ -148,7 +148,7 @@
   }
 
   .financial-assistance-form {
-    @extend .login-register;
+    @extend .login-register !optional;
 
     max-width: 800px;
 
diff --git a/lms/static/sass/views/_homepage.scss b/lms/static/sass/views/_homepage.scss
index bb7963fba6c3..e669cc8c52c2 100644
--- a/lms/static/sass/views/_homepage.scss
+++ b/lms/static/sass/views/_homepage.scss
@@ -14,7 +14,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi
     width: 100%;
 
     .courses-listing {
-      @extend %ui-no-list;
+      @extend %ui-no-list !optional;
 
       .courses-listing-item {
         margin: 0 0 ($baseline*1.5) 0;
@@ -41,7 +41,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi
         &::before {
           @include left(0);
 
-          @extend %ui-depth1;
+          @extend %ui-depth1 !optional;
 
           position: absolute;
           top: 0;
@@ -62,7 +62,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi
 
           box-sizing: border-box;
 
-          @extend %ui-depth2;
+          @extend %ui-depth2 !optional;
 
           position: absolute;
           top: ($baseline*2.75);
@@ -91,7 +91,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi
         .course-organization,
         .course-code,
         .course-date {
-          @extend %t-icon6;
+          @extend %t-icon6 !optional;
 
           color: $gray-d2;
         }
@@ -118,7 +118,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi
         .course-title {
           @include line-height(16);
 
-          @extend %t-icon4;
+          @extend %t-icon4 !optional;
 
           margin: ($baseline*0.25) 0 ($baseline*1.75) 0;
           padding: 0 ($baseline*0.75);
diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss
index cabf933c0dcb..25206a132cd7 100644
--- a/lms/static/sass/views/_login-register.scss
+++ b/lms/static/sass/views/_login-register.scss
@@ -70,7 +70,7 @@
   -moz-flex-wrap: wrap;
 
   h2 {
-    @extend %t-title4;
+    @extend %t-title4 !optional;
 
     margin-top: $baseline;
     letter-spacing: normal;
@@ -79,8 +79,8 @@
   }
 
   h3 {
-    @extend %t-title6;
-    @extend %t-light;
+    @extend %t-title6 !optional;
+    @extend %t-light !optional;
 
     margin: 0;
     letter-spacing: normal;
@@ -90,7 +90,7 @@
 
   a,
   label {
-    @extend %expand-clickable-area;
+    @extend %expand-clickable-area !optional;
   }
 
   a {
@@ -122,7 +122,7 @@ ul.fa-ul{
   max-width: 500px;
 
   .instructions {
-    @extend %t-copy-base;
+    @extend %t-copy-base !optional;
   }
 
   /* Temp. fix until applied globally */
@@ -212,7 +212,7 @@ ul.fa-ul{
   }
 
   %nav-btn-base {
-    @extend %btn-secondary-blue-outline;
+    @extend %btn-secondary-blue-outline !optional;
 
     width: 100%;
     height: ($baseline*2);
@@ -222,8 +222,8 @@ ul.fa-ul{
   }
 
   .nav-btn {
-    @extend %nav-btn-base;
-    @extend %t-strong;
+    @extend %nav-btn-base !optional;
+    @extend %t-strong !optional;
   }
 
   .form-type,
@@ -235,11 +235,11 @@ ul.fa-ul{
   }
 
   .toggle-form {
-    @extend %t-action1;
+    @extend %t-action1 !optional;
   }
 
   .note {
-    @extend %t-copy-sub2;
+    @extend %t-copy-sub2 !optional;
 
     display: block;
     margin: ($baseline/2) ($baseline/2) 0 ($baseline/2);
@@ -289,7 +289,7 @@ ul.fa-ul{
   }
 
   .form-label {
-    @extend %bold-label;
+    @extend %bold-label !optional;
 
     padding: 0 0 0 ($baseline/4);
   }
@@ -380,7 +380,7 @@ ul.fa-ul{
     }
 
     .field-link {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       display: block;
       margin-bottom: 5px;
@@ -487,7 +487,7 @@ ul.fa-ul{
 
     .tip,
     .label-optional {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       color: $uxpl-gray-base;
     }
@@ -518,7 +518,7 @@ ul.fa-ul{
   }
 
   .action-primary {
-    @extend %btn-primary-blue;
+    @extend %btn-primary-blue !optional;
 
     padding: 1ex 1em;
     text-transform: none;
@@ -527,13 +527,13 @@ ul.fa-ul{
     margin-top: $baseline;
 
     .icon {
-      @extend %sso-icon;
+      @extend %sso-icon !optional;
     }
   }
 
   .login-provider {
-    @extend %btn-secondary-grey-outline;
-    @extend %t-action4;
+    @extend %btn-secondary-grey-outline !optional;
+    @extend %t-action4 !optional;
 
     @include padding(0, 0, 0, $baseline*2);
     @include text-align(left);
@@ -548,7 +548,7 @@ ul.fa-ul{
     text-transform: none;
 
     .icon {
-      @extend %sso-icon;
+      @extend %sso-icon !optional;
 
       @include left(0);
 
@@ -681,9 +681,9 @@ ul.fa-ul{
   }
 
   .button-secondary-login {
-    @extend %nav-btn-base;
-    @extend %t-action4;
-    @extend %t-regular;
+    @extend %nav-btn-base !optional;
+    @extend %t-action4 !optional;
+    @extend %t-regular !optional;
 
     font-size: 1rem;
     font-weight: 600;
@@ -704,7 +704,7 @@ ul.fa-ul{
     background: tint($yellow, 20%);
 
     .message-title {
-      @extend %t-title5;
+      @extend %t-title5 !optional;
 
       font-family: $font-family-sans-serif;
       margin: 0 0 ($baseline/4) 0;
@@ -713,7 +713,7 @@ ul.fa-ul{
 
     .message-copy,
     .message-copy p {
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
 
       font-family: $font-family-sans-serif;
       margin: 0 !important;
@@ -772,7 +772,7 @@ ul.fa-ul{
 
   .institution-list {
     .institution {
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
     }
   }
 
diff --git a/lms/static/sass/views/_oauth2.scss b/lms/static/sass/views/_oauth2.scss
index 9849cc4c4446..48a108271a33 100644
--- a/lms/static/sass/views/_oauth2.scss
+++ b/lms/static/sass/views/_oauth2.scss
@@ -21,7 +21,7 @@
   font-family: $font-family-sans-serif;
 
   h1 {
-    @extend %t-title4;
+    @extend %t-title4 !optional;
 
     margin-bottom: 0;
     margin-left: 0;
@@ -32,7 +32,7 @@
   }
 
   p {
-    @extend %t-copy-base;
+    @extend %t-copy-base !optional;
 
     margin: $baseline/2 0;
   }
@@ -42,13 +42,13 @@
   }
 
   .btn-authorization-allow {
-    @extend %btn-primary-blue;
+    @extend %btn-primary-blue !optional;
 
     margin-left: 20px;
     line-height: 0.7em;
   }
 
   .btn-authorization-cancel {
-    @extend %btn-secondary-blue-outline;
+    @extend %btn-secondary-blue-outline !optional;
   }
 }
diff --git a/lms/static/sass/views/_shoppingcart.scss b/lms/static/sass/views/_shoppingcart.scss
index bcf6c3aef895..3d355ce80cfe 100644
--- a/lms/static/sass/views/_shoppingcart.scss
+++ b/lms/static/sass/views/_shoppingcart.scss
@@ -38,7 +38,7 @@ $light-border: 1px solid $gray-l5;
 .cart-errors {
   @include text-align(center);
 
-  @extend %t-copy-base;
+  @extend %t-copy-base !optional;
 
   display: none;
   margin-bottom: $baseline;
@@ -49,7 +49,7 @@ $light-border: 1px solid $gray-l5;
 }
 
 #expiry-msg {
-  @extend %t-copy-sub1;
+  @extend %t-copy-sub1 !optional;
 
   margin-top: ($baseline*0.15);
   border-top: $light-border;
@@ -62,7 +62,7 @@ $light-border: 1px solid $gray-l5;
   .title {
     @include text-align(left);
 
-    @extend %t-title4;
+    @extend %t-title4 !optional;
 
     border-bottom: $light-border;
   }
@@ -82,7 +82,7 @@ $light-border: 1px solid $gray-l5;
     width: calc(100% - #{$enrollment-details-width-difference});
 
     .sub-title {
-      @extend %t-title5;
+      @extend %t-title5 !optional;
 
       color: $gray-l1;
     }
@@ -96,20 +96,20 @@ $light-border: 1px solid $gray-l5;
     .course-dates {
       @include float(right);
 
-      @extend %t-copy-lead1;
+      @extend %t-copy-lead1 !optional;
     }
 
     .course-title h1 {
       @include text-align(left);
 
-      @extend %t-title4;
-      @extend %t-strong;
+      @extend %t-title4 !optional;
+      @extend %t-strong !optional;
 
       color: $black-t3;
     }
 
     .enrollment-text {
-      @extend %t-copy-base;
+      @extend %t-copy-base !optional;
 
       line-height: normal;
       color: $gray-l1;
@@ -136,7 +136,7 @@ $light-border: 1px solid $gray-l5;
     @include border-radius(3px);
     @include text-align(center);
 
-    @extend %t-copy-lead2;
+    @extend %t-copy-lead2 !optional;
 
     display: inline-block;
     background-clip: padding-box;
@@ -158,7 +158,7 @@ $light-border: 1px solid $gray-l5;
     @include float(right);
     @include border-radius(3px);
 
-    @extend %t-copy-lead2;
+    @extend %t-copy-lead2 !optional;
 
     display: inline-block;
     box-shadow: 0 1px 0 0 $blue2 inset;
@@ -186,8 +186,8 @@ $light-border: 1px solid $gray-l5;
   a.blue {
     @include border-radius(3px);
 
-    @extend %t-copy-lead2;
-    @extend %t-regular;
+    @extend %t-copy-lead2 !optional;
+    @extend %t-regular !optional;
 
     display: inline-block;
     margin: ($baseline/2) 0 $baseline 0;
@@ -208,8 +208,8 @@ $light-border: 1px solid $gray-l5;
   input[type="text"],
   input[type="email"],
   select {
-    @extend %t-action2;
-    @extend %t-strong;
+    @extend %t-action2 !optional;
+    @extend %t-strong !optional;
 
     border: $input-border;
     padding: ($baseline*0.4) ($baseline*0.6);
@@ -240,7 +240,7 @@ $light-border: 1px solid $gray-l5;
   h1 {
     @include text-align(left);
 
-    @extend %t-title4;
+    @extend %t-title4 !optional;
 
     margin: ($baseline/2) 0 0 0;
     padding: ($baseline*1.5) 0;
@@ -249,7 +249,7 @@ $light-border: 1px solid $gray-l5;
   }
 
   .steps {
-    @extend %ui-no-list;
+    @extend %ui-no-list !optional;
 
     border-top: $steps-border;
     border-bottom: $steps-border;
@@ -266,7 +266,7 @@ $light-border: 1px solid $gray-l5;
 
       //STATE: active
       &.active {
-        @extend %t-regular;
+        @extend %t-regular !optional;
 
         border-bottom: $steps-border;
       }
@@ -328,7 +328,7 @@ $light-border: 1px solid $gray-l5;
 
       h3,
       h3 span {
-        @extend %t-title6;
+        @extend %t-title6 !optional;
 
         padding: 0;
         color: $light-gray2;
@@ -349,7 +349,7 @@ $light-border: 1px solid $gray-l5;
 
       .course-registration-title,
       .course-dates-title {
-        @extend %t-title6;
+        @extend %t-title6 !optional;
 
         display: block;
         padding: 0;
@@ -358,7 +358,7 @@ $light-border: 1px solid $gray-l5;
 
       .course-display-name,
       .course-display-dates {
-        @extend %t-title4;
+        @extend %t-title4 !optional;
 
         display: block;
         color: $dark-gray2;
@@ -371,7 +371,7 @@ $light-border: 1px solid $gray-l5;
       h1 {
         @include float(left);
 
-        @extend %t-title4;
+        @extend %t-title4 !optional;
 
         padding: 0 0 ($baseline/2) 0;
         width: ($baseline*35);
@@ -384,7 +384,7 @@ $light-border: 1px solid $gray-l5;
         }
 
         span {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
         }
       }
 
@@ -404,8 +404,8 @@ $light-border: 1px solid $gray-l5;
         .col-1 {
           @include float(left);
 
-          @extend %t-copy-base;
-          @extend %t-regular;
+          @extend %t-copy-base !optional;
+          @extend %t-regular !optional;
 
           padding-top: ($baseline*0.55);
           width: ($baseline*22.5);
@@ -415,7 +415,7 @@ $light-border: 1px solid $gray-l5;
             span {
               @include padding-left($baseline);
 
-              @extend %t-copy-lead2;
+              @extend %t-copy-lead2 !optional;
 
               color: $dark-gray1;
             }
@@ -443,8 +443,8 @@ $light-border: 1px solid $gray-l5;
             position: relative;
 
             label {
-              @extend %t-copy-base;
-              @extend %t-strong;
+              @extend %t-copy-base !optional;
+              @extend %t-strong !optional;
 
               cursor: text;
               color: $light-gray2;
@@ -462,8 +462,8 @@ $light-border: 1px solid $gray-l5;
               input[type="text"] {
                 @include text-align(center);
 
-                @extend %t-copy-lead2;
-                @extend %t-strong;
+                @extend %t-copy-lead2 !optional;
+                @extend %t-strong !optional;
 
                 box-shadow: none;
                 border: none;
@@ -475,7 +475,7 @@ $light-border: 1px solid $gray-l5;
 
                 //STATE: focus
                 &:focus {
-                  @extend %no-outline;
+                  @extend %no-outline !optional;
                 }
               }
             }
@@ -492,7 +492,7 @@ $light-border: 1px solid $gray-l5;
               text-shadow: none;
 
               i {
-                @extend %t-icon3;
+                @extend %t-icon3 !optional;
 
                 color: $dark-gray2;
 
@@ -503,7 +503,7 @@ $light-border: 1px solid $gray-l5;
 
               //CASE: has class inc
               &.inc {
-                @extend %no-outline;
+                @extend %no-outline !optional;
 
                 top: ($baseline*0.45);
                 width: auto;
@@ -511,7 +511,7 @@ $light-border: 1px solid $gray-l5;
 
               //CASE: has class dec
               &.dec {
-                @extend %no-outline;
+                @extend %no-outline !optional;
 
                 top: ($baseline*1.5);
                 width: auto;
@@ -543,13 +543,13 @@ $light-border: 1px solid $gray-l5;
               @include float(right);
               @include padding($baseline*1.25, $baseline*1.75, $baseline*1.25, 0);
 
-              @extend %t-action2;
+              @extend %t-action2 !optional;
 
               display: inline-block;
 
               // STATE: focus
               &:focus {
-                @extend %no-outline;
+                @extend %no-outline !optional;
               }
             }
 
@@ -583,7 +583,7 @@ $light-border: 1px solid $gray-l5;
             i {
               @include line-height(27.02);
 
-              @extend %t-icon3;
+              @extend %t-icon3 !optional;
 
               color: $dark-gray2;
             }
@@ -610,8 +610,8 @@ $light-border: 1px solid $gray-l5;
       @include clearfix();
 
       a {
-        @extend %t-copy-lead1;
-        @extend %t-strong;
+        @extend %t-copy-lead1 !optional;
+        @extend %t-strong !optional;
 
         display: inline-block;
         cursor: pointer;
@@ -629,8 +629,8 @@ $light-border: 1px solid $gray-l5;
         b {
           @include padding-left($baseline);
 
-          @extend %t-copy-lead2;
-          @extend %t-strong;
+          @extend %t-copy-lead2 !optional;
+          @extend %t-strong !optional;
 
           letter-spacing: 0;
         }
@@ -643,8 +643,8 @@ $light-border: 1px solid $gray-l5;
       display: inline-block;
 
       input[type="text"] {
-        @extend %t-copy-base;
-        @extend %t-strong;
+        @extend %t-copy-base !optional;
+        @extend %t-strong !optional;
 
         border: $input-border;
         padding: ($baseline*0.4) ($baseline*0.6);
@@ -665,7 +665,7 @@ $light-border: 1px solid $gray-l5;
       }
 
       .error-text {
-        @extend %t-copy-sub2;
+        @extend %t-copy-sub2 !optional;
 
         display: block;
         padding-bottom: 0;
@@ -685,7 +685,7 @@ $light-border: 1px solid $gray-l5;
       .green {
         @include margin-right($baseline);
 
-        @extend %t-strong;
+        @extend %t-strong !optional;
 
         color: $green1;
       }
@@ -708,8 +708,8 @@ $light-border: 1px solid $gray-l5;
     }
 
     button[type="submit"] {
-      @extend %t-action2;
-      @extend %t-strong;
+      @extend %t-action2 !optional;
+      @extend %t-strong !optional;
 
       float: none;
       padding: ($baseline*0.35) $baseline;
@@ -740,7 +740,7 @@ $light-border: 1px solid $gray-l5;
       .billing-detail-label {
         @include margin-right($baseline);
 
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         display: inline-block;
         width: ($baseline*9.5);
@@ -748,7 +748,7 @@ $light-border: 1px solid $gray-l5;
       }
 
       .billing-detail-value {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         display: inline-block;
         margin: 0;
@@ -789,8 +789,8 @@ $light-border: 1px solid $gray-l5;
         label {
           @include padding($baseline*0.4, $baseline*0.75, $baseline*0.4, $baseline*0.3);
 
-          @extend %t-copy-base;
-          @extend %t-regular;
+          @extend %t-copy-base !optional;
+          @extend %t-regular !optional;
 
           display: inline-block;
           margin-bottom: 0;
@@ -814,8 +814,8 @@ $light-border: 1px solid $gray-l5;
         @include margin-left($baseline*0.75);
         @include padding($baseline*0.75, $baseline*3, $baseline*1.1, $baseline*1.5);
 
-        @extend %t-copy-lead2;
-        @extend %t-strong;
+        @extend %t-copy-lead2 !optional;
+        @extend %t-strong !optional;
 
         width: auto;
         height: ($baseline*3.35);
@@ -836,7 +836,7 @@ $light-border: 1px solid $gray-l5;
       p {
         @include text-align(right);
 
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         padding: ($baseline*0.65) 0;
       }
@@ -848,7 +848,7 @@ $light-border: 1px solid $gray-l5;
       .fa-caret-right {
         @include right($baseline*1.5);
 
-        @extend %t-icon3;
+        @extend %t-icon3 !optional;
 
         position: absolute;
         top: ($baseline*1.1);
@@ -860,15 +860,15 @@ $light-border: 1px solid $gray-l5;
   .disclaimer {
     @include text-align(right);
 
-    @extend %t-light;
+    @extend %t-light !optional;
 
     padding: ($baseline/2) 0;
     color: $light-gray2;
   }
 
   h3 {
-    @extend %t-title6;
-    @extend %t-regular;
+    @extend %t-title6 !optional;
+    @extend %t-regular !optional;
 
     padding: ($baseline*1.5) $baseline;
     color: $dark-gray1;
@@ -879,7 +879,7 @@ $light-border: 1px solid $gray-l5;
     width: 100%;
 
     h3 {
-      @extend %t-title5;
+      @extend %t-title5 !optional;
 
       margin-bottom: ($baseline/4);
       padding: ($baseline*0.6) 0;
@@ -909,8 +909,8 @@ $light-border: 1px solid $gray-l5;
         margin-bottom: ($baseline*0.75);
 
         label {
-          @extend %t-copy-base;
-          @extend %t-regular;
+          @extend %t-copy-base !optional;
+          @extend %t-regular !optional;
 
           display: block;
           color: $dark-gray2;
@@ -918,7 +918,7 @@ $light-border: 1px solid $gray-l5;
         }
 
         input {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
 
           margin-bottom: ($baseline/4);
           width: 100%;
@@ -933,7 +933,7 @@ $light-border: 1px solid $gray-l5;
   }
 
   .error-text {
-    @extend %t-copy-sub2;
+    @extend %t-copy-sub2 !optional;
 
     display: block;
     padding-bottom: 0;
@@ -981,7 +981,7 @@ $light-border: 1px solid $gray-l5;
     padding: $baseline;
 
     h2 {
-      @extend %t-strong;
+      @extend %t-strong !optional;
 
       margin-bottom: 0;
       color: $dark-gray1;
@@ -993,7 +993,7 @@ $light-border: 1px solid $gray-l5;
         letter-spacing: 0;
 
         .blue-link {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
 
           color: $blue2;
 
@@ -1013,7 +1013,7 @@ $light-border: 1px solid $gray-l5;
     color: $dark-gray1;
 
     h2 {
-      @extend %t-title5;
+      @extend %t-title5 !optional;
     }
   }
 
@@ -1076,7 +1076,7 @@ $light-border: 1px solid $gray-l5;
 
         // CASE: has first child
         &:first-child {
-          @extend %t-copy-lead1;
+          @extend %t-copy-lead1 !optional;
 
           @include text-align(left);
 
@@ -1091,7 +1091,7 @@ $light-border: 1px solid $gray-l5;
             @include border-radius(3px);
             @include text-align(center);
 
-            @extend %t-copy-sub1;
+            @extend %t-copy-sub1 !optional;
 
             display: inline-block;
             padding: ($baseline/10) ($baseline/2);
@@ -1133,8 +1133,8 @@ $light-border: 1px solid $gray-l5;
   h2 {
     @include text-align(center);
 
-    @extend %t-title5;
-    @extend %t-strong;
+    @extend %t-title5 !optional;
+    @extend %t-strong !optional;
 
     margin-top: $baseline;
     margin-bottom: ($baseline/4);
@@ -1146,7 +1146,7 @@ $light-border: 1px solid $gray-l5;
   p {
     @include text-align(center);
 
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     text-shadow: 0 1px 1px $white;
     color: $gray-l1;
@@ -1155,8 +1155,8 @@ $light-border: 1px solid $gray-l5;
   a.blue {
     @include border-radius(3px);
 
-    @extend %t-copy-lead2;
-    @extend %t-regular;
+    @extend %t-copy-lead2 !optional;
+    @extend %t-regular !optional;
 
     display: inline-block;
     margin: ($baseline/2) 0 $baseline 0;
diff --git a/lms/static/sass/views/_support.scss b/lms/static/sass/views/_support.scss
index ca6f632768d6..4887440b9851 100644
--- a/lms/static/sass/views/_support.scss
+++ b/lms/static/sass/views/_support.scss
@@ -67,8 +67,8 @@
     background-color: $white;
 
     .enrollment-change-title {
-      @extend %t-title6;
-      @extend %t-strong;
+      @extend %t-title6 !optional;
+      @extend %t-strong !optional;
 
       @include text-align(left);
 
@@ -85,7 +85,7 @@
       label,
       select,
       input {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         display: inline;
         font-style: normal;
@@ -93,8 +93,8 @@
     }
 
     .enrollment-change-errors {
-      @extend %t-copy-sub1;
-      @extend %t-light;
+      @extend %t-copy-sub1 !optional;
+      @extend %t-light !optional;
 
       color: $red;
     }
@@ -107,7 +107,7 @@
 
     .enrollment-change-submit,
     .enrollment-change-cancel {
-      @extend %t-action4;
+      @extend %t-action4 !optional;
 
       margin: ($baseline/4) auto;
       text-transform: none;
@@ -128,19 +128,19 @@
 }
 
 .enrollment-results {
-  @extend %t-copy-sub2;
+  @extend %t-copy-sub2 !optional;
 
   .enrollment-table {
     display: inline-block;
   }
 
   th {
-    @extend %t-title7;
+    @extend %t-title7 !optional;
   }
 
   .change-enrollment-btn,
   .change-enrollment-btn:hover {
-    @extend %t-action4;
+    @extend %t-action4 !optional;
 
     margin: ($baseline/4) auto;
     padding: ($baseline/4) 1px;
@@ -159,7 +159,7 @@
   }
 
   th {
-    @extend %t-title7;
+    @extend %t-title7 !optional;
 
     text-align: center;
   }
@@ -170,7 +170,7 @@
 
   .disable-account-btn,
   .disable-account-btn:hover {
-    @extend %t-action4;
+    @extend %t-action4 !optional;
 
     letter-spacing: normal;
     text-transform: none;
@@ -191,7 +191,7 @@
   }
 
   th {
-    @extend %t-title7;
+    @extend %t-title7 !optional;
 
     text-align: center;
   }
diff --git a/lms/static/sass/views/_teams.scss b/lms/static/sass/views/_teams.scss
index e17e6b5f0d86..e640f155566c 100644
--- a/lms/static/sass/views/_teams.scss
+++ b/lms/static/sass/views/_teams.scss
@@ -28,7 +28,7 @@
     padding: $baseline $baseline ($baseline/2) $baseline;
 
     .page-title {
-      @extend %t-title4;
+      @extend %t-title4 !optional;
 
       margin-bottom: ($baseline/4);
       text-transform: none;
@@ -36,7 +36,7 @@
     }
 
     .page-description {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       margin-bottom: ($baseline/4);
       color: $gray;
@@ -60,7 +60,7 @@
 
   // ui bits
   .breadcrumbs {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     .nav-item {
       @include margin-right($baseline/2);
@@ -88,7 +88,7 @@
     }
 
     .search-label {
-      @extend %text-sr;
+      @extend %text-sr !optional;
     }
 
     .search-field {
@@ -101,7 +101,7 @@
     }
 
     .action-search {
-      @extend %button-reset;
+      @extend %button-reset !optional;
 
       background-color: $gray-l3;
       padding: ($baseline/5) ($baseline/2);
@@ -123,7 +123,7 @@
       @include right(0);
       @include margin(0, ($baseline/4), 0, 0);
 
-      @extend %button-reset;
+      @extend %button-reset !optional;
 
       position: absolute;
       top: 0;
@@ -144,11 +144,11 @@
   }
 
   .page-content-nav {
-    @extend %page-content-nav;
+    @extend %page-content-nav !optional;
   }
 
   .intro {
-    @extend %t-weight4;
+    @extend %t-weight4 !optional;
   }
 
   .listing-tools {
@@ -195,14 +195,14 @@
     }
 
     .card-type {
-      @extend %t-copy-sub2;
+      @extend %t-copy-sub2 !optional;
 
       color: $gray;
     }
 
     .card-title {
-      @extend %t-title5;
-      @extend %t-strong;
+      @extend %t-title5 !optional;
+      @extend %t-strong !optional;
 
       margin-bottom: rem(0.5);
       overflow: hidden;
@@ -211,7 +211,7 @@
     }
 
     .card-description {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       color: $gray;
     }
@@ -220,7 +220,7 @@
       @include clearfix();
 
       .action-view {
-        @extend %btn-pl-default-base;
+        @extend %btn-pl-default-base !optional;
 
         @include float(right);
 
@@ -231,7 +231,7 @@
     .wrapper-card-meta {
       @include clearfix();
 
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       padding: ($baseline/2) $baseline;
       background-color: $gray-l6;
@@ -260,7 +260,7 @@
       }
 
       .list-member-thumbs {
-        @extend %ui-no-list;
+        @extend %ui-no-list !optional;
 
         display: inline-block;
         vertical-align: middle;
@@ -329,8 +329,8 @@
 
     &.has-pennant {
       .pennant {
-        @extend %t-copy-sub2;
-        @extend %t-strong;
+        @extend %t-copy-sub2 !optional;
+        @extend %t-strong !optional;
 
         display: block;
         position: absolute;
@@ -386,7 +386,7 @@
 
       margin-bottom: $baseline;
 
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       color: $gray;
 
@@ -431,14 +431,14 @@
 
   .create-team {
     legend {
-      @extend %t-title6;
-      @extend %t-weight4;
+      @extend %t-title6 !optional;
+      @extend %t-weight4 !optional;
 
       margin-bottom: ($baseline/4);
     }
 
     .description {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       margin-bottom: ($baseline/2);
       color: $gray-l1;
@@ -453,7 +453,7 @@
       }
 
       &.is-required {
-        @extend %t-weight4;
+        @extend %t-weight4 !optional;
 
         .label::after {
           @include margin-left($baseline/4);
@@ -463,7 +463,7 @@
       }
 
       .input-text {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         transition: all $tmg-f2 ease-in-out 0s;
         display: block;
@@ -475,7 +475,7 @@
       }
 
       .input-select {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         width: 90%;
         margin-bottom: ($baseline/4);
@@ -505,7 +505,7 @@
       }
 
       .tip {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         display: block;
         color: $gray-l1;
@@ -535,8 +535,8 @@
   }
 
   .action {
-    @extend %t-copy;
-    @extend %t-action2;
+    @extend %t-copy !optional;
+    @extend %t-action2 !optional;
 
     @include margin-right ($baseline/2);
 
@@ -544,7 +544,7 @@
   }
 
   .action-primary {
-    @extend %btn-primary-blue;
+    @extend %btn-primary-blue !optional;
 
     &:focus {
       border: inherit;
@@ -556,7 +556,7 @@
   }
 
   .action-cancel {
-    @extend %button-reset;
+    @extend %button-reset !optional;
 
     display: inline-block;
     border: 1px solid transparent;
@@ -582,7 +582,7 @@
   }
 
   .join-team-message {
-    @extend %t-copy-sub1;
+    @extend %t-copy-sub1 !optional;
 
     @include text-align(right);
 
@@ -592,15 +592,15 @@
   }
 
   .team-actions {
-    @extend %ui-well;
+    @extend %ui-well !optional;
 
     margin: 20px 1.2%;
     color: $gray;
     text-align: center;
 
     .title {
-      @extend %t-title6;
-      @extend %t-strong;
+      @extend %t-title6 !optional;
+      @extend %t-strong !optional;
 
       margin-bottom: ($baseline/2);
       text-align: inherit;
@@ -667,7 +667,7 @@
             .u-field-message {
               display: block;
 
-              @extend %t-copy-sub1;
+              @extend %t-copy-sub1 !optional;
 
               @include padding-left(0);
 
diff --git a/lms/static/sass/views/_text-me-the-app.scss b/lms/static/sass/views/_text-me-the-app.scss
index 9dd1aeb28175..40782e227f81 100644
--- a/lms/static/sass/views/_text-me-the-app.scss
+++ b/lms/static/sass/views/_text-me-the-app.scss
@@ -26,7 +26,7 @@
 
 .text-me-fragment {
   h2 {
-    @extend %t-title4;
+    @extend %t-title4 !optional;
 
     letter-spacing: normal;
     font-family: $font-family-sans-serif;
@@ -34,8 +34,8 @@
   }
 
   h3 {
-    @extend %t-title6;
-    @extend %t-light;
+    @extend %t-title6 !optional;
+    @extend %t-light !optional;
 
     margin: 0;
     letter-spacing: normal;
@@ -69,7 +69,7 @@
       }
 
       .action-primary {
-        @extend %btn-primary-blue;
+        @extend %btn-primary-blue !optional;
 
         padding: 1ex 1em;
         text-transform: none;
diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index eb8686a5c8ea..899ae3148008 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -5,7 +5,7 @@
 
 // MISC: extends - button
 %btn-verify-primary {
-  @extend %btn-primary-green;
+  @extend %btn-primary-green !optional;
 }
 
 // ====================
@@ -27,7 +27,7 @@
     }
 
     .title-expand {
-      @extend %ui-fake-link;
+      @extend %ui-fake-link !optional;
 
       color: $m-blue-d2;
 
@@ -67,7 +67,7 @@
   h4,
   h5,
   h6 {
-    @extend %t-title;
+    @extend %t-title !optional;
 
     color: $m-gray-d4;
   }
@@ -119,7 +119,7 @@
   }
 
   label {
-    @extend %t-weight4;
+    @extend %t-weight4 !optional;
 
     font-family: $font-family-sans-serif;
     font-style: normal;
@@ -143,7 +143,7 @@
   button[type="submit"] {
     @include font-size(16);
 
-    @extend %t-weight4;
+    @extend %t-weight4 !optional;
 
     text-transform: none;
     text-shadow: none;
@@ -175,7 +175,7 @@
   .wrapper-photos,
   .field-group,
   .list-info {
-    @extend %ui-no-list;
+    @extend %ui-no-list !optional;
   }
 
   // ====================
@@ -196,19 +196,19 @@
 
   // elements: common copy
   .title {
-    @extend %t-title5;
-    @extend %t-weight1;
+    @extend %t-title5 !optional;
+    @extend %t-weight1 !optional;
   }
 
   .copy {
-    @extend %t-weight1;
+    @extend %t-weight1 !optional;
   }
 
   // ====================
 
   // elements - controls
   .action-primary {
-    @extend %btn-verify-primary;
+    @extend %btn-verify-primary !optional;
     // needed for override due to .register a:link styling
     border: 0 !important;
     color: $white !important;
@@ -216,14 +216,14 @@
 
   // elements - controls
   .action-primary-blue {
-    @extend %btn-primary-blue;
+    @extend %btn-primary-blue !optional;
     // needed for override due to .register a:link styling
     border: 0 !important;
     color: $white !important;
   }
 
   .action-confirm {
-    @extend %btn-verify-primary;
+    @extend %btn-verify-primary !optional;
     // needed for override due to .register a:link styling
     border: 0 !important;
     color: $white !important;
@@ -238,7 +238,7 @@
   // UI: reports/tables
   .wrapper-report {
     .report {
-      @extend %ui-window;
+      @extend %ui-window !optional;
 
       width: flex-grid(12, 12);
       border-color: $m-gray-t3;
@@ -249,7 +249,7 @@
       }
 
       td {
-        @extend %t-weight3;
+        @extend %t-weight3 !optional;
 
         vertical-align: middle;
         padding: ($baseline*0.75) $baseline;
@@ -257,7 +257,7 @@
       }
 
       th {
-        @extend %t-weight2;
+        @extend %t-weight2 !optional;
 
         padding: ($baseline/2) $baseline;
       }
@@ -268,8 +268,8 @@
         }
 
         th[scope="col"] {
-          @extend %t-title7;
-          @extend %t-weight2;
+          @extend %t-title7 !optional;
+          @extend %t-weight2 !optional;
 
           vertical-align: middle;
           color: $m-gray-d3;
@@ -290,7 +290,7 @@
   }
 
   .report-receipt-provider {
-    @extend %ui-window;
+    @extend %ui-window !optional;
 
     padding: ($baseline*0.75) $baseline;
 
@@ -318,7 +318,7 @@
         @include text-align(center);
 
         button {
-          @extend %btn-pl-primary-base;
+          @extend %btn-pl-primary-base !optional;
 
           white-space: nowrap;
         }
@@ -330,13 +330,13 @@
   // UI: help
   .help-item {
     .title {
-      @extend %hd-lv4;
+      @extend %hd-lv4 !optional;
 
       margin-bottom: ($baseline/4);
     }
 
     .copy {
-      @extend %copy-detail;
+      @extend %copy-detail !optional;
     }
 
     strong {
@@ -373,19 +373,19 @@
       width: flex-grid(11, 12);
 
       .title {
-        @extend %t-title6;
-        @extend %t-weight4;
+        @extend %t-title6 !optional;
+        @extend %t-weight4 !optional;
       }
 
       .copy {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
       }
     }
 
     .msg-icon {
       width: flex-grid(1, 12);
 
-      @extend %t-icon2;
+      @extend %t-icon2 !optional;
 
       @include margin-right(flex-gutter());
 
@@ -464,7 +464,7 @@
         @include text-align(right);
 
         .sts-track-value {
-          @extend %copy-badge;
+          @extend %copy-badge !optional;
 
           display: inline-block;
           background: $verified-color-lvl3;
@@ -489,8 +489,8 @@
       .sts-course-org,
       .sts-course-number,
       .sts-course-name {
-        @extend %t-title5;
-        @extend %t-weight4;
+        @extend %t-title5 !optional;
+        @extend %t-weight4 !optional;
 
         @include font-size(14);
         @include line-height(14);
@@ -547,7 +547,7 @@
   .progress-sts {
     @include size($baseline/4);
 
-    @extend %ui-depth1;
+    @extend %ui-depth1 !optional;
 
     position: absolute;
     top: 43px;
@@ -582,7 +582,7 @@
     }
 
     .progress-step {
-      @extend %ui-depth2;
+      @extend %ui-depth2 !optional;
 
       position: relative;
       display: table-cell;
@@ -605,8 +605,8 @@
         background: $white;
 
         .step-number {
-          @extend %t-title7;
-          @extend %t-weight4;
+          @extend %t-title7 !optional;
+          @extend %t-weight4 !optional;
 
           @include line-height(0);
           @include margin(16px, auto, 0, auto);
@@ -616,8 +616,8 @@
       }
 
       .step-name {
-        @extend %t-title7;
-        @extend %t-weight4;
+        @extend %t-title7 !optional;
+        @extend %t-weight4 !optional;
 
         color: $m-gray-l1;
       }
@@ -679,13 +679,13 @@
       width: flex-grid(12, 12);
 
       > .title {
-        @extend %hd-lv2;
+        @extend %hd-lv2 !optional;
 
         color: $m-blue-d1;
       }
 
       .instruction {
-        @extend %t-copy-lead1;
+        @extend %t-copy-lead1 !optional;
 
         margin-bottom: $baseline;
       }
@@ -699,11 +699,11 @@
       }
 
       .title {
-        @extend %hd-lv3;
+        @extend %hd-lv3 !optional;
       }
 
       .copy {
-        @extend %copy-detail;
+        @extend %copy-detail !optional;
       }
     }
 
@@ -713,7 +713,7 @@
       @include outer-container;
 
       .title {
-        @extend %hd-lv3;
+        @extend %hd-lv3 !optional;
 
         margin-bottom: 10px;
       }
@@ -768,7 +768,7 @@
             }
 
             .help-item-emphasis {
-              @extend %t-weight4;
+              @extend %t-weight4 !optional;
             }
           }
 
@@ -784,7 +784,7 @@
       }
 
       .task {
-        @extend %ui-window;
+        @extend %ui-window !optional;
 
         @include float(left);
         @include margin-right(flex-gutter());
@@ -803,12 +803,12 @@
 
         .control {
           .action {
-            @extend %btn-primary-blue;
+            @extend %btn-primary-blue !optional;
 
             padding: ($baseline/2) ($baseline*0.75);
 
             .icon {
-              @extend %t-icon4;
+              @extend %t-icon4 !optional;
 
               padding: ($baseline*0.25) ($baseline*0.5);
               display: block;
@@ -828,7 +828,7 @@
           // STATE: approved
           &.approved {
             .action {
-              @extend %btn-verify-primary;
+              @extend %btn-verify-primary !optional;
 
               padding: ($baseline/2) ($baseline*0.75);
             }
@@ -880,7 +880,7 @@
           @include text-align(right);
 
           .action-retakephotos a {
-            @extend %btn-primary-blue;
+            @extend %btn-primary-blue !optional;
 
             @include font-size(14);
 
@@ -900,7 +900,7 @@
       color: $black;
 
       .page-title {
-        @extend %t-strong;
+        @extend %t-strong !optional;
 
         border-bottom: 2px solid $m-gray-d3;
         padding-bottom: ($baseline*0.75);
@@ -920,7 +920,7 @@
           p {
             @include line-height(22);
 
-            @extend %t-strong;
+            @extend %t-strong !optional;
 
             margin-top: 0;
             color: $black;
@@ -935,7 +935,7 @@
             .product-info {
               @include font-size(22);
 
-              @extend %t-strong;
+              @extend %t-strong !optional;
 
               color: $blue;
             }
@@ -1022,14 +1022,14 @@
         }
 
         > .title {
-          @extend %hd-lv3;
+          @extend %hd-lv3 !optional;
         }
 
         .copy {
-          @extend %copy-base;
+          @extend %copy-base !optional;
 
           strong {
-            @extend %t-weight5;
+            @extend %t-weight5 !optional;
 
             color: $m-gray-d4;
           }
@@ -1056,7 +1056,7 @@
             }
 
             .placeholder-photo {
-              @extend %ui-window;
+              @extend %ui-window !optional;
 
               padding: ($baseline*0.75) $baseline;
 
@@ -1072,11 +1072,11 @@
             @include margin-left($baseline);
 
             .title {
-              @extend %hd-lv5;
+              @extend %hd-lv5 !optional;
             }
 
             .copy {
-              @extend %copy-detail;
+              @extend %copy-detail !optional;
             }
 
             // help - general list
@@ -1122,7 +1122,7 @@
           @include text-align(right);
 
           .action-editname a {
-            @extend %btn-primary-blue;
+            @extend %btn-primary-blue !optional;
 
             @include font-size(14);
 
@@ -1166,7 +1166,7 @@
 
             .contribution-option-other1 label,
             .contribution-option-other2 label {
-              @extend %text-sr;
+              @extend %text-sr !optional;
             }
           }
         }
@@ -1229,8 +1229,8 @@
     border-top: ($baseline/5) solid $m-gray-l4;
 
     .copy {
-      @extend %t-copy-lead1;
-      @extend %t-weight4;
+      @extend %t-copy-lead1 !optional;
+      @extend %t-weight4 !optional;
 
       @include left(calc(50% - 46px));
 
@@ -1248,7 +1248,7 @@
 
   // UI: nav - wizard
   .nav-wizard {
-    @extend %ui-well;
+    @extend %ui-well !optional;
 
     @include clearfix();
 
@@ -1258,7 +1258,7 @@
     padding: ($baseline*0.75) $baseline;
 
     .help-inline {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       @include float(left);
 
@@ -1276,7 +1276,7 @@
       background: $m-gray-l4;
 
       .action-primary {
-        @extend %btn-primary-disabled;
+        @extend %btn-primary-disabled !optional;
       }
     }
   }
@@ -1313,7 +1313,7 @@
       }
 
       .label-value {
-        @extend %t-weight4;
+        @extend %t-weight4 !optional;
       }
 
       .denomination-name {
@@ -1335,7 +1335,7 @@
   // help - faq
   .list-faq {
     .faq-question {
-      @extend %hd-lv3;
+      @extend %hd-lv3 !optional;
 
       border-bottom: 1px solid $m-gray-l4;
       padding-bottom: ($baseline/4);
@@ -1353,13 +1353,13 @@
     width: flex-grid(12, 12);
 
     > .title {
-      @extend %hd-lv2;
+      @extend %hd-lv2 !optional;
 
       color: $m-blue-d1;
     }
 
     .instruction {
-      @extend %t-copy-lead1;
+      @extend %t-copy-lead1 !optional;
 
       margin-bottom: $baseline;
     }
@@ -1418,7 +1418,7 @@
     }
 
     .sts-track {
-      @extend %text-sr;
+      @extend %text-sr !optional;
     }
 
     .form-register-choose {
@@ -1466,26 +1466,26 @@
       }
 
       .title {
-        @extend %t-title5;
-        @extend %t-weight5;
+        @extend %t-title5 !optional;
+        @extend %t-weight5 !optional;
 
         margin-bottom: ($baseline/2);
         width: calc(100% - 30px);
       }
 
       .copy {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
       }
 
       .wrapper-copy-inline {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         display: inline-block;
         width: 100%;
       }
 
       .copy-inline {
-        @extend %t-copy-base;
+        @extend %t-copy-base !optional;
 
         display: inline-block;
       }
@@ -1494,7 +1494,7 @@
         @include fill-parent;
 
         input {
-          @extend %t-weight4;
+          @extend %t-weight4 !optional;
 
           padding: ($baseline/2) ($baseline*0.75);
           width: 100%;
@@ -1523,7 +1523,7 @@
       }
 
       .action-select input {
-        @extend %btn-primary-blue;
+        @extend %btn-primary-blue !optional;
       }
     }
 
@@ -1552,14 +1552,14 @@
       .action-intro {
         @include fill-parent;
 
-        @extend %copy-detail;
+        @extend %copy-detail !optional;
 
         @include text-align(left);
       }
 
       .action-select input,
       .action-select button {
-        @extend %btn-verify-primary;
+        @extend %btn-verify-primary !optional;
       }
 
       .action-select button[name="verified_mode"] {
@@ -1569,7 +1569,7 @@
 
       // extra register options/info
       .title-expand {
-        @extend %t-copy-sub1;
+        @extend %t-copy-sub1 !optional;
 
         font-weight: 500 !important;
         display: inline-block;
@@ -1585,15 +1585,15 @@
       @include span-columns(4);
 
       .title {
-        @extend %hd-lv4;
-        @extend %t-weight4;
+        @extend %hd-lv4 !optional;
+        @extend %t-weight4 !optional;
 
         margin-top: $baseline;
         margin-bottom: ($baseline/2);
       }
 
       .copy {
-        @extend %copy-detail;
+        @extend %copy-detail !optional;
       }
     }
 
@@ -1607,8 +1607,8 @@
       margin: $baseline 0;
 
       .label {
-        @extend %hd-lv4;
-        @extend %t-weight4;
+        @extend %hd-lv4 !optional;
+        @extend %t-weight4 !optional;
 
         margin-bottom: ($baseline/2);
       }
@@ -1664,7 +1664,7 @@
 
         .contribution-option-other1 label,
         .contribution-option-other2 label {
-          @extend %text-sr;
+          @extend %text-sr !optional;
         }
       }
     }
@@ -1769,7 +1769,7 @@
       text-align: center;
 
       .req {
-        @extend %ui-window;
+        @extend %ui-window !optional;
 
         @include margin-right(flex-gutter());
 
@@ -1785,8 +1785,8 @@
         }
 
         .title {
-          @extend %t-title5;
-          @extend %t-weight4;
+          @extend %t-title5 !optional;
+          @extend %t-weight4 !optional;
 
           padding: $baseline;
           border-bottom: 1px solid $verified-color-lvl4;
@@ -1802,7 +1802,7 @@
           border-radius: ($baseline*10);
 
           *[class^="icon"] {
-            @extend %t-icon1;
+            @extend %t-icon1 !optional;
 
             color: $white;
           }
@@ -1813,12 +1813,12 @@
           }
 
           .fa-stack-2x {
-            @extend %ui-depth1;
+            @extend %ui-depth1 !optional;
           }
 
           .fa-stack-1x {
-            @extend %ui-depth2;
-            @extend %t-icon5;
+            @extend %ui-depth2 !optional;
+            @extend %t-icon5 !optional;
 
             position: absolute;
 
@@ -1862,14 +1862,14 @@
         }
 
         .copy-super {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
 
           margin-bottom: ($baseline/2);
           color: $verified-color-lvl1;
         }
 
         .copy-sub {
-          @extend %t-copy-sub2;
+          @extend %t-copy-sub2 !optional;
         }
 
         .actions {
@@ -1885,8 +1885,8 @@
         border-color: $m-pink-l3;
 
         .title {
-          @extend %t-title5;
-          @extend %t-weight4;
+          @extend %t-title5 !optional;
+          @extend %t-weight4 !optional;
 
           border-bottom-color: $m-pink-l3;
           background: tint($m-pink, 95%);
@@ -1898,13 +1898,13 @@
         }
 
         .copy-super {
-          @extend %t-copy-lead1;
+          @extend %t-copy-lead1 !optional;
 
           color: $m-pink;
         }
 
         .copy-sub {
-          @extend %t-copy-base;
+          @extend %t-copy-base !optional;
         }
       }
 
@@ -2039,14 +2039,14 @@
         width: flex-grid(6, 12);
 
         .title {
-          @extend %hd-lv4;
+          @extend %hd-lv4 !optional;
 
           margin-bottom: ($baseline/4);
         }
 
         .copy {
-          @extend %t-copy-sub1;
-          @extend %t-weight3;
+          @extend %t-copy-sub1 !optional;
+          @extend %t-weight3 !optional;
         }
 
         .list-actions {
@@ -2054,7 +2054,7 @@
         }
 
         .action-verify label {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
         }
       }
 
@@ -2075,7 +2075,7 @@
 
       .step-match {
         label {
-          @extend %t-copy-sub1;
+          @extend %t-copy-sub1 !optional;
         }
       }
     }
@@ -2183,13 +2183,13 @@
         }
 
         > .title {
-          @extend %hd-lv3;
+          @extend %hd-lv3 !optional;
 
           margin-bottom: $baseline;
         }
 
         .copy {
-          @extend %copy-base;
+          @extend %copy-base !optional;
 
           margin-bottom: $baseline;
         }
@@ -2200,7 +2200,7 @@
     .course-info {
       .options {
         .action-course {
-          @extend %btn-primary-blue;
+          @extend %btn-primary-blue !optional;
 
           @include font-size(14);
 
@@ -2210,7 +2210,7 @@
 
       .course-actions {
         .action-dashboard {
-          @extend %btn-primary-blue;
+          @extend %btn-primary-blue !optional;
         }
       }
     }
@@ -2245,7 +2245,7 @@
 
   .reverify-success-step {
     .title {
-      @extend %t-title4;
+      @extend %t-title4 !optional;
 
       text-align: left;
       text-transform: none;
@@ -2282,7 +2282,7 @@
   @include padding(($baseline*1.5), ($baseline*1.5), ($baseline*2), ($baseline*1.5));
 
   .title {
-    @extend %t-title4;
+    @extend %t-title4 !optional;
 
     text-align: left;
     text-transform: none;
@@ -2293,7 +2293,7 @@
   }
 
   .action-primary {
-    @extend %btn-primary-blue;
+    @extend %btn-primary-blue !optional;
   }
 }
 
@@ -2321,7 +2321,7 @@
 // STATE: already verified
 .register.is-verified {
   .nav-wizard .price-value {
-    @extend %t-weight4;
+    @extend %t-weight4 !optional;
 
     @include font-size(16);
 
@@ -2517,13 +2517,13 @@
 
     .view {
       .title {
-        @extend %hd-lv2;
+        @extend %hd-lv2 !optional;
 
         color: $m-blue-d1;
       }
 
       .instruction {
-        @extend %t-copy-lead1;
+        @extend %t-copy-lead1 !optional;
 
         margin-bottom: $baseline;
       }
diff --git a/requirements/edx/base.txt b/requirements/edx/base.txt
index 58999772874f..d0863e7a5e03 100644
--- a/requirements/edx/base.txt
+++ b/requirements/edx/base.txt
@@ -141,7 +141,7 @@ jsonfield2==3.0.3         # via -c requirements/edx/../constraints.txt, -r requi
 kombu==4.6.11             # via celery
 laboratory==1.0.2         # via -r requirements/edx/base.in
 lazy==1.4                 # via -r requirements/edx/paver.txt, acid-xblock, lti-consumer-xblock, ora2
-libsass==0.10.0           # via -r requirements/edx/paver.txt, ora2
+libsass==0.20.1           # via -r requirements/edx/paver.txt, ora2
 loremipsum==1.0.5         # via ora2
 lti-consumer-xblock==2.3  # via -r requirements/edx/base.in
 lxml==4.5.0               # via -c requirements/edx/../constraints.txt, -r requirements/edx/../edx-sandbox/shared.txt, capa, edxval, lti-consumer-xblock, ora2, safe-lxml, xblock, xmlsec
diff --git a/requirements/edx/development.txt b/requirements/edx/development.txt
index 3307f3dd24ff..8eb687e498d1 100644
--- a/requirements/edx/development.txt
+++ b/requirements/edx/development.txt
@@ -170,7 +170,7 @@ kombu==4.6.11             # via -r requirements/edx/testing.txt, celery
 laboratory==1.0.2         # via -r requirements/edx/testing.txt
 lazy-object-proxy==1.4.3  # via -r requirements/edx/testing.txt, astroid
 lazy==1.4                 # via -r requirements/edx/testing.txt, acid-xblock, bok-choy, lti-consumer-xblock, ora2
-libsass==0.10.0           # via -r requirements/edx/testing.txt, ora2
+libsass==0.20.1           # via -r requirements/edx/testing.txt, ora2
 loremipsum==1.0.5         # via -r requirements/edx/testing.txt, ora2
 lti-consumer-xblock==2.3  # via -r requirements/edx/testing.txt
 lxml==4.5.0               # via -c requirements/edx/../constraints.txt, -r requirements/edx/testing.txt, capa, edxval, lti-consumer-xblock, ora2, pyquery, safe-lxml, xblock, xmlsec
diff --git a/requirements/edx/paver.in b/requirements/edx/paver.in
index c5e80916e9fd..f40e82619795 100644
--- a/requirements/edx/paver.in
+++ b/requirements/edx/paver.in
@@ -12,7 +12,7 @@
 
 edx-opaque-keys                     # Create and introspect course and xblock identities
 lazy                                # Lazily-evaluated attributes for Python objects
-libsass==0.10.0                     # Python bindings for the LibSass CSS compiler
+libsass                            # Python bindings for the LibSass CSS compiler
 markupsafe                          # XML/HTML/XHTML Markup safe strings
 mock                                # Stub out code with mock objects and make assertions about how they have been used
 path                                # Easier manipulation of filesystem paths
diff --git a/requirements/edx/paver.txt b/requirements/edx/paver.txt
index 7e35d16ab865..11a3f34df4f2 100644
--- a/requirements/edx/paver.txt
+++ b/requirements/edx/paver.txt
@@ -10,7 +10,7 @@ edx-opaque-keys==2.1.1    # via -r requirements/edx/paver.in
 idna==2.10                # via requests
 importlib-metadata==1.7.0  # via -c requirements/edx/../constraints.txt, path
 lazy==1.4                 # via -r requirements/edx/paver.in
-libsass==0.10.0           # via -r requirements/edx/paver.in
+libsass==0.20.1           # via -r requirements/edx/paver.in
 markupsafe==1.1.1         # via -r requirements/edx/paver.in
 mock==3.0.5               # via -c requirements/edx/../constraints.txt, -r requirements/edx/paver.in
 more-itertools==8.5.0     # via zipp
diff --git a/requirements/edx/testing.txt b/requirements/edx/testing.txt
index 6720592ef619..beb871474596 100644
--- a/requirements/edx/testing.txt
+++ b/requirements/edx/testing.txt
@@ -164,7 +164,7 @@ kombu==4.6.11             # via -r requirements/edx/base.txt, celery
 laboratory==1.0.2         # via -r requirements/edx/base.txt
 lazy-object-proxy==1.4.3  # via astroid
 lazy==1.4                 # via -r requirements/edx/base.txt, acid-xblock, bok-choy, lti-consumer-xblock, ora2
-libsass==0.10.0           # via -r requirements/edx/base.txt, ora2
+libsass==0.20.1           # via -r requirements/edx/base.txt, ora2
 loremipsum==1.0.5         # via -r requirements/edx/base.txt, ora2
 lti-consumer-xblock==2.3  # via -r requirements/edx/base.txt
 lxml==4.5.0               # via -c requirements/edx/../constraints.txt, -r requirements/edx/base.txt, capa, edxval, lti-consumer-xblock, ora2, pyquery, safe-lxml, xblock, xmlsec
diff --git a/scripts/scss_modernizer.py b/scripts/scss_modernizer.py
new file mode 100644
index 000000000000..320433f6e46d
--- /dev/null
+++ b/scripts/scss_modernizer.py
@@ -0,0 +1,66 @@
+import os
+import copy
+import re
+import sys
+from pathlib import Path
+
+FIRST_PATTERN = r"^(.*@extend) %(.*);\n?"
+SECOND_PATTERN = r"^(.*@extend) \.(.*);\n?"
+
+FIRST_SUBSTITUTE = r"\1 %\2 !optional;\n"
+SECOND_SUBSTITUTE = r"\1 .\2 !optional;\n"
+
+PATTERNS = {FIRST_PATTERN: FIRST_SUBSTITUTE, SECOND_PATTERN: SECOND_SUBSTITUTE}
+
+
+def get_match(string):
+    for pattern, substitute in PATTERNS.items():
+        match = re.match(pattern, string)
+        if match is None:
+            continue
+        return match, pattern, substitute
+    return None, None, None
+
+
+def process_file(file_path):
+    with open(file_path, 'r') as file:
+        file_content = file.readlines()
+        print("processing {0}".format(file_path))
+        data_clone = copy.deepcopy(file_content)
+        for index, line in enumerate(file_content):
+            match, pattern, substitute = get_match(line)
+            if match is None or "!optional" in line:
+                continue
+            updated_line = re.sub(pattern, substitute, line)
+            data_clone[index] = updated_line
+    return data_clone
+
+
+def update_file(path, updated_data):
+    with open(path, 'w') as file:
+        file.writelines(updated_data)
+
+
+def process_files(directory):
+    for path in Path(directory).rglob('*.scss'):
+        updated_data = process_file(str(path))
+        update_file(str(path), updated_data)
+
+
+if __name__ == '__main__':
+
+    # file_to_process = sys.argv[1]
+    # updated_data_a = process_file(file_to_process)
+    # update_file(file_to_process, updated_data_a)
+
+    print("processing LMS...")
+    process_files("lms")
+
+    print("processing themes...")
+    process_files("themes")
+
+    print("processing CMS...")
+    process_files("cms")
+
+    print("processing common...")
+    process_files("common")