diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 61a04afedc..a72344a129 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -27,22 +27,26 @@ html {
 
 body {
   @extend %t-copy-base;
+
   min-width: $fg-min-width;
   background: $uxpl-grayscale-x-back;
   color: $gray-d3;
 }
 
-body, input, button {
+body,
+input,
+button {
   font-family: 'Open Sans', sans-serif;
 }
 
 // removing the outline on any element that we make programmatically focusable
 [tabindex="-1"] {
-    outline: none;
+  outline: none;
 }
 
 a {
   @include transition(color $tmg-f2 ease-in-out 0s);
+
   text-decoration: none;
   color: $uxpl-blue-base;
 
@@ -67,6 +71,7 @@ h1 {
 .wrapper {
   @include clearfix();
   @include box-sizing(border-box);
+
   width: 100%;
 }
 
@@ -75,12 +80,15 @@ h1 {
 .page-header {
   @extend %t-title3;
   @extend %t-strong;
+
   display: block;
   color: $gray-d3;
 
-  .navigation, .subtitle {
+  .navigation,
+  .subtitle {
     @extend %t-title7;
     @extend %t-regular;
+
     position: relative;
     top: ($baseline/4);
     display: block;
@@ -118,7 +126,6 @@ h1 {
 // +Typography - Primary Content
 // ====================
 .content-primary {
-
   .section-header {
     color: $gray-d3;
 
@@ -155,7 +162,6 @@ h1 {
 // +Typography - Secondary Content
 // ====================
 .content-secondary {
-
   .section-header {
     color: $gray-d3;
 
@@ -183,34 +189,44 @@ h1 {
 
 // +Typography - Loose Headings  (BT: needs to be removed once html is clean)
 // ====================
-.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
+.title-1,
+.title-2,
+.title-3,
+.title-4,
+.title-5,
+.title-6 {
   @extend %t-strong;
 }
 
 .title-1 {
   @extend %t-title3;
+
   margin-bottom: ($baseline*1.5);
 }
 
 .title-2 {
   @extend %t-title4;
+
   margin-bottom: $baseline;
 }
 
 .title-3 {
   @extend %t-title5;
+
   margin-bottom: ($baseline/2);
 }
 
 .title-4 {
   @extend %t-title7;
   @extend %t-regular;
+
   margin-bottom: $baseline;
 }
 
 .title-5 {
   @extend %t-title7;
   @extend %t-regular;
+
   color: $gray-l1;
   margin-bottom: $baseline;
 }
@@ -218,11 +234,15 @@ h1 {
 .title-6 {
   @extend %t-title7;
   @extend %t-regular;
+
   color: $gray-l2;
   margin-bottom: $baseline;
 }
 
-p, ul, ol, dl {
+p,
+ul,
+ol,
+dl {
   margin-bottom: ($baseline/2);
 
   &:last-child {
@@ -230,12 +250,6 @@ p, ul, ol, dl {
   }
 }
 
-// +Layout - Basic
-// ====================
-.wrapper-view {
-
-}
-
 // +Layout - Basic Page Header
 // ====================
 .wrapper-mast {
@@ -245,6 +259,7 @@ p, ul, ol, dl {
 
   .mast, .metadata {
     @include clearfix();
+
     position: relative;
     max-width: $fg-max-width;
     min-width: $fg-min-width;
@@ -269,19 +284,22 @@ p, ul, ol, dl {
       .page-header {
         @include float(left);
         @include margin-right(flex-gutter());
-        width: flex-grid(6,12);
+
+        width: flex-grid(6, 12);
       }
 
       .nav-actions {
         @include float(left);
         @include text-align(right);
+
         position: relative;
         bottom: -($baseline*0.75);
-        width: flex-grid(6,12);
+        width: flex-grid(6, 12);
 
         .nav-item {
           display: inline-block;
           vertical-align: top;
+
           @include margin-right($baseline/2);
 
           &:last-child {
@@ -298,7 +316,6 @@ p, ul, ol, dl {
 
     // layout with actions
     &.has-subtitle {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
@@ -306,29 +323,30 @@ p, ul, ol, dl {
 
     // layout with navigation
     &.has-navigation {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
 
       .navigation-link {
         @extend %cont-truncated;
+
         display: inline-block;
         vertical-align: bottom; // correct for extra padding in FF
         max-width: 250px;
 
         &.navigation-current {
           @extend %ui-disabled;
+
           color: $gray;
           max-width: 250px;
 
-          &:before {
+          &::before {
             color: $gray;
           }
         }
       }
 
-      .navigation-link:before {
+      .navigation-link::before {
         content: " / ";
         margin: ($baseline/4);
         color: $gray;
@@ -338,7 +356,7 @@ p, ul, ol, dl {
         }
       }
 
-      .navigation .navigation-link:first-child:before {
+      .navigation .navigation-link:first-child::before {
         content: "";
         margin: 0;
       }
@@ -347,17 +365,18 @@ p, ul, ol, dl {
 
   // CASE: wizard-based mast
   .mast-wizard {
-
     .page-header-sub {
       @extend %t-title4;
+
       color: $gray;
       font-weight: 300;
     }
 
     .page-header-super {
       @extend %t-title4;
+
       float: left;
-      width: flex-grid(12,12);
+      width: flex-grid(12, 12);
       margin-top: ($baseline/2);
       border-top: 1px solid $gray-l4;
       padding-top: ($baseline/2);
@@ -381,7 +400,9 @@ p, ul, ol, dl {
 
 .content {
   @include clearfix();
+
   @extend %t-copy-base;
+
   max-width: $fg-max-width;
   min-width: $fg-min-width;
   width: flex-grid(12);
@@ -396,6 +417,7 @@ p, ul, ol, dl {
 
     .title-sub {
       @extend %t-copy-sub1;
+
       display: block;
       margin: 0;
       color: $gray-l2;
@@ -403,6 +425,7 @@ p, ul, ol, dl {
 
     .title-1 {
       @extend %t-title3;
+
       margin: 0;
       padding: 0;
       font-weight: 600;
@@ -418,18 +441,19 @@ p, ul, ol, dl {
 // +Layout - Primary Content
 // ====================
 .content-primary {
-
   .title-1 {
     @extend %t-title3;
   }
 
   .title-2 {
     @extend %t-title4;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
   .title-3 {
     @extend %t-title6;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
@@ -444,8 +468,10 @@ p, ul, ol, dl {
 
     .tip {
       @extend %t-copy-sub2;
+
       @include text-align(right);
       @include float(right);
+
       width: flex-grid(7, 12);
       margin-top: ($baseline/2);
       color: $gray-d1;
@@ -456,7 +482,6 @@ p, ul, ol, dl {
 // +Layout - Supplemental Content
 // ====================
 .content-supplementary {
-
   > section {
     margin: 0 0 $baseline 0;
   }
@@ -471,6 +496,7 @@ p, ul, ol, dl {
 
 .inner-wrapper {
   @include clearfix();
+
   position: relative;
   max-width: 1280px;
   margin: auto;
@@ -482,12 +508,15 @@ p, ul, ol, dl {
 
 .main-column {
   clear: both;
+
   @include float(left);
+
   width: 70%;
 }
 
 .sidebar {
   @include float(right);
+
   width: 28%;
 }
 
@@ -505,7 +534,9 @@ p, ul, ol, dl {
 .new-subsection-item,
 .new-policy-item {
   @include grey-button();
+
   @extend %t-action5;
+
   margin: ($baseline/2);
   padding: 3px ($baseline/2) 4px ($baseline/2);
 
@@ -520,6 +551,7 @@ p, ul, ol, dl {
 .item-actions {
   position: absolute;
   top: 5px;
+
   @include right(5px);
 
   .edit-button,
@@ -538,25 +570,27 @@ hr.divide {
 }
 
 .item-details {
-    float: left;
-    padding: ($baseline/2) 0;
+  float: left;
+  padding: ($baseline/2) 0;
 }
 
 .details {
-    @extend %t-copy-sub1;
-    display: none;
-    margin-bottom: ($baseline*1.5);
+  @extend %t-copy-sub1;
+
+  display: none;
+  margin-bottom: ($baseline*1.5);
 }
 
 .window {
-
   .window-contents {
     padding: 20px;
   }
 
   .header {
-    @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+    @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
+
     @extend %t-title7;
+
     padding: 6px 14px;
     border-bottom: 1px solid $mediumGrey;
     border-radius: 2px 2px 0 0;
@@ -568,6 +602,7 @@ hr.divide {
   label {
     display: block;
     margin-bottom: 6px;
+
     @extend %t-strong;
 
     &.inline-label {
@@ -577,6 +612,7 @@ hr.divide {
     .description {
       @extend %t-copy-sub2;
       @extend %t-regular;
+
       display: block;
       font-style: italic;
       color: #999;
@@ -617,9 +653,10 @@ hr.divider {
 .nav-skip,
 .transcript-skip {
   @extend %t-action3;
+
   display: inline-block;
   position: absolute;
-  left: 0px;
+  left: 0;
   top: -($baseline*30);
   overflow: hidden;
   background: $white;
@@ -640,6 +677,7 @@ hr.divider {
 .content-modal {
   @include border-bottom-radius(2px);
   @include box-sizing(border-box);
+
   position: relative;
   display: none;
   width: 700px;
@@ -652,6 +690,7 @@ hr.divider {
   .action-modal-close {
     @include transition(top $tmg-f3 ease-in-out 0s);
     @include border-bottom-radius(3px);
+
     position: absolute;
     top: -3px;
     right: $baseline;
@@ -665,6 +704,7 @@ hr.divider {
 
     .icon {
       @extend %t-action1;
+
       color: $white;
     }
 
@@ -677,6 +717,7 @@ hr.divider {
 
   img {
     @include box-sizing(border-box);
+
     width: 100%;
     overflow-y: scroll;
     padding: ($baseline/10);
@@ -686,12 +727,14 @@ hr.divider {
   .title {
     @extend %t-title5;
     @extend %t-strong;
+
     margin: 0 0 ($baseline/2) 0;
     color: $gray-d3;
   }
 
   .description {
     @extend %t-copy-sub2;
+
     margin-top: ($baseline/2);
     color: $gray-l1;
   }
diff --git a/cms/static/sass/_build-v1.scss b/cms/static/sass/_build-v1.scss
index e2efd973e5..f05d8d3338 100644
--- a/cms/static/sass/_build-v1.scss
+++ b/cms/static/sass/_build-v1.scss
@@ -60,7 +60,6 @@
 @import 'views/outline';
 @import 'views/settings';
 @import 'views/static-pages';
-@import 'views/unit';
 @import 'views/container';
 @import 'views/users';
 @import 'views/textbooks';
@@ -80,7 +79,6 @@
 @import 'xmodule/descriptors/css/module-styles.scss';
 @import 'xmodule/headings';
 @import 'elements/xmodules'; // styling for Studio-specific contexts
-
 @import 'developer'; // used for any developer-created scss that needs further polish/refactoring
 @import 'shame';     // used for any bad-form/orphaned scss
 
@@ -90,6 +88,5 @@
 
 // CAPA Problem Feedback
 @import 'edx-pattern-library-shims/buttons';
-
 @import 'edx-pattern-library-shims/base/variables';
 
diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss
index c2655017ec..5f4aeed37a 100644
--- a/cms/static/sass/_reset.scss
+++ b/cms/static/sass/_reset.scss
@@ -8,68 +8,150 @@
 
 // better text rendering/kerning through SVG
 * {
-	text-rendering: optimizeLegibility;
+  text-rendering: optimizeLegibility;
 }
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure,
-footer, header, menu, nav, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	outline: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
 }
 
-html,body {
+html,
+body {
   height: 100%;
 }
 
-article, aside, details, figcaption, figure,
-footer, header, menu, nav, section {
-	display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section {
+  display: block;
 }
+
 body {
-	line-height: 1;
+  line-height: 1;
 }
-ol, ul {
-	list-style: none;
+
+ol,
+ul {
+  list-style: none;
 }
-blockquote, q {
-	quotes: none;
+
+blockquote,
+q {
+  quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: '';
+  content: none;
 }
 
 ins {
-	text-decoration: none;
+  text-decoration: none;
 }
 
 del {
-	text-decoration: line-through;
+  text-decoration: line-through;
 }
 
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 abbr[title] {
-	border-bottom: none;
-	text-decoration: none;
-	cursor: help;
+  border-bottom: none;
+  text-decoration: none;
+  cursor: help;
 }
diff --git a/cms/static/sass/_shame.scss b/cms/static/sass/_shame.scss
index 815ddd6fd2..0b7a7f67fd 100644
--- a/cms/static/sass/_shame.scss
+++ b/cms/static/sass/_shame.scss
@@ -8,7 +8,6 @@
 
   // elements - authorship controls
   .wrapper-authorshiprights {
-
     .ui-toggle-control {
       // needed to override general a element transition properties - need to fix.
       transition-duration: $tmg-f2;
@@ -26,7 +25,8 @@
 // ====================
 
 // overriding outline styling for general drag and drop cases
-.outline-section, .outline-subsection {
+.outline-section,
+.outline-subsection {
 
   // STATE: is dragging
   &.is-dragging {
@@ -51,8 +51,7 @@ body b {
 
 // needed display property reinforcement since manual CSS abstraction happened
 #page-prompt {
-
-  .wrapper-prompt:before {
+  .wrapper-prompt::before {
     display: inline-block;
   }
 }
@@ -94,8 +93,8 @@ body b {
 }
 
 //  hides latex compiler button if settings mode is-active
-div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{
- display: none;
+div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
+  display: none;
 }
 
 // ====================
@@ -109,7 +108,6 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{
 
 // JQuery UI tabs font-weight override
 .ui-tabs-nav {
-
   .ui-state-default {
     font-weight: normal;
   }
diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss
index 6223ab95f9..25194ffad0 100644
--- a/cms/static/sass/assets/_anims.scss
+++ b/cms/static/sass/assets/_anims.scss
@@ -20,7 +20,7 @@
 // fade in keyframes
 @include keyframes(fadeIn) {
   0% {
-    opacity: 0.0;
+    opacity: 0;
   }
 
   50% {
@@ -28,7 +28,7 @@
   }
 
   100% {
-    opacity: 1.0;
+    opacity: 1;
   }
 }
 
@@ -42,7 +42,7 @@
 // fade out keyframes
 @include keyframes(fadeOut) {
   0% {
-    opacity: 1.0;
+    opacity: 1;
   }
 
   50% {
@@ -50,7 +50,7 @@
   }
 
   100% {
-    opacity: 0.0;
+    opacity: 0;
   }
 }
 
@@ -188,12 +188,14 @@
 // bounce in keyframes
 @include keyframes(bounceIn) {
   0% {
-    opacity: 0.0;
+    opacity: 0;
+
     @include transform(scale(0.3));
   }
 
   50% {
-    opacity: 1.0;
+    opacity: 1;
+
     @include transform(scale(1.05));
   }
 
@@ -216,12 +218,14 @@
   }
 
   50% {
-    opacity: 1.0;
+    opacity: 1;
+
     @include transform(scale(1.05));
   }
 
   100% {
-    opacity: 0.0;
+    opacity: 0;
+
     @include transform(scale(0.3));
   }
 }
@@ -235,12 +239,13 @@
 // ====================
 // flash keyframes
 @include keyframes(flash) {
-  0%, 100% {
-    opacity: 1.0;
+  0%,
+  100% {
+    opacity: 1;
   }
 
   50% {
-    opacity: 0.0;
+    opacity: 0;
   }
 }
 
@@ -253,13 +258,16 @@
 // ====================
 // flash double keyframes
 @include keyframes(flashDouble) {
-  0%, 50%, 100% {
-    opacity: 1.0;
+  0%,
+  50%,
+  100% {
+    opacity: 1;
   }
 
-  25%, 75% {
-      opacity: 0.0;
-    }
+  25%,
+  75% {
+    opacity: 0;
+  }
 }
 
 // flash double animation
@@ -272,15 +280,15 @@
 // pulse keyframes
 @include keyframes(pulse) {
   0% {
-    opacity: 0.0;
+    opacity: 0;
   }
 
   50% {
-    opacity: 1.0;
+    opacity: 1;
   }
 
   100% {
-    opacity: 0.0;
+    opacity: 0;
   }
 }
 
@@ -294,7 +302,7 @@
 // was dropped keyframes
 @include keyframes(was-dropped) {
   0% {
-    opacity: 1.0;
+    opacity: 1;
   }
 
   50% {
@@ -302,7 +310,7 @@
   }
 
   100% {
-    opacity: 1.0;
+    opacity: 1;
   }
 }
 
diff --git a/cms/static/sass/assets/_fonts.scss b/cms/static/sass/assets/_fonts.scss
index 6629975486..d20be5d67e 100644
--- a/cms/static/sass/assets/_fonts.scss
+++ b/cms/static/sass/assets/_fonts.scss
@@ -1,81 +1,81 @@
 // studio - assets - fonts
 // ====================
 @font-face {
-    font-family: 'Open Sans';
-    src:
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
-    font-weight: 300;
-    font-style: normal;
+  font-family: 'Open Sans';
+  src:
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff2') format('woff2'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Open Sans';
-    src:
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
-    font-weight: 300;
-    font-style: italic;
+  font-family: 'Open Sans';
+  src:
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff2') format('woff2'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Open Sans';
-    src:
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
-    font-weight: 400;
-    font-style: normal;
+  font-family: 'Open Sans';
+  src:
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Open Sans';
-    src:
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
-    font-weight: 400;
-    font-style: italic;
+  font-family: 'Open Sans';
+  src:
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff2') format('woff2'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.woff') format('woff'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Italic-webfont.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Open Sans';
-    src:
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
-    font-weight: 600;
-    font-style: normal;
+  font-family: 'Open Sans';
+  src:
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff2') format('woff2'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.woff') format('woff'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Semibold-webfont.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Open Sans';
-    src:
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
-    font-weight: 600;
-    font-style: italic;
+  font-family: 'Open Sans';
+  src:
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype');
+  font-weight: 600;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Open Sans';
-    src:
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
-    font-weight: 700;
-    font-style: normal;
+  font-family: 'Open Sans';
+  src:
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff2') format('woff2'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Open Sans';
-    src:
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
-        url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
-    font-weight: 700;
-    font-style: italic;
+  font-family: 'Open Sans';
+  src:
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff') format('woff'),
+    url('#{$static-path}/edx-pattern-library/fonts/OpenSans/OpenSans-BoldItalic-webfont.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
 }
diff --git a/cms/static/sass/assets/_graphics.scss b/cms/static/sass/assets/_graphics.scss
index e8a3f8c8a5..18d59c313f 100644
--- a/cms/static/sass/assets/_graphics.scss
+++ b/cms/static/sass/assets/_graphics.scss
@@ -2,46 +2,46 @@
 // ====================
 
 .drag-handle {
-	display: inline-block;
-	float: right;
-	width: 7px;
-	height: 22px;
-	margin-left: ($baseline/2);
-	background: url('#{$static-path}/images/drag-handles.png') no-repeat;
-	cursor: move;
+  display: inline-block;
+  float: right;
+  width: 7px;
+  height: 22px;
+  margin-left: ($baseline/2);
+  background: url('#{$static-path}/images/drag-handles.png') no-repeat;
+  cursor: move;
 }
 
 .large-advanced-icon {
-	display: inline-block;
-	width: ($baseline*3);
-	height: ($baseline*3);
-	background: url('#{$static-path}/images/large-advanced-icon.png') center no-repeat;
+  display: inline-block;
+  width: ($baseline*3);
+  height: ($baseline*3);
+  background: url('#{$static-path}/images/large-advanced-icon.png') center no-repeat;
 }
 
 .large-discussion-icon {
-	display: inline-block;
-	width: ($baseline*3);
-	height: ($baseline*3);
-	background: url('#{$static-path}/images/large-discussion-icon.png') center no-repeat;
+  display: inline-block;
+  width: ($baseline*3);
+  height: ($baseline*3);
+  background: url('#{$static-path}/images/large-discussion-icon.png') center no-repeat;
 }
 
 .large-html-icon {
-	display: inline-block;
-	width: ($baseline*3);
-	height: ($baseline*3);
-	background: url('#{$static-path}/images/large-html-icon.png') center no-repeat;
+  display: inline-block;
+  width: ($baseline*3);
+  height: ($baseline*3);
+  background: url('#{$static-path}/images/large-html-icon.png') center no-repeat;
 }
 
 .large-problem-icon {
-	display: inline-block;
-	width: ($baseline*3);
-	height: ($baseline*3);
-	background: url('#{$static-path}/images/large-problem-icon.png') center no-repeat;
+  display: inline-block;
+  width: ($baseline*3);
+  height: ($baseline*3);
+  background: url('#{$static-path}/images/large-problem-icon.png') center no-repeat;
 }
 
 .large-video-icon {
-	display: inline-block;
-	width: ($baseline*3);
-	height: ($baseline*3);
-	background: url('#{$static-path}/images/large-video-icon.png') center no-repeat;
+  display: inline-block;
+  width: ($baseline*3);
+  height: ($baseline*3);
+  background: url('#{$static-path}/images/large-video-icon.png') center no-repeat;
 }
diff --git a/cms/static/sass/bootstrap/_components.scss b/cms/static/sass/bootstrap/_components.scss
index 5a80e4c80a..14e816f5bc 100644
--- a/cms/static/sass/bootstrap/_components.scss
+++ b/cms/static/sass/bootstrap/_components.scss
@@ -45,6 +45,7 @@
 // Sock
 .wrapper-sock {
   @include clearfix();
+
   position: relative;
   margin: ($baseline*2) 0 0 0;
   border-top: 1px solid $gray-500;
@@ -60,6 +61,7 @@
   // sock - actions
   .list-cta {
     @extend %ui-depth1;
+
     position: absolute;
     top: -($baseline*0.75);
     width: 100%;
@@ -70,6 +72,7 @@
     .cta-show-sock {
       @extend %ui-btn-pill;
       @extend %t-action4;
+
       background: theme-color("light");
       padding: ($baseline/2) $baseline;
       color: theme-color("dark");
@@ -88,7 +91,9 @@
   // sock - additional help
   .sock {
     @include clearfix();
+
     @extend %t-copy-sub2;
+
     max-width: $studio-max-width;
     width: flex-grid(12);
     margin: 0 auto;
@@ -97,11 +102,9 @@
 
     // support body
     header {
-
       .title {
         @extend %t-title4;
       }
-
     }
 
     .list-actions {
@@ -109,15 +112,18 @@
     }
 
     // shared elements
-    .support, .feedback {
+    .support,
+    .feedback {
       .title {
         @extend %t-title6;
+
         color: $white;
         margin-bottom: ($baseline/2);
       }
 
       .copy {
         @extend %t-copy-sub2;
+
         margin: 0 0 $baseline 0;
       }
 
@@ -135,17 +141,15 @@
 
           .action {
             @extend %t-action4;
+
             display: block;
 
             .icon {
               @extend %t-icon4;
+
               vertical-align: middle;
               margin-right: $baseline/4;
             }
-
-            &:hover, &:active {
-
-            }
           }
 
           .tip {
@@ -162,22 +166,22 @@
 
     // studio support content
     .support {
-      width: flex-grid(8,12);
+      width: flex-grid(8, 12);
       float: left;
       margin-right: flex-gutter();
 
       .action-item {
-        width: flexgrid(4,8);
+        width: flexgrid(4, 8);
       }
     }
 
     // studio feedback content
     .feedback {
-      width: flex-grid(4,12);
+      width: flex-grid(4, 12);
       float: left;
 
       .action-item {
-        width: flexgrid(4,4);
+        width: flexgrid(4, 4);
       }
     }
   }
diff --git a/cms/static/sass/bootstrap/_footer.scss b/cms/static/sass/bootstrap/_footer.scss
index d7da5bf8e0..985a741f0d 100644
--- a/cms/static/sass/bootstrap/_footer.scss
+++ b/cms/static/sass/bootstrap/_footer.scss
@@ -14,7 +14,9 @@
 
   footer.primary {
     @extend %t-copy-sub2;
+
     @include clearfix();
+
     max-width: $studio-max-width;
     width: flex-grid(12);
     margin: 0 auto;
@@ -59,10 +61,12 @@
 
     .footer-content-secondary {
       @include clearfix();
+
       margin-top: $baseline;
     }
 
-    .footer-about-copyright, .footer-about-openedx {
+    .footer-about-copyright,
+    .footer-about-openedx {
       display: inline-block;
       vertical-align: middle;
     }
diff --git a/cms/static/sass/bootstrap/_header.scss b/cms/static/sass/bootstrap/_header.scss
index 1d140e8ff0..b90a7ee5ed 100644
--- a/cms/static/sass/bootstrap/_header.scss
+++ b/cms/static/sass/bootstrap/_header.scss
@@ -11,6 +11,7 @@
 
 .wrapper-header {
   @extend %ui-depth3;
+
   position: relative;
   width: 100%;
   box-shadow: 0 1px 2px 0 $shadow-l1;
@@ -20,6 +21,7 @@
 
   header.primary {
     @include clearfix();
+
     max-width: $studio-max-width;
     width: flex-grid(12);
     margin: 0 auto;
@@ -28,22 +30,27 @@
   // ====================
 
   // basic layout
-  .wrapper-l, .wrapper-r {
+  .wrapper-l,
+  .wrapper-r {
     background: $white;
   }
 
   .wrapper-l {
     float: left;
-    width: flex-grid(7,12);
+    width: flex-grid(7, 12);
   }
 
   .wrapper-r {
     float: right;
-    width: flex-grid(4,12);
+    width: flex-grid(4, 12);
     text-align: right;
   }
 
-  .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
+  .branding,
+  .info-course,
+  .nav-course,
+  .nav-account,
+  .nav-pitch {
     display: inline-block;
     vertical-align: middle;
     margin-bottom: 0;
@@ -66,10 +73,10 @@
 
   // basic layout - nav items
   nav {
-
     > ol > .nav-item {
       @extend %t-action3;
       @extend %t-strong;
+
       display: inline-block;
       vertical-align: middle;
 
@@ -89,7 +96,6 @@
 
   // basic layout - dropdowns
   .nav-dd {
-
     .title {
       padding: $baseline/2 $baseline/2;
       font-size: $font-size-lg;
@@ -99,14 +105,12 @@
       }
 
       &:hover {
-
         .fa-caret-down {
-          opacity: 1.0;
+          opacity: 1;
         }
       }
 
       .nav-sub .nav-item {
-
         .icon {
           display: inline-block;
           vertical-align: middle;
@@ -140,7 +144,8 @@
     border-right: 1px solid $gray-300;
     padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
 
-    .course-org, .course-number {
+    .course-org,
+    .course-number {
       font-size: $font-size-sm;
       line-height: 12px;
       display: inline-block;
@@ -149,7 +154,7 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      opacity: 1.0;
+      opacity: 1;
       color: theme-color("primary");
     }
 
@@ -160,6 +165,7 @@
     .course-title {
       @extend %t-action2;
       @extend %t-strong;
+
       display: block;
       width: 100%;
       overflow: hidden;
@@ -197,14 +203,12 @@
     }
 
     .nav-account-help {
-
       .wrapper-nav-sub {
         width: ($baseline*10);
       }
     }
 
     .nav-account-user {
-
       .title {
         max-width: ($baseline*6.5);
 
@@ -220,6 +224,7 @@
 
     .settings-language-form {
       margin-top: 4px;
+
       .language-selector {
         width: 130px;
       }
@@ -243,13 +248,12 @@
 
 // CASE: user signed in
 .is-signedin {
-
   .wrapper-l {
-    width: flex-grid(8,12);
+    width: flex-grid(8, 12);
   }
 
   .wrapper-r {
-    width: flex-grid(4,12);
+    width: flex-grid(4, 12);
   }
 
   .branding {
@@ -265,15 +269,13 @@
 
 // CASE: in course {
 .is-signedin.course {
-
   .wrapper-header {
-
     .wrapper-l {
-      width: flex-grid(9,12);
+      width: flex-grid(9, 12);
     }
 
     .wrapper-r {
-      width: flex-grid(3,12);
+      width: flex-grid(3, 12);
     }
 
     .branding {
@@ -296,15 +298,13 @@
 // CASE: user not signed in
 .not-signedin,
 .view-util {
-
   .wrapper-header {
-
     .wrapper-l {
-      width: flex-grid(2,12);
+      width: flex-grid(2, 12);
     }
 
     .wrapper-r {
-      width: flex-grid(10,12);
+      width: flex-grid(10, 12);
     }
 
     .branding {
@@ -337,10 +337,9 @@
 
 // dropdown
 .nav-dd {
-
   .title {
-
-    .label, .fa-caret-down {
+    .label,
+    .fa-caret-down {
       display: inline-block;
       vertical-align: middle;
     }
@@ -353,7 +352,6 @@
 
     // dropped down state
     &.is-selected {
-
       .ui-toggle-dd {
         transform: rotate(-180deg);
         transform-origin: 50% 50%;
@@ -364,10 +362,6 @@
   .nav-item {
     position: relative;
 
-    &:hover {
-
-    }
-
     &.nav-course-settings {
       .wrapper-nav-sub {
         width: ($baseline*9);
@@ -378,7 +372,7 @@
   .wrapper-nav-sub {
     position: absolute;
     top: ($baseline*2.5);
-    opacity: 0.0;
+    opacity: 0;
     pointer-events: none;
     width: ($baseline*8);
     overflow: hidden;
@@ -387,7 +381,7 @@
 
     // dropped down state
     &.is-shown {
-      opacity: 1.0;
+      opacity: 1;
       pointer-events: auto;
       overflow: visible;
       height: auto;
@@ -403,7 +397,8 @@
     padding: ($baseline/2) ($baseline*0.75);
     background: $white;
 
-    &:after, &:before {
+    &::after,
+    &::before {
       bottom: 100%;
       border: solid transparent;
       content: " ";
@@ -414,13 +409,13 @@
     }
 
     // ui triangle/nub
-    &:after {
+    &::after {
       border-color: rgba(255, 255, 255, 0);
       border-bottom-color: $white;
       border-width: 10px;
     }
 
-    &:before {
+    &::before {
       border-color: rgba(178, 178, 178, 0);
       border-bottom-color: $gray-500;
       border-width: 11px;
@@ -429,6 +424,7 @@
     .nav-item {
       @extend %t-action3;
       @extend %t-regular;
+
       display: block;
       margin: 0 0 ($baseline/4) 0;
       border-bottom: 1px solid $gray-300;
@@ -450,7 +446,8 @@
         font-size: $font-size-lg;
         font-weight: 600;
 
-        &:hover, &:active {
+        &:hover,
+        &:active {
           color: theme-color("primary");
         }
       }
@@ -459,7 +456,6 @@
 
   // CASE: left-hand side arrow/dd
   &.ui-left {
-
     .wrapper-nav-sub {
       left: 0;
     }
@@ -468,12 +464,12 @@
       text-align: left;
 
       // ui triangle/nub
-      &:after {
+      &::after {
         left: $baseline;
         margin-left: -10px;
       }
 
-      &:before {
+      &::before {
         left: $baseline;
         margin-left: -11px;
       }
@@ -482,7 +478,6 @@
 
   // CASE: right-hand side arrow/dd
   &.ui-right {
-
     > ol {
       margin-bottom: 0;
     }
@@ -495,12 +490,12 @@
     .nav-sub {
 
       // ui triangle/nub
-      &:after {
+      &::after {
         right: $baseline;
         margin-right: -10px;
       }
 
-      &:before {
+      &::before {
         right: $baseline;
         margin-right: -11px;
       }
diff --git a/cms/static/sass/bootstrap/_layouts.scss b/cms/static/sass/bootstrap/_layouts.scss
index 23dde7f9bf..7bee47228b 100644
--- a/cms/static/sass/bootstrap/_layouts.scss
+++ b/cms/static/sass/bootstrap/_layouts.scss
@@ -13,7 +13,8 @@
     padding-bottom: 0;
 
     .nav-item {
-      &.active, &:hover{
+      &.active,
+      &:hover {
         .nav-link {
           border-bottom-color: theme-color("primary");
           color: theme-color("primary");
@@ -57,14 +58,6 @@
 // studio - elements - layouts
 // ====================
 
-// layout - basic
-// the wrapper around the viewable page area, excluding modal and other extra-view content
-.wrapper-view {
-
-}
-
-// ====================
-
 // layout - basic page header
 .wrapper-mast {
   margin: ($baseline*1.5) 0 0 0;
@@ -74,6 +67,7 @@
   .mast,
   .metadata {
     @include clearfix();
+
     position: relative;
     max-width: $studio-max-width;
     width: flex-grid(12);
@@ -102,7 +96,7 @@
 
       .page-header {
         float: left;
-        width: flex-grid(6,12);
+        width: flex-grid(6, 12);
         margin-right: flex-gutter();
       }
 
@@ -110,7 +104,7 @@
         position: relative;
         bottom: -($baseline*0.75);
         float: right;
-        width: flex-grid(6,12);
+        width: flex-grid(6, 12);
         text-align: right;
 
         .nav-item {
@@ -150,7 +144,6 @@
 
     // layout with actions
     &.has-subtitle {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
@@ -158,13 +151,13 @@
 
     // layout with breadcrumb navigation
     &.has-navigation {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
 
       .navigation-item {
         @extend %cont-truncated;
+
         display: inline-block;
         vertical-align: bottom; // correct for extra padding in FF
         max-width: 250px;
@@ -172,10 +165,11 @@
 
         &.navigation-current {
           @extend %ui-disabled;
+
           color: color("gray");
           max-width: 250px;
 
-          &:before {
+          &::before {
             color: color("gray");
           }
         }
@@ -185,7 +179,7 @@
         color: theme-color("primary");
       }
 
-      .navigation-item:before {
+      .navigation-item::before {
         content: " / ";
         margin: ($baseline/4);
         color: color("gray");
@@ -195,7 +189,7 @@
         }
       }
 
-      .navigation .navigation-item:first-child:before {
+      .navigation .navigation-item:first-child::before {
         content: "";
         margin: 0;
       }
@@ -204,28 +198,24 @@
 
   // CASE: wizard-based mast
   .mast-wizard {
-
     .page-header-sub {
       @extend %t-title4;
+
       color: color("gray");
       font-weight: 300;
     }
 
     .page-header-super {
       @extend %t-title4;
+
       float: left;
-      width: flex-grid(12,12);
+      width: flex-grid(12, 12);
       margin-top: ($baseline/2);
       border-top: 1px solid $border-color;
       padding-top: ($baseline/2);
       font-weight: 600;
     }
   }
-
-  // page metadata/action bar
-  .metadata {
-
-  }
 }
 
 // layout - basic page content
@@ -258,6 +248,7 @@
 
     .title-sub {
       @extend %t-copy-sub1;
+
       display: block;
       margin: 0;
       color: $gray-500;
@@ -266,6 +257,7 @@
     .title-1 {
       @extend %t-title3;
       @extend %t-strong;
+
       margin: 0;
       padding: 0;
       color: theme-color("primary");
@@ -286,11 +278,13 @@
 
   .title-2 {
     @extend %t-title4;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
   .title-3 {
     @extend %t-title6;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
@@ -305,6 +299,7 @@
 
     .tip {
       @extend %t-copy-sub2;
+
       width: flex-grid(7, 12);
       float: right;
       margin-top: ($baseline/2);
@@ -316,7 +311,6 @@
 
 // layout - supplemental content
 .content-supplementary {
-
   > section {
     margin: 0 0 $baseline 0;
   }
@@ -332,6 +326,7 @@
 
 .inner-wrapper {
   @include clearfix();
+
   position: relative;
   max-width: 1280px;
   margin: auto;
diff --git a/cms/static/sass/bootstrap/_mixins.scss b/cms/static/sass/bootstrap/_mixins.scss
index b21f0d7f77..7ce54494c2 100644
--- a/cms/static/sass/bootstrap/_mixins.scss
+++ b/cms/static/sass/bootstrap/_mixins.scss
@@ -34,14 +34,14 @@
 
 // +Font Sizing - Mixin
 // ====================
-@mixin font-size($sizeValue: 16){
+@mixin font-size($sizeValue: 16) {
   font-size: $sizeValue + px;
   font-size: ($sizeValue/10) + rem;
 }
 
 // +Line Height - Mixin
 // ====================
-@mixin line-height($fontSize: auto){
+@mixin line-height($fontSize: auto) {
   line-height: ($fontSize*1.48) + px;
   line-height: (($fontSize/10)*1.48) + rem;
 }
@@ -65,11 +65,13 @@
   :-moz-placeholder {
     color: $color;
   }
+
   ::-webkit-input-placeholder {
     color: $color;
   }
+
   :-ms-input-placeholder {
-     color: $color;
+    color: $color;
   }
 }
 
@@ -118,6 +120,7 @@
 // used for page/view-level wrappers (for centering/grids)
 %ui-wrapper {
   @include clearfix();
+
   width: 100%;
 }
 
@@ -135,7 +138,6 @@
 // ====================
 // extends - UI - utility - first child clearing
 %wipe-first-child {
-
   &:first-child {
     margin-top: 0;
     border-top: none;
@@ -145,7 +147,6 @@
 
 // extends - UI - utility - last child clearing
 %wipe-last-child {
-
   &:last-child {
     margin-bottom: 0;
     border-bottom: none;
@@ -180,18 +181,18 @@
 // +Content - Screenreader Text - Extend
 // ====================
 %cont-text-sr {
-    // clip has been deprecated but is still supported
-    clip: rect(1px 1px 1px 1px);
-    clip: rect(1px, 1px, 1px, 1px);
-    position: absolute;
-    margin: -1px;
-    height: 1px;
-    width: 1px;
-    border: 0;
-    padding: 0;
-    overflow: hidden;
-    // ensure there are spaces in sr text
-    word-wrap: normal;
+  // clip has been deprecated but is still supported
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute;
+  margin: -1px;
+  height: 1px;
+  width: 1px;
+  border: 0;
+  padding: 0;
+  overflow: hidden;
+  // ensure there are spaces in sr text
+  word-wrap: normal;
 }
 
 // +Content - Text Wrap - Extend
diff --git a/cms/static/sass/bootstrap/_navigation.scss b/cms/static/sass/bootstrap/_navigation.scss
index 20bf307d00..49d7f00393 100644
--- a/cms/static/sass/bootstrap/_navigation.scss
+++ b/cms/static/sass/bootstrap/_navigation.scss
@@ -49,7 +49,8 @@
       }
 
       @include media-breakpoint-down(md) {
-        &.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
+        &.nav-item-open-collapsed,
+        &.nav-item-open-collapsed-only {
           display: initial;
           margin: $baseline/4 $baseline/2;
 
@@ -63,13 +64,14 @@
             }
           }
         }
+
         &.nav-item-hidden-collapsed {
           display: none;
         }
       }
     }
 
-    .btn-shopping-cart{
+    .btn-shopping-cart {
       padding-top: 0.7rem; // $btn-padding-y-lg once themed
     }
 
diff --git a/cms/static/sass/bootstrap/_variables.scss b/cms/static/sass/bootstrap/_variables.scss
index 617175a4f0..a9aaf39ec4 100644
--- a/cms/static/sass/bootstrap/_variables.scss
+++ b/cms/static/sass/bootstrap/_variables.scss
@@ -39,14 +39,14 @@ $white-opacity-60: rgba(255, 255, 255, 0.6) !default;
 $white-opacity-70: rgba(255, 255, 255, 0.7) !default;
 $white-opacity-80: rgba(255, 255, 255, 0.8) !default;
 
-$black:     rgb(0,0,0) !default;
+$black:     rgb(0, 0, 0) !default;
 $black-t0:  rgba($black, 0.125) !default;
 $black-t1:  rgba($black, 0.25) !default;
 $black-t2:  rgba($black, 0.5) !default;
 $black-t3:  rgba($black, 0.75) !default;
 
-$light-grey-transparent: rgba(200,200,200, 0) !default;
-$light-grey-solid: rgba(200,200,200, 1) !default;
+$light-grey-transparent: rgba(200, 200, 200, 0) !default;
+$light-grey-solid: rgba(200, 200, 200, 1) !default;
 
 $header-bg: $white !default;
 $footer-bg: $white !default;
@@ -66,6 +66,6 @@ $font-bold: 700 !default;
 $studio-dark-icon-color: $white !default;
 $studio-dark-icon-background-color: palette(grayscale, black) !default;
 
-$site-status-color: rgb(182,37,103) !default;
+$site-status-color: rgb(182, 37, 103) !default;
 
-$shadow-l1: rgba(0,0,0,0.1) !default;
+$shadow-l1: rgba(0, 0, 0, 0.1) !default;
diff --git a/cms/static/sass/contexts/_ie.scss b/cms/static/sass/contexts/_ie.scss
index ed9484f010..c7945043bf 100644
--- a/cms/static/sass/contexts/_ie.scss
+++ b/cms/static/sass/contexts/_ie.scss
@@ -6,7 +6,6 @@
 
   // CASE: IE9 doesn't support css animations and negative positioning
   .wrapper-notification {
-
     &.is-shown {
       bottom: 0;
     }
diff --git a/cms/static/sass/elements-v2/_controls.scss b/cms/static/sass/elements-v2/_controls.scss
index 69116366ad..464db54981 100644
--- a/cms/static/sass/elements-v2/_controls.scss
+++ b/cms/static/sass/elements-v2/_controls.scss
@@ -3,6 +3,7 @@
 %ui-btn-dd {
   @extend %ui-btn;
   @extend %ui-btn-pill;
+
   padding:($baseline/4) ($baseline/2);
   border-width: 1px;
   border-style: solid;
@@ -11,6 +12,7 @@
 
   &:hover, &:active {
     @extend %ui-fake-link;
+
     border-color: $gray-l3;
   }
 
@@ -24,6 +26,7 @@
 // ====================
 %ui-btn-dd-nav-primary {
   @extend %ui-btn-dd;
+
   background: $white;
   border-color: $white;
   color: $gray-d1;
diff --git a/cms/static/sass/elements-v2/_header.scss b/cms/static/sass/elements-v2/_header.scss
index 648995ca68..6d4e470fc2 100644
--- a/cms/static/sass/elements-v2/_header.scss
+++ b/cms/static/sass/elements-v2/_header.scss
@@ -13,6 +13,7 @@
     @include clearfix();
     @include grid-container();
     @include float(none);
+
     box-sizing: border-box;
     max-width: $fg-max-width;
     min-width: $fg-min-width;
@@ -68,11 +69,14 @@
 
       .title{
         @extend %ui-btn-dd-nav-primary;
+
         @include transition(all $tmg-f2 ease-in-out 0s);
+
         line-height: 16px;
         margin-top: 6px;
         font-size: font-size(base);
         font-weight: font-weight(semi-bold);
+
         .nav-sub .nav-item {
           .icon {
             display: inline-block;
@@ -121,14 +125,12 @@
     }
 
     .nav-account-help {
-
       .wrapper-nav-sub {
         width: ($baseline*10);
       }
     }
 
     .nav-account-user {
-
       .title {
         max-width: ($baseline*6.5);
         display: inline-block;
@@ -141,6 +143,7 @@
 
     .settings-language-form {
       margin-top: 4px;
+
       .language-selector {
         width: 130px;
       }
@@ -151,13 +154,12 @@
 
 // CASE: user signed in
 .is-signedin {
-
   .wrapper-l {
-    width: flex-grid(8,12);
+    width: flex-grid(8, 12);
   }
 
   .wrapper-r {
-    width: flex-grid(4,12);
+    width: flex-grid(4, 12);
   }
 
   .branding {
diff --git a/cms/static/sass/elements-v2/_navigation.scss b/cms/static/sass/elements-v2/_navigation.scss
index ce4b43225c..80d7758f26 100644
--- a/cms/static/sass/elements-v2/_navigation.scss
+++ b/cms/static/sass/elements-v2/_navigation.scss
@@ -2,6 +2,7 @@
 .nav-skip,
 .transcript-skip {
   @include left(0);
+
   font-size: font-size(small);
   display: inline-block;
   position: absolute;
diff --git a/cms/static/sass/elements-v2/_sock.scss b/cms/static/sass/elements-v2/_sock.scss
index 97bab90b75..7c2acf86fe 100644
--- a/cms/static/sass/elements-v2/_sock.scss
+++ b/cms/static/sass/elements-v2/_sock.scss
@@ -3,6 +3,7 @@
 
 .wrapper-sock {
   @include clearfix();
+
   position: relative;
   margin: ($baseline*2) 0 0 0;
   border-top: 1px solid $gray-l4;
@@ -10,6 +11,7 @@
 
   .wrapper-inner {
     @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
+
     display: none;
     width: 100% !important;
     border-bottom: 1px solid $white;
@@ -19,6 +21,7 @@
   // sock - actions
   .list-cta {
     @extend %ui-depth1;
+
     position: absolute;
     top: -($baseline*0.75);
     width: 100%;
@@ -27,6 +30,7 @@
 
     .cta-show-sock {
       @extend %ui-btn-pill;
+
       background: $uxpl-grayscale-x-back;
       font-size: font-size(x-small);
       padding: ($baseline/2) $baseline;
@@ -47,6 +51,7 @@
   .sock {
     @include clearfix();
     @include span(12);
+
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     margin: 0 auto;
@@ -73,6 +78,7 @@
         .action-item {
           @include float(left);
           @include margin-right($baseline/2);
+
           margin-bottom: ($baseline/2);
 
           &:last-child {
@@ -84,6 +90,7 @@
 
             .icon {
               vertical-align: middle;
+
               @include margin-right($baseline/4);
             }
           }
@@ -104,10 +111,11 @@
     .support {
       @include float(left);
       @include span(8);
+
       margin-right: flex-gutter();
 
       .action-item {
-        width: flexgrid(4,8);
+        width: flexgrid(4, 8);
       }
     }
 
@@ -115,8 +123,9 @@
     .feedback {
       @include float(left);
       @include span(4);
+
       .action-item {
-        width: flexgrid(4,4);
+        width: flexgrid(4, 4);
       }
     }
   }
diff --git a/cms/static/sass/elements-v2/_tooltip.scss b/cms/static/sass/elements-v2/_tooltip.scss
index ef826da644..790733dd26 100644
--- a/cms/static/sass/elements-v2/_tooltip.scss
+++ b/cms/static/sass/elements-v2/_tooltip.scss
@@ -1,5 +1,6 @@
 .tooltip {
   @include transition(opacity $tmg-f3 ease-out 0s);
+
   position: absolute;
   top: 0;
   left: 0;
@@ -12,7 +13,7 @@
   pointer-events: none;
   opacity: 0;
 
-  &:after {
+  &::after {
     font-size: font-size(x-large);
     content: '▾';
     display: block;
diff --git a/cms/static/sass/elements/_codemirror-overrides.scss b/cms/static/sass/elements/_codemirror-overrides.scss
index 1d09f23019..a7f440478e 100644
--- a/cms/static/sass/elements/_codemirror-overrides.scss
+++ b/cms/static/sass/elements/_codemirror-overrides.scss
@@ -4,8 +4,7 @@
  */
 
 .CodeMirror {
-    
-    .CodeMirror-linenumber.CodeMirror-gutter-elt {
-        color: $gray-d3 !important;
-    }
+  .CodeMirror-linenumber.CodeMirror-gutter-elt {
+    color: $gray-d3 !important;
+  }
 }
diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index 39277f15d8..3534f9b04c 100644
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -22,6 +22,7 @@
 
   &.is-disabled {
     @extend %ui-disabled;
+
     -webkit-filter: grayscale(65%);
     opacity: 0.65;
   }
@@ -31,6 +32,7 @@
 // ====================
 %sizing {
   @extend %t-action4;
+
   padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
 }
 
@@ -40,20 +42,24 @@
 // gray primary button
 %btn-primary-gray {
   @extend %ui-btn-primary;
+
   background: $gray-l1;
   border-color: $gray-l2;
   color: $white;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     border-color: $gray-l1;
     background: $gray;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $gray-d1;
     color: $gray-l1;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $gray-d1;
     }
   }
@@ -62,21 +68,25 @@
 // blue primary button
 %btn-primary-blue {
   @extend %ui-btn-primary;
+
   background: $uxpl-blue-base;
   border-color: $uxpl-blue-base;
   color: $white;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $uxpl-blue-hover-active;
     border-color: $uxpl-blue-hover-active;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $uxpl-blue-hover-active;
     border-color: $uxpl-blue-hover-active;
     color: $blue-l4;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $uxpl-blue-hover-active;
     }
   }
@@ -85,21 +95,25 @@
 // green primary button
 %btn-primary-green {
   @extend %ui-btn-primary;
+
   background: $uxpl-green-base;
   border-color: $uxpl-green-base;
   color: $white;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $uxpl-green-dark-hover-active;
     border-color: $uxpl-green-dark-hover-active;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $uxpl-green-dark-hover-active;
     color: $white;
     border-color: $uxpl-green-dark-hover-active;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $uxpl-green-dark-hover-active;
     }
   }
@@ -110,19 +124,23 @@
 // gray secondary button
 %btn-secondary-gray {
   @extend %ui-btn-secondary;
+
   border-color: $gray-l3;
   color: $gray-d1;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $gray-l3;
     color: $gray-d2;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $gray-d2;
     color: $gray-l5;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $gray-d2;
     }
   }
@@ -131,15 +149,18 @@
 // blue secondary button
 %btn-secondary-blue {
   @extend %ui-btn-secondary;
+
   border-color: $blue-l3;
   color: $uxpl-blue-base;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $blue-l4;
     color: $uxpl-blue-hover-active;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     border-color: $blue-l3;
     background: $blue-l3;
     color: $uxpl-blue-base;
@@ -149,19 +170,23 @@
 // white secondary button
 %btn-secondary-white {
   @extend %ui-btn-secondary;
+
   border-color: $white-t2;
   color: $white-t3;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     border-color: $white;
     color: $white;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $gray-d2;
     color: $gray-l5;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $gray-d2;
     }
   }
@@ -170,19 +195,23 @@
 // green secondary button
 %btn-secondary-green {
   @extend %ui-btn-secondary;
+
   border-color: $green-l4;
   color: $green-l2;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $green-l4;
     color: $green-s1;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $green-s1;
     color: $green-l4;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       background: $green-s1;
     }
   }
@@ -190,43 +219,42 @@
 
 // LMS-style CAPA button for consistency with LMS buttons
 %btn-lms-style {
+  border: 1px solid $btn-lms-border;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 0 0 $white;
+  color: $gray-d3;
+  display: inline-block;
+  font-weight: bold;
+  background-color: $btn-lms-background;
+  background-image: -webkit-linear-gradient($btn-lms-background, $btn-lms-gradient);
+  background-image: linear-gradient($btn-lms-background, $btn-lms-gradient);
+  padding: 7px 18px;
+  text-decoration: none;
+  text-shadow: 0 1px 0 $btn-lms-shadow;
+  background-clip: padding-box;
+  font-size: 0.8125em;
+
+  &:focus,
+  &:hover {
+    box-shadow: inset 0 1px 0 0 $btn-lms-shadow-hover;
+    cursor: pointer;
+    background-color: $btn-lms-background-hover;
+    background-image: -webkit-linear-gradient($btn-lms-background-hover, $btn-lms-gradient-hover);
+    background-image: linear-gradient($btn-lms-background-hover, $btn-lms-gradient-hover);
+  }
+
+  &:active {
     border: 1px solid $btn-lms-border;
-    border-radius: 3px;
-    box-shadow: inset 0 1px 0 0 $white;
-    color: $gray-d3;
-    display: inline-block;
-    font-size: inherit;
-    font-weight: bold;
-    background-color: $btn-lms-background;
-    background-image: -webkit-linear-gradient($btn-lms-background,$btn-lms-gradient);
-    background-image: linear-gradient($btn-lms-background,$btn-lms-gradient);
-    padding: 7px 18px;
-    text-decoration: none;
-    text-shadow: 0 1px 0 $btn-lms-shadow;
-    background-clip: padding-box;
-    font-size: 0.8125em;
-
-    &:focus,
-    &:hover {
-        box-shadow: inset 0 1px 0 0 $btn-lms-shadow-hover;
-        cursor: pointer;
-        background-color: $btn-lms-background-hover;
-        background-image: -webkit-linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
-        background-image: linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
-    }
-
-    &:active {
-        border: 1px solid $btn-lms-border;
-        box-shadow: inset 0 0 8px 4px $btn-lms-shadow-active,inset 0 0 8px 4px $btn-lms-shadow-active;
-    }
+    box-shadow: inset 0 0 8px 4px $btn-lms-shadow-active, inset 0 0 8px 4px $btn-lms-shadow-active;
+  }
 }
 
 // +Button Element
 // ====================
 .button {
-
   .icon {
     @include margin-right($baseline/4);
+
     display: inline-block;
     vertical-align: middle;
   }
@@ -237,18 +265,23 @@
 %ui-btn-dd {
   @extend %ui-btn;
   @extend %ui-btn-pill;
-  padding:($baseline/4) ($baseline/2);
+
+  padding: ($baseline/4) ($baseline/2);
   border-width: 1px;
   border-style: solid;
   border-color: transparent;
   text-align: center;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     @extend %ui-fake-link;
+
     border-color: $gray-l3;
   }
 
-  &.current, &.active, &.is-selected {
+  &.current,
+  &.active,
+  &.is-selected {
     box-shadow: inset 0 1px 2px 1px $shadow-l1;
     border-color: $gray-l3;
   }
@@ -258,20 +291,24 @@
 // ====================
 %ui-btn-dd-nav-primary {
   @extend %ui-btn-dd;
+
   background: $white;
   border-color: $white;
   color: $gray-d1;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     background: $white;
     color: $uxpl-blue-hover-active;
   }
 
-  &.current, &.active {
+  &.current,
+  &.active {
     background: $white;
     color: $gray-d4;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       color: $uxpl-blue-hover-active;
     }
   }
@@ -291,6 +328,7 @@
 
     .action-button {
       @include transition(all $tmg-f3 linear 0s);
+
       display: block;
       border-radius: 3px;
       padding: 3px ($baseline/2);
@@ -324,7 +362,7 @@
 
       // CASE: right to left layout
       @include rtl {
-       background: transparent url("#{$static-path}/images/drag-handles.png") no-repeat left center;
+        background: transparent url("#{$static-path}/images/drag-handles.png") no-repeat left center;
       }
 
       // CASE: left to right layout
@@ -366,6 +404,7 @@
 // TODO: this should be transitioned away from in favor of %ui-expand-collapse
 %expand-collapse {
   @include transition(all $tmg-f2 linear 0s);
+
   display: inline-block;
   color: $gray-l2;
   vertical-align: top;
@@ -377,7 +416,9 @@
   .ui-toggle-expansion {
     @include transition(all $tmg-f2 ease-in-out 0s);
     @include margin-right($baseline/4);
+
     @extend %t-action1;
+
     display: inline-block;
     color: $gray-l3;
     vertical-align: middle;
@@ -399,6 +440,7 @@
   // CASE: default (is expanded)
   .ui-toggle-expansion {
     @include transition(all $tmg-f2 ease-in-out 0s);
+
     display: inline-block;
     vertical-align: middle;
 
@@ -407,17 +449,17 @@
     }
 
     // STATE: hover/active
-    &:hover, &:active {
+    &:hover,
+    &:active {
       @extend %ui-fake-link;
+
       color: $uxpl-blue-base;
     }
   }
 
   // CASE: is collapsed
   &.is-collapsed {
-
     .ui-toggle-expansion {
-
       .icon {
         @include transform(rotate(-90deg));
         @include transform-origin(50% 50%);
@@ -431,8 +473,8 @@
 
 // UI: drag handle
 .drag-handle {
-
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     cursor: move;
   }
 }
@@ -440,18 +482,22 @@
 // UI: is draggable
 .is-draggable {
   @include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0, margin $tmg-f2 ease-in-out 0);
+
   position: relative;
 
   .draggable-drop-indicator {
     @extend %ui-depth3;
+
     @include transition(opacity $tmg-f2 linear 0s);
     @include size(100%, auto);
+
     position: absolute;
     border-top: 1px solid $blue-l1;
-    opacity: 0.0;
+    opacity: 0;
 
     .fa-caret-right {
       @extend %t-icon5;
+
       position: absolute;
       top: -12px;
       left: -($baseline/4);
@@ -471,6 +517,7 @@
 // UI: is dragging - drag state
 .is-dragging {
   @extend %ui-depth4;
+
   left: -($baseline/4);
   box-shadow: 0 1px 2px 0 $shadow-d1;
   cursor: move;
@@ -480,7 +527,7 @@
   // UI: condition - valid drop
   &.valid-drop {
     border-color: $ui-action-primary-color-focus;
-    box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
+    box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.5);
   }
 }
 
@@ -491,12 +538,11 @@
 
 // UI: drag target
 .drop-target {
-
   &.drop-target-before {
     margin-top: ($baseline*1.5);
 
     > .draggable-drop-indicator-before {
-      opacity: 1.0;
+      opacity: 1;
     }
   }
 
@@ -504,7 +550,7 @@
     margin-bottom: ($baseline*1.5);
 
     > .draggable-drop-indicator-after {
-      opacity: 1.0;
+      opacity: 1;
     }
   }
 }
@@ -512,6 +558,7 @@
 // UI: drop state - was dropped
 .was-dropped {
   @include animation(was-dropped $tmg-avg ease-in-out 1);
+
   border-color: $ui-action-primary-color-focus;
-  box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
+  box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.5);
 }
diff --git a/cms/static/sass/elements/_creative-commons.scss b/cms/static/sass/elements/_creative-commons.scss
index dc3a5a0b05..b575e3ac01 100644
--- a/cms/static/sass/elements/_creative-commons.scss
+++ b/cms/static/sass/elements/_creative-commons.scss
@@ -2,25 +2,26 @@
   font-family: 'CreativeCommons';
   src: url('#{$static-path}/fonts/CreativeCommons/cc.eot');
   src: url('#{$static-path}/fonts/CreativeCommons/cc.eot#iefix') format('embedded-opentype'),
-       url('#{$static-path}/fonts/CreativeCommons/cc.woff') format('woff'),
-       url('#{$static-path}/fonts/CreativeCommons/cc.ttf') format('truetype'),
-       url('#{$static-path}/fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg');
+    url('#{$static-path}/fonts/CreativeCommons/cc.woff') format('woff'),
+    url('#{$static-path}/fonts/CreativeCommons/cc.ttf') format('truetype'),
+    url('#{$static-path}/fonts/CreativeCommons/cc.svg#CreativeCommons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
-[class^="icon-cc"]:before, [class*=" icon-cc"]:before {
+[class^="icon-cc"]::before,
+[class*=" icon-cc"]::before {
   font-family: "CreativeCommons";
 }
 
-.icon-cc:before { content: '\e800'; } /* '' */
-.icon-cc-by:before { content: '\e801'; } /* '' */
-.icon-cc-nc:before { content: '\e802'; } /* '' */
-.icon-cc-nc-eu:before { content: '\e803'; } /* '' */
-.icon-cc-nc-jp:before { content: '\e804'; } /* '' */
-.icon-cc-sa:before { content: '\e805'; } /* '' */
-.icon-cc-nd:before { content: '\e806'; } /* '' */
-.icon-cc-pd:before { content: '\e807'; } /* '' */
-.icon-cc-zero:before { content: '\e808'; } /* '' */
-.icon-cc-share:before { content: '\e809'; } /* '' */
-.icon-cc-remix:before { content: '\e80a'; } /* '' */
+.icon-cc::before { content: '\e800'; } /* '' */
+.icon-cc-by::before { content: '\e801'; } /* '' */
+.icon-cc-nc::before { content: '\e802'; } /* '' */
+.icon-cc-nc-eu::before { content: '\e803'; } /* '' */
+.icon-cc-nc-jp::before { content: '\e804'; } /* '' */
+.icon-cc-sa::before { content: '\e805'; } /* '' */
+.icon-cc-nd::before { content: '\e806'; } /* '' */
+.icon-cc-pd::before { content: '\e807'; } /* '' */
+.icon-cc-zero::before { content: '\e808'; } /* '' */
+.icon-cc-share::before { content: '\e809'; } /* '' */
+.icon-cc-remix::before { content: '\e80a'; } /* '' */
diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss
index c07d3ab8e6..15b4c8d644 100644
--- a/cms/static/sass/elements/_footer.scss
+++ b/cms/static/sass/elements/_footer.scss
@@ -9,7 +9,9 @@
 
   footer.primary {
     @extend %t-copy-sub2;
+
     @include clearfix();
+
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
@@ -22,6 +24,7 @@
 
     .colophon {
       width: flex-grid(4, 12);
+
       @include float(left);
       @include margin-right(flex-gutter(2));
     }
@@ -29,18 +32,21 @@
     a {
       color: $uxpl-blue-base;
 
-      &:hover, &:active {
+      &:hover,
+      &:active {
         color: $uxpl-blue-hover-active;
       }
     }
 
     .nav-peripheral {
       width: flex-grid(6, 12);
+
       @include float(right);
       @include text-align(right);
 
       .nav-item {
         display: inline-block;
+
         @include margin-right($baseline/4);
 
         &:last-child {
@@ -54,9 +60,12 @@
 
           .icon {
             @include transition(top $tmg-f2 ease-in-out $tmg-f2);
+
             @extend %t-action3;
+
             display: inline-block;
             vertical-align: middle;
+
             @include margin-right($baseline/4);
           }
         }
@@ -65,10 +74,12 @@
 
     .footer-content-secondary {
       @include clearfix();
+
       margin-top: $baseline;
     }
 
-    .footer-about-copyright, .footer-about-openedx {
+    .footer-about-copyright,
+    .footer-about-openedx {
       display: inline-block;
       vertical-align: middle;
     }
@@ -76,6 +87,7 @@
     // platform trademarks
     .footer-about-copyright {
       width: flex-grid(4, 12);
+
       @include float(left);
       @include margin-right(flex-gutter(2));
     }
diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss
index 720413275b..ad3ab75844 100644
--- a/cms/static/sass/elements/_forms.scss
+++ b/cms/static/sass/elements/_forms.scss
@@ -17,7 +17,6 @@
 // --------------------
 // UI: checkbox/radio inputs
 %input-tickable {
-
   ~ label {
     color: $color-copy-base;
   }
@@ -25,6 +24,7 @@
   // STATE: checked/selected
   &:checked ~ label {
     @extend %t-strong;
+
     color: $ui-action-primary-color-focus;
   }
 }
@@ -35,8 +35,10 @@ input[type="password"],
 textarea.text {
   @include box-sizing(border-box);
   @include linear-gradient($gray-l5, $white);
+
   @extend %t-copy-sub2;
   @extend %t-demi-strong;
+
   padding: 6px 8px 8px;
   border: 1px solid $gray-l2;
   border-radius: 2px;
@@ -49,11 +51,12 @@ textarea.text {
   &::-webkit-input-placeholder,
   &:-moz-placeholder,
   &:-ms-input-placeholder {
-      color: $gray-l2;
+    color: $gray-l2;
   }
 
   &:focus {
     @include linear-gradient($paleYellow, tint($paleYellow, 90%));
+
     outline: 0;
   }
 }
@@ -61,12 +64,13 @@ textarea.text {
 // +Fields - Not Editable
 // ====================
 .field.is-not-editable {
-
   & label.is-focused {
-   color: $gray-d2;
+    color: $gray-d2;
   }
 
-  label, input, textarea {
+  label,
+  input,
+  textarea {
     pointer-events: none;
   }
 }
@@ -74,8 +78,8 @@ textarea.text {
 // +Fields - With Error
 // ====================
 .field.error {
-
-  input, textarea {
+  input,
+  textarea {
     border-color: $red;
   }
 }
@@ -86,13 +90,15 @@ form {
 
   // CASE: cosmetic checkbox input
   .checkbox-cosmetic {
-
-    .input-checkbox-checked, .input-checkbox-unchecked, .label {
+    .input-checkbox-checked,
+    .input-checkbox-unchecked,
+    .label {
       display: inline-block;
       vertical-align: middle;
     }
 
-    .input-checkbox-checked, .input-checkbox-unchecked {
+    .input-checkbox-checked,
+    .input-checkbox-unchecked {
       width: ($baseline*0.75);
     }
 
@@ -110,7 +116,6 @@ form {
 
       // CASE: checked
       &:checked {
-
         ~ label .input-checkbox-checked {
           display: inline-block;
         }
@@ -119,7 +124,6 @@ form {
           display: none;
         }
       }
-
     }
   }
 
@@ -141,35 +145,11 @@ form {
   .note {
     @include box-sizing(border-box);
 
-    .title {
-
-    }
-
-    .copy {
-
-    }
-
     // note with actions
     &.has-actions {
       @include clearfix();
-
-      .title {
-
-      }
-
-      .copy {
-
-      }
-
-      .list-actions {
-
-      }
     }
   }
-
-  .note-promotion {
-
-  }
 }
 
 // +Form - Create New
@@ -182,6 +162,7 @@ form {
   .title {
     @extend %t-title4;
     @extend %t-strong;
+
     padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
   }
 
@@ -201,24 +182,27 @@ form {
       }
 
       &.required {
-
         label {
           @extend %t-strong;
         }
 
-        label:after {
+        label::after {
           margin-left: ($baseline/4);
           content: "*";
         }
       }
 
-      label, input, textarea {
+      label,
+      input,
+      textarea {
         display: block;
       }
 
       label {
         @extend %t-copy-sub1;
+
         @include transition(color $tmg-f3 ease-in-out 0s);
+
         margin: 0 0 ($baseline/4) 0;
 
         &.is-focused {
@@ -227,9 +211,12 @@ form {
       }
 
 
-      input, textarea {
+      input,
+      textarea {
         @extend %t-copy-base;
+
         @include transition(all $tmg-f2 ease-in-out 0s);
+
         height: 100%;
         width: 100%;
         padding: ($baseline/2);
@@ -242,12 +229,7 @@ form {
           width: 25%;
         }
 
-        /*@include placeholder {
-          color: $gray-l3;
-        }*/
-
         &:focus {
-
           + .tip {
             color: $gray-d1;
           }
@@ -271,6 +253,7 @@ form {
 
       .tip {
         @extend %t-copy-sub2;
+
         @include transition(color 0.15s ease-in-out);
 
 
@@ -295,11 +278,11 @@ form {
         }
 
         .is-showing {
-            @extend %anim-fadeIn;
+          @extend %anim-fadeIn;
         }
 
         .is-hiding {
-            @extend %anim-fadeOut;
+          @extend %anim-fadeOut;
         }
 
         .tip-error {
@@ -314,8 +297,9 @@ form {
     }
 
     .field-inline {
-
-      input, textarea, select {
+      input,
+      textarea,
+      select {
         width: 62%;
         display: inline-block;
       }
@@ -326,16 +310,11 @@ form {
         width: 35%;
         margin-top: 0;
       }
-
-      &.error {
-        .tip-error {
-        }
-      }
-
     }
 
     .field-group {
       @include clearfix();
+
       margin: 0 0 ($baseline/2) 0;
 
       .field {
@@ -356,7 +335,8 @@ form {
           margin-right: 0;
         }
 
-        input, textarea {
+        input,
+        textarea {
           width: 100%;
         }
       }
@@ -372,7 +352,9 @@ form {
 
     .action {
       @include transition(all $tmg-f2 linear 0s);
+
       @extend %t-strong;
+
       display: inline-block;
       padding: ($baseline/5) $baseline;
       text-transform: uppercase;
@@ -380,11 +362,13 @@ form {
 
     .action-primary {
       @include blue-button;
+
       @extend %t-action2;
     }
 
     .action-secondary {
       @include grey-button;
+
       @extend %t-action2;
     }
   }
@@ -395,7 +379,6 @@ form {
 // form - inline xblock name edit on unit, container, outline
 // TODO: abstract this out into a Sass placeholder
 .incontext-editor.is-editable {
-
   .access-editor-action-wrapper {
     display: inline-block;
     vertical-align: middle;
@@ -405,17 +388,21 @@ form {
       vertical-align: baseline;
     }
   }
+
   .incontext-editor-value,
   .incontext-editor-action-wrapper {
     @extend %cont-truncated;
+
     display: inline-block;
     vertical-align: middle;
     max-width: 80%;
   }
 
-  .incontext-editor-open-action, .access-button {
+  .incontext-editor-open-action,
+  .access-button {
     @extend %ui-btn-non-blue;
     @extend %t-copy-base;
+
     padding-top: ($baseline/10);
 
     .icon.icon {
@@ -428,7 +415,6 @@ form {
   }
 
   &.is-editing {
-
     .incontext-editor-value,
     .incontext-editor-action-wrapper {
       display: none;
@@ -444,7 +430,7 @@ form {
 // ====================
 .wrapper-create-element {
   height: auto;
-  opacity: 1.0;
+  opacity: 1;
   pointer-events: auto;
   overflow: hidden;
   display: none;
@@ -462,7 +448,9 @@ form {
 // ====================
 input.search {
   padding: 6px 15px 8px 30px;
+
   @include box-sizing(border-box);
+
   border: 1px solid $darkGrey;
   border-radius: 20px;
   background: url('#{$static-path}/images/search-icon.png') no-repeat 8px 7px #edf1f5;
@@ -471,7 +459,7 @@ input.search {
   outline: 0;
 
   &::-webkit-input-placeholder {
-      color: #979faf;
+    color: #979faf;
   }
 }
 
@@ -488,6 +476,7 @@ code {
 
 .CodeMirror {
   @extend %t-copy-sub1;
+
   background: $white;
   font-family: $f-monospace;
 }
@@ -496,10 +485,14 @@ code {
   width: 100%;
   min-height: 80px;
   padding: 10px;
+
   @include box-sizing(border-box);
+
   border: 1px solid $mediumGrey;
+
   @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
-  background-color:  #edf1f5;
+
+  background-color: #edf1f5;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
   font-family: Monaco, monospace;
 }
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index c83bf84d7a..d7d12e6e48 100644
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -3,6 +3,7 @@
 
 .wrapper-header {
   @extend %ui-depth3;
+
   position: relative;
   width: 100%;
   box-shadow: 0 1px 2px 0 $shadow-l1;
@@ -13,6 +14,7 @@
   header.primary {
     @include box-sizing(border-box);
     @include clearfix();
+
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
@@ -22,23 +24,32 @@
   // ====================
 
   // basic layout
-  .wrapper-l, .wrapper-r {
+  .wrapper-l,
+  .wrapper-r {
     background: $white;
   }
 
   .wrapper-l {
     @include float(left);
-    width: flex-grid(7,12);
+
+    width: flex-grid(7, 12);
   }
 
   .wrapper-r {
     @include float(right);
-    width: flex-grid(4,12);
+
+    width: flex-grid(4, 12);
+
     @include text-align(right);
   }
 
-  .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
+  .branding,
+  .info-course,
+  .nav-course,
+  .nav-account,
+  .nav-pitch {
     @include box-sizing(border-box);
+
     display: inline-block;
     vertical-align: middle;
   }
@@ -60,10 +71,10 @@
 
   // basic layout - nav items
   nav {
-
     > ol > .nav-item {
       @extend %t-action3;
       @extend %t-strong;
+
       display: inline-block;
       vertical-align: middle;
 
@@ -83,33 +94,23 @@
 
   // basic layout - dropdowns
   .nav-dd {
-
     .title {
       @extend %t-action2;
       @extend %ui-btn-dd-nav-primary;
+
       @include transition(all $tmg-f2 ease-in-out 0s);
 
-      .label, .fa-caret-down {
-
-      }
-
-      .label {
-
-      }
-
       .fa-caret-down {
         opacity: 0.25;
       }
 
       &:hover {
-
         .fa-caret-down {
-          opacity: 1.0;
+          opacity: 1;
         }
       }
 
       .nav-sub .nav-item {
-
         .icon {
           display: inline-block;
           vertical-align: middle;
@@ -141,17 +142,20 @@
   .info-course {
     @include margin-right(flex-gutter());
     @include border-right(1px solid $gray-l4);
+
     padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
 
-    .course-org, .course-number {
+    .course-org,
+    .course-number {
       @extend %t-action4;
+
       display: inline-block;
       vertical-align: middle;
       max-width: 45%;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      opacity: 1.0;
+      opacity: 1;
       color: $gray-d3;
     }
 
@@ -162,6 +166,7 @@
     .course-title {
       @extend %t-action2;
       @extend %t-strong;
+
       display: block;
       width: 100%;
       overflow: hidden;
@@ -172,6 +177,7 @@
     // entire link
     .course-link {
       @include transition(color $tmg-f2 ease-in-out 0s);
+
       display: block;
       color: $gray-d3;
 
@@ -200,14 +206,12 @@
     }
 
     .nav-account-help {
-
       .wrapper-nav-sub {
         width: ($baseline*10);
       }
     }
 
     .nav-account-user {
-
       .title {
         max-width: ($baseline*6.5);
 
@@ -223,6 +227,7 @@
 
     .settings-language-form {
       margin-top: 4px;
+
       .language-selector {
         width: 130px;
       }
@@ -246,13 +251,12 @@
 
 // CASE: user signed in
 .is-signedin {
-
   .wrapper-l {
-    width: flex-grid(8,12);
+    width: flex-grid(8, 12);
   }
 
   .wrapper-r {
-    width: flex-grid(4,12);
+    width: flex-grid(4, 12);
   }
 
   .branding {
@@ -268,15 +272,13 @@
 
 // CASE: in course {
 .is-signedin.course {
-
   .wrapper-header {
-
     .wrapper-l {
-      width: flex-grid(9,12);
+      width: flex-grid(9, 12);
     }
 
     .wrapper-r {
-      width: flex-grid(3,12);
+      width: flex-grid(3, 12);
     }
 
     .branding {
@@ -299,15 +301,13 @@
 // CASE: user not signed in
 .not-signedin,
 .view-util {
-
   .wrapper-header {
-
     .wrapper-l {
-      width: flex-grid(2,12);
+      width: flex-grid(2, 12);
     }
 
     .wrapper-r {
-      width: flex-grid(10,12);
+      width: flex-grid(10, 12);
     }
 
     .branding {
@@ -327,16 +327,20 @@
 
       .action-signup {
         @include blue-button();
+
         @extend %t-action3;
         @extend %t-strong;
+
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
       }
 
       .action-signin {
         @include white-button();
+
         @extend %t-action3;
         @extend %t-strong;
+
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
       }
@@ -350,55 +354,39 @@
 
 .nav-item.is-current,
 body.howitworks .nav-not-signedin-hiw,
-
-// dashboard
 body.dashboard .nav-account-dashboard,
-
-// course content
 body.course.view-outline .nav-course-courseware .title,
 body.course.view-updates .nav-course-courseware .title,
 body.course.view-static-pages .nav-course-courseware .title,
 body.course.view-uploads .nav-course-courseware .title,
 body.course.view-textbooks .nav-course-courseware .title,
 body.course.view-video-uploads .nav-course-courseware .title,
-
 body.course.view-outline .nav-course-courseware-outline,
 body.course.view-updates .nav-course-courseware-updates,
 body.course.view-static-pages .nav-course-courseware-pages,
 body.course.view-uploads .nav-course-courseware-uploads,
 body.course.view-textbooks .nav-course-courseware-textbooks,
 body.course.view-video-uploads .nav-course-courseware-videos,
-
-// course settings
 body.course.schedule .nav-course-settings .title,
 body.course.grading .nav-course-settings .title,
 body.course.view-team .nav-course-settings .title,
 body.course.view-group-configurations .nav-course-settings .title,
 body.course.advanced .nav-course-settings .title,
 body.course.view-certificates .nav-course-settings .title,
-
 body.course.schedule .nav-course-settings-schedule,
 body.course.grading .nav-course-settings-grading,
 body.course.view-team .nav-course-settings-team,
 body.course.view-group-configurations .nav-course-settings-group-configurations,
 body.course.advanced .nav-course-settings-advanced,
 body.course.view-certificates .nav-course-settings-certificates,
-
-// course tools
 body.course.view-import .nav-course-tools .title,
 body.course.view-export .nav-course-tools .title,
 body.course.view-export-git .nav-course-tools .title,
-
 body.course.view-import .nav-course-tools-import,
 body.course.view-export .nav-course-tools-export,
 body.course.view-export-git .nav-course-tools-export-git,
-
-// content library settings
 body.course.view-team .nav-library-settings .title,
-
-body.course.view-team .nav-library-settings-team,
-
-{
+body.course.view-team .nav-library-settings-team {
   color: $uxpl-blue-base;
 
   a {
diff --git a/cms/static/sass/elements/_icons.scss b/cms/static/sass/elements/_icons.scss
index 150cc94274..e7e5609651 100644
--- a/cms/static/sass/elements/_icons.scss
+++ b/cms/static/sass/elements/_icons.scss
@@ -7,6 +7,7 @@
 .icon-inline {
   display: inline-block;
   vertical-align: middle;
+
   @include margin-right($baseline/4);
 }
 
@@ -14,13 +15,16 @@
 .wrapper-ui-badge {
   position: absolute;
   top: -1px;
+
   @include left($baseline*1.5);
+
   width: 100%;
 }
 
 %ui-badge {
   @extend %t-title9;
   @extend %t-strong;
+
   position: relative;
   border-bottom-right-radius: ($baseline/10);
   border-bottom-left-radius: ($baseline/10);
@@ -34,10 +38,12 @@
   // OPTION: add this class for a visual hanging display
   &.is-hanging {
     @include box-sizing(border-box);
+
     @extend %ui-depth2;
+
     top: -($baseline/4);
 
-    &:after {
+    &::after {
       position: absolute;
       top: 0;
       right: -($baseline/4);
diff --git a/cms/static/sass/elements/_layout.scss b/cms/static/sass/elements/_layout.scss
index d8c8fd0bea..dfccc2c8bc 100644
--- a/cms/static/sass/elements/_layout.scss
+++ b/cms/static/sass/elements/_layout.scss
@@ -1,12 +1,6 @@
 // studio - elements - layouts
 // ====================
 
-// layout - basic
-// the wrapper around the viewable page area, excluding modal and other extra-view content
-.wrapper-view {
-
-}
-
 // ====================
 
 // layout - basic page header
@@ -18,6 +12,7 @@
   .mast,
   .metadata {
     @include clearfix();
+
     position: relative;
     max-width: $fg-max-width;
     min-width: $fg-min-width;
@@ -41,20 +36,26 @@
 
       .page-header {
         @include float(left);
-        width: flex-grid(6,12);
+
+        width: flex-grid(6, 12);
+
         @include margin-right(flex-gutter());
       }
 
       .nav-actions {
         position: relative;
         bottom: -($baseline*0.75);
+
         @include float(right);
-        width: flex-grid(6,12);
+
+        width: flex-grid(6, 12);
+
         @include text-align(right);
 
         .nav-item {
           display: inline-block;
           vertical-align: top;
+
           @include margin-right(($baseline/2));
 
           &:last-child {
@@ -89,7 +90,6 @@
 
     // layout with actions
     &.has-subtitle {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
@@ -97,13 +97,13 @@
 
     // layout with breadcrumb navigation
     &.has-navigation {
-
       .nav-actions {
         bottom: -($baseline*1.5);
       }
 
       .navigation-item {
         @extend %cont-truncated;
+
         display: inline-block;
         vertical-align: bottom; // correct for extra padding in FF
         max-width: 250px;
@@ -111,10 +111,11 @@
 
         &.navigation-current {
           @extend %ui-disabled;
+
           color: $gray;
           max-width: 250px;
 
-          &:before {
+          &::before {
             color: $gray;
           }
         }
@@ -124,7 +125,7 @@
         color: $blue;
       }
 
-      .navigation-item:before {
+      .navigation-item::before {
         content: " / ";
         margin: ($baseline/4);
         color: $gray;
@@ -134,7 +135,7 @@
         }
       }
 
-      .navigation .navigation-item:first-child:before {
+      .navigation .navigation-item:first-child::before {
         content: "";
         margin: 0;
       }
@@ -143,28 +144,24 @@
 
   // CASE: wizard-based mast
   .mast-wizard {
-
     .page-header-sub {
       @extend %t-title4;
+
       color: $gray;
       font-weight: 300;
     }
 
     .page-header-super {
       @extend %t-title4;
+
       float: left;
-      width: flex-grid(12,12);
+      width: flex-grid(12, 12);
       margin-top: ($baseline/2);
       border-top: 1px solid $gray-l4;
       padding-top: ($baseline/2);
       font-weight: 600;
     }
   }
-
-  // page metadata/action bar
-  .metadata {
-
-  }
 }
 
 // layout - basic page content
@@ -176,7 +173,9 @@
 
 .content {
   @include clearfix();
+
   @extend %t-copy-base;
+
   max-width: $fg-max-width;
   min-width: $fg-min-width;
   width: flex-grid(12);
@@ -191,6 +190,7 @@
 
     .title-sub {
       @extend %t-copy-sub1;
+
       display: block;
       margin: 0;
       color: $gray-l2;
@@ -199,6 +199,7 @@
     .title-1 {
       @extend %t-title3;
       @extend %t-strong;
+
       margin: 0;
       padding: 0;
       color: $gray-d3;
@@ -216,7 +217,8 @@
   .content-primary {
     @include float(left);
     @include margin-right(flex-gutter());
-    width: flex-grid(9,12);
+
+    width: flex-grid(9, 12);
     box-shadow: none;
     border: 0;
     background-color: $white;
@@ -224,25 +226,27 @@
 
   .content-supplementary {
     @include float(left);
-    width: flex-grid(3,12);
+
+    width: flex-grid(3, 12);
   }
 }
 
 
 // layout - primary content
 .content-primary {
-
   .title-1 {
     @extend %t-title3;
   }
 
   .title-2 {
     @extend %t-title4;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
   .title-3 {
     @extend %t-title6;
+
     margin: 0 0 ($baseline/2) 0;
   }
 
@@ -257,6 +261,7 @@
 
     .tip {
       @extend %t-copy-sub2;
+
       width: flex-grid(7, 12);
       float: right;
       margin-top: ($baseline/2);
@@ -268,7 +273,6 @@
 
 // layout - supplemental content
 .content-supplementary {
-
   > section {
     margin: 0 0 $baseline 0;
   }
@@ -284,6 +288,7 @@
 
 .inner-wrapper {
   @include clearfix();
+
   position: relative;
   max-width: 1280px;
   margin: auto;
diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss
index bf1352689e..bf5e209a0d 100644
--- a/cms/static/sass/elements/_modal-window.scss
+++ b/cms/static/sass/elements/_modal-window.scss
@@ -8,15 +8,18 @@
 
   // basic modal content
   // ------------------------
-  .modal-window  {
+  .modal-window {
     @extend %ui-depth3;
+
     @include box-sizing(border-box);
+
     position: absolute;
     width: 50%;
     box-shadow: 0 0 7px $shadow-d1;
     border-radius: ($baseline/5);
     background-color: $gray-l4;
     padding: 7px;
+
     @include text-align(left);
     @include direction();
 
@@ -29,12 +32,14 @@
     .title {
       @extend %t-title5;
       @extend %t-demi-strong;
+
       margin: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2);
       color: $black;
     }
 
     .message {
       @extend %t-copy-sub1;
+
       margin: 0 0 $baseline 0;
       color: $gray;
     }
@@ -61,19 +66,23 @@
       padding: ($baseline*0.75);
       background: $gray-d3;
 
-      .icon, .copy {
+      .icon,
+      .copy {
         display: inline-block;
         vertical-align: top;
       }
 
       .icon {
         @extend %t-icon4;
+
         @include margin-right($baseline/2);
+
         color: $white;
       }
 
       .copy {
         @extend %t-copy-sub1;
+
         max-width: 85%;
         color: $white;
       }
@@ -101,6 +110,7 @@
       &:last-child {
         margin-bottom: 0;
       }
+
       .settings-tabs-header {
         margin-bottom: $baseline;
         border-bottom: 1px solid $gray-l3;
@@ -112,6 +122,7 @@
           .settings-tab-button {
             @extend %t-copy-sub1;
             @extend %t-regular;
+
             background-image: none;
             background-color: $white;
             color: $gray-d1;
@@ -120,10 +131,12 @@
             border: 0;
             padding: ($baseline/4) ($baseline/2);
             text-transform: uppercase;
+
             &:hover {
               background-color: $white;
               color: $uxpl-blue-base;
             }
+
             &.active {
               border-bottom: 4px solid $uxpl-blue-base;
               color: $uxpl-blue-base;
@@ -135,6 +148,7 @@
 
     .modal-section-title {
       @extend %t-title6;
+
       margin: 0 0 ($baseline/2) 0;
       border-bottom: ($baseline/10) solid $gray-l4;
       padding-bottom: ($baseline/4);
@@ -144,9 +158,9 @@
     .modal-subsection-title {
       @extend %t-title8;
       @extend %t-strong;
+
       margin-bottom: ($baseline/4);
       text-transform: uppercase;
-      letter-spacing: 0.1;
       color: $gray-l2;
     }
 
@@ -155,13 +169,15 @@
         min-height: 95px;
       }
 
-      .list-fields, .list-actions {
+      .list-fields,
+      .list-actions {
         display: inline-block;
         vertical-align: middle;
       }
 
       .list-actions {
         @extend %actions-list;
+
         margin-left: ($baseline/4);
 
         .action-button {
@@ -178,6 +194,7 @@
 
       .action-item {
         @extend %t-action3;
+
         display: inline-block;
         margin-right: ($baseline*0.75);
 
@@ -188,7 +205,9 @@
 
       .action-primary {
         @include blue-button();
+
         @extend %t-action3;
+
         border-color: $blue-d1;
         color: $white;
       }
@@ -238,7 +257,6 @@
     }
 
     &.modal-editor {
-
       .modal-header {
         margin: ($baseline/4) ($baseline/2);
 
@@ -250,6 +268,7 @@
         .editor-modes {
           width: 48%;
           display: inline-block;
+
           @include text-align(right);
 
           .action-item {
@@ -260,13 +279,11 @@
             .settings-button {
               @extend %btn-secondary-gray;
               @extend %t-copy-sub1;
+
               border: 0;
               padding: ($baseline/4) ($baseline/2);
               text-transform: uppercase;
 
-              &:hover {
-              }
-
               &.is-set {
                 background-color: $gray-d1;
                 color: $white;
@@ -295,6 +312,7 @@
     position: fixed;
     left: 50%;
     top: 50%;
+
     @include transform(translate(-50%,-50%));
   }
 
@@ -302,6 +320,7 @@
     .modal-content {
       padding: ($baseline/2) ($baseline/2) ($baseline*1.25) ($baseline/2);
     }
+
     .ui-loading {
       box-shadow: none;
     }
@@ -314,7 +333,6 @@
 
   // upload modal
   .assetupload-modal {
-
     .status-upload {
       margin-top: $baseline;
     }
@@ -323,7 +341,6 @@
 
   // component editor
   .modal-window {
-
     .CodeMirror {
       height: 365px;
     }
@@ -333,9 +350,7 @@
     }
 
     .wrapper-comp-settings {
-
       .list-input {
-
         &.settings-list {
           height: auto;
           max-height: none;
@@ -365,7 +380,6 @@
 
   // MODAL TYPE: component - video modal (includes special overrides for xblock-related editing view)
   .modal-lg.modal-type-video {
-
     .modal-content {
       box-shadow: none;
       height: auto;
@@ -373,7 +387,6 @@
 
       // modal within a modal
       .wrapper-modal-window-assetupload {
-
         .modal-window {
           top: 10% !important;
           left: 10% !important;
@@ -411,7 +424,6 @@
     }
 
     .xmodule_edit.xmodule_VideoDescriptor .editor-with-tabs {
-
       .edit-header {
         border: 0;
         background-color: $gray-l4;
@@ -420,6 +432,7 @@
         .component-name {
           @extend %t-title5;
           @extend %t-strong;
+
           display: inline-block;
           vertical-align: middle;
           width: 48%;
@@ -448,6 +461,7 @@
               @extend %btn-secondary-gray;
               @extend %t-copy-sub1;
               @extend %t-regular;
+
               background-image: none;
               box-shadow: none;
               border: 0;
@@ -477,6 +491,7 @@
 
   .modal-window-overlay {
     @extend %ui-depth3;
+
     position: fixed;
     top: 0;
     left: 0;
@@ -513,12 +528,11 @@
     }
 
     .partition-visibility {
-        padding-top: $baseline;
+      padding-top: $baseline;
     }
 
     // UI: form fields
     .partition-group-control {
-
       padding-top: ($baseline/2);
 
       .field {
@@ -526,6 +540,7 @@
 
         label {
           @include margin-left($baseline/4);
+
           font-size: inherit;
         }
       }
@@ -533,7 +548,6 @@
 
     // CASE: content or enrollment group has been removed
     .partition-group-visibility.was-removed {
-
       .input-checkbox:checked ~ label {
         color: $error-color;
       }
@@ -541,6 +555,7 @@
       .note {
         @extend %t-copy-sub2;
         @extend %t-regular;
+
         display: block;
         color: $error-color;
       }
@@ -549,11 +564,14 @@
     // CASE: no groups configured for visibility
     .is-not-configured {
       @extend %no-content;
+
       padding: ($baseline);
+
       @include text-align(left); // reset for %no-content's default styling
 
       .title {
         @extend %t-title6;
+
         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
       }
@@ -561,14 +579,14 @@
       .copy {
         @extend %t-copy-sub1;
 
-         p {
+        p {
           @extend %wipe-last-child;
+
           margin-bottom: $baseline;
         }
       }
 
       &.has-actions {
-
         .actions {
           margin-top: $baseline;
         }
@@ -593,24 +611,32 @@
     .list-fields {
       .field-message {
         @extend %t-copy-sub1;
+
         color: $gray-d1;
         margin-bottom: ($baseline/4);
       }
+
       label {
         @extend %t-title6;
+
         font-weight: font-weight(semi-bold);
       }
 
       .field {
         display: inline-block;
         vertical-align: top;
+
         @include margin-right($baseline/2);
+
         margin-bottom: ($baseline/4);
 
         label {
           @include font-size(16);
+
           font-weight: font-weight(semi-bold);
+
           @include transition(color $tmg-f3 ease-in-out 0s);
+
           margin-bottom: ($baseline/4);
 
           &.is-focused {
@@ -619,9 +645,12 @@
         }
 
 
-        input, textarea {
+        input,
+        textarea {
           @extend %t-copy-base;
+
           @include transition(all $tmg-f2 ease-in-out 0s);
+
           height: 100%;
           width: 100%;
           padding: ($baseline/2);
@@ -647,7 +676,9 @@
 
         .tip {
           @extend %t-copy-sub1;
+
           @include transition(color, 0.15s, ease-in-out);
+
           display: block;
           margin-top: ($baseline/4);
           color: $gray-l2;
@@ -662,15 +693,17 @@
       .field-text {
 
         // TODO: refactor the _forms.scss partial to allow for this area to inherit from it
-        label, input, textarea {
+        label,
+        input,
+        textarea {
           display: block;
         }
       }
 
       // CASE: select input
       .field-select {
-
-        .label, .input {
+        .label,
+        .input {
           display: inline-block;
           vertical-align: middle;
         }
@@ -685,8 +718,8 @@
 
         // CASE: checkbox input
         .field-checkbox {
-
-          .label, label {
+          .label,
+          label {
             margin-bottom: 0;
           }
         }
@@ -697,13 +730,14 @@
 
     // UI: grading section
     .edit-settings-grading {
-
       .grading-type {
         margin-bottom: $baseline;
       }
     }
 
-    .edit-staff-lock, .edit-content-visibility, .edit-unit-access {
+    .edit-staff-lock,
+    .edit-content-visibility,
+    .edit-unit-access {
       margin-bottom: $baseline;
 
       .tip {
@@ -713,8 +747,9 @@
     }
 
     // UI: staff lock section
-    .edit-staff-lock, .edit-settings-timed-examination, .edit-unit-access {
-
+    .edit-staff-lock,
+    .edit-settings-timed-examination,
+    .edit-unit-access {
       .checkbox-cosmetic .input-checkbox {
         @extend %cont-text-sr;
 
@@ -725,7 +760,6 @@
 
         // CASE: checked
         &:checked {
-
           ~ .tip-warning {
             display: none;
           }
@@ -740,6 +774,7 @@
       .note {
         @extend %t-copy-sub2;
         @extend %t-regular;
+
         margin: 14px 0 0 21px;
         display: block;
       }
@@ -747,7 +782,6 @@
 
     // UI: timed and proctored exam section
     .edit-settings-timed-examination {
-
       margin-bottom: $baseline;
 
       .checkbox-cosmetic .input-checkbox {
@@ -760,7 +794,6 @@
 
         // CASE: checked
         &:checked {
-
           ~ .tip-warning {
             display: none;
           }
@@ -781,47 +814,8 @@
     }
   }
 
-  .edit-unit-access, .edit-staff-lock {
-    .modal-section-content {
-    @include font-size(16);
-
-    .group-select-title {
-      font-weight: font-weight(semi-bold);
-      font-size: inherit;
-      margin-bottom: ($baseline/4);
-
-      .user-partition-select {
-        font-size: inherit;
-      }
-    }
-
-    .partition-group-directions {
-      padding-top: ($baseline/2);
-    }
-
-    .label {
-
-      &.deleted {
-        color: $red;
-      }
-
-      font-size: inherit;
-      margin-left: ($baseline/4);
-    }
-
-    .deleted-group-message {
-      display: block;
-      color: $red;
-      @include font-size(14);
-    }
-
-    .field {
-      margin-top: ($baseline/4);
-    }
-  }
-  }
-
-  .edit-unit-access, .edit-staff-lock {
+  .edit-unit-access,
+  .edit-staff-lock {
     .modal-section-content {
       @include font-size(16);
 
@@ -840,18 +834,60 @@
       }
 
       .label {
-
         &.deleted {
           color: $red;
         }
 
         font-size: inherit;
+        margin-left: ($baseline/4);
+      }
+
+      .deleted-group-message {
+        display: block;
+        color: $red;
+
+        @include font-size(14);
+      }
+
+      .field {
+        margin-top: ($baseline/4);
+      }
+    }
+  }
+
+  .edit-unit-access,
+  .edit-staff-lock {
+    .modal-section-content {
+      @include font-size(16);
+
+      .group-select-title {
+        font-weight: font-weight(semi-bold);
+        font-size: inherit;
+        margin-bottom: ($baseline/4);
+
+        .user-partition-select {
+          font-size: inherit;
+        }
+      }
+
+      .partition-group-directions {
+        padding-top: ($baseline/2);
+      }
+
+      .label {
+        &.deleted {
+          color: $red;
+        }
+
+        font-size: inherit;
+
         @include margin-left($baseline/4);
       }
 
       .deleted-group-message {
         display: block;
         color: $red;
+
         @include font-size(14);
       }
 
diff --git a/cms/static/sass/elements/_modal.scss b/cms/static/sass/elements/_modal.scss
index 3d9c4663cc..7252534063 100644
--- a/cms/static/sass/elements/_modal.scss
+++ b/cms/static/sass/elements/_modal.scss
@@ -2,71 +2,79 @@
 // ====================
 
 .modal-cover {
-	@extend %ui-depth3;
-	display: none;
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: rgba(0, 0, 0, 0.8);
+  @extend %ui-depth3;
+
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
 }
 
 .modal {
-	@extend %ui-depth4;
-	display: none;
-	position: fixed;
-	top: 60px;
-	left: 50%;
-	width: 930px;
-	height: 540px;
-	margin-left: -465px;
-	background: $white;
+  @extend %ui-depth4;
 
-	.modal-body {
-		height: 400px;
-		padding: 40px;
-		overflow-y: scroll;
-	}
+  display: none;
+  position: fixed;
+  top: 60px;
+  left: 50%;
+  width: 930px;
+  height: 540px;
+  margin-left: -465px;
+  background: $white;
 
-	.modal-actions {
-		height: 60px;
-		@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
-		background-color: #d1dae3;
-	}
+  .modal-body {
+    height: 400px;
+    padding: 40px;
+    overflow-y: scroll;
+  }
 
-	h2 {
-		@extend %t-title5;
-		@extend %t-light;
-		margin: 0 ($baseline/2) ($baseline*1.5);
-		color: #646464;
-		letter-spacing: 1px;
-		text-transform: uppercase;
-	}
+  .modal-actions {
+    height: 60px;
 
-	p {
-		margin: $baseline;
-	}
+    @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
 
-	.revert-button {
-		@include blue-button;
-		margin: 13px 6px 0 13px;
-	}
+    background-color: #d1dae3;
+  }
 
-	.close-button {
-		@include white-button;
-		margin-top: 13px;
-	}
+  h2 {
+    @extend %t-title5;
+    @extend %t-light;
+
+    margin: 0 ($baseline/2) ($baseline*1.5);
+    color: #646464;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+
+  p {
+    margin: $baseline;
+  }
+
+  .revert-button {
+    @include blue-button;
+
+    margin: 13px 6px 0 13px;
+  }
+
+  .close-button {
+    @include white-button;
+
+    margin-top: 13px;
+  }
 }
 
 // lean modal alternative
 #lean_overlay {
-	@extend %ui-depth4;
-	position: fixed;
-	top: 0px;
-	left: 0px;
-	display: none;
-	height: 100%;
-	width: 100%;
-	background: $black;
+  @extend %ui-depth4;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+  height: 100%;
+  width: 100%;
+  background: $black;
 }
diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss
index 6c5abbf767..43b7098561 100644
--- a/cms/static/sass/elements/_modules.scss
+++ b/cms/static/sass/elements/_modules.scss
@@ -12,6 +12,7 @@
   .bar-mod-title {
     @extend %t-title6;
     @extend %t-strong;
+
     display: block;
     padding: ($baseline/2) ($baseline*0.75);
     background-color: $gray-l4;
@@ -19,12 +20,14 @@
 
   .bar-mod-content {
     @extend %t-copy-sub1;
+
     border-bottom: 1px solid $gray-l4;
     padding: ($baseline*0.75) ($baseline*0.75) $baseline ($baseline*0.75);
 
     .title {
       @extend %t-title8;
       @extend %t-strong;
+
       margin-bottom: ($baseline/4);
       color: $gray-d2;
       text-transform: uppercase;
@@ -32,6 +35,7 @@
 
     .meta {
       @extend %t-copy-sub2;
+
       color: $gray-d2;
     }
   }
@@ -41,6 +45,7 @@
 // --------------------
 %bar-module-blue {
   @extend %bar-module;
+
   border-top: 5px solid $blue;
 
   .bar-mod-title {
@@ -52,6 +57,7 @@
 // --------------------
 %bar-module-green {
   @extend %bar-module;
+
   border-top: 5px solid $green;
 
   .bar-mod-title {
@@ -63,6 +69,7 @@
 // --------------------
 %bar-module-yellow {
   @extend %bar-module;
+
   border-top: 5px solid $orange-l2;
 
   .bar-mod-title {
@@ -74,6 +81,7 @@
 // --------------------
 %bar-module-red {
   @extend %bar-module;
+
   border-top: 5px solid $red-l2;
 
   .bar-mod-title {
@@ -84,6 +92,7 @@
 // black bar and title bg version
 %bar-module-black {
   @extend %bar-module;
+
   border-top: 5px solid $black;
 
   .bar-mod-title {
@@ -109,6 +118,7 @@
     h5 {
       @extend %t-title5;
       @extend %t-strong;
+
       margin-bottom: ($baseline*0.75);
       color: $uxpl-green-base;
     }
@@ -124,20 +134,24 @@
       // green button
       .add-xblock-component-button {
         @extend %t-action3;
+
         @include margin-right($baseline*0.75);
+
         position: relative;
         display: inline-block;
         width: ($baseline*5);
         height: ($baseline*5);
         margin-bottom: ($baseline/2);
-        box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;
+        box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, 0.4) inset;
         border-radius: ($baseline/4);
         padding: 0;
         text-align: center;
+
         @extend %btn-primary-green;
 
         .name {
           @include box-sizing(border-box);
+
           display: block;
           color: $white;
         }
@@ -150,12 +164,13 @@
   // --------------------
   .new-component-templates {
     @include clearfix();
+
     display: none;
     margin: $baseline ($baseline*2);
     border-radius: 3px;
     border: 1px solid $mediumGrey;
     background-color: $white;
-    box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;
+    box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, 0.4) inset;
 
     .cancel-button {
       @include white-button;
@@ -175,6 +190,7 @@
 
     .support-documentation {
       float: right;
+
       @include margin($baseline, 0, ($baseline/2), ($baseline/2));
       @include font-size(14);
 
@@ -208,6 +224,7 @@
   // --------------------
   .new-component-template {
     @include clearfix();
+
     margin-bottom: 0;
 
     li {
@@ -222,10 +239,12 @@
     .button-component {
       @include clearfix();
       @include transition(none);
+
       @extend %t-demi-strong;
+
       display: block;
       width: 100%;
-      border: 0px;
+      border: 0;
       padding: 7px $baseline;
       background: $white;
       color: $gray-d3;
@@ -234,7 +253,8 @@
 
       &:hover {
         @include transition(background-color $tmg-f2 linear 0s);
-        background: tint($green,30%);
+
+        background: tint($green, 30%);
         color: $white;
 
         .icon {
@@ -247,7 +267,8 @@
   // basic and advanced problem tabs - also handled by jquery-ui tabs
   // --------------------
   .problem-type-tabs {
-    @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+    @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
+
     list-style-type: none;
     width: 100%;
     border-radius: 0;
@@ -259,9 +280,12 @@
     }
 
     li {
-      @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+      @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
+
       opacity: 0.8;
+
       @include float(left);
+
       display: inline-block;
       width: auto;
       box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 $shadow inset;
@@ -275,8 +299,9 @@
 
       &.ui-state-active {
         @include active;
-        border: 0px;
-        opacity: 1.0;
+
+        border: 0;
+        opacity: 1;
       }
 
       // reset to remove jquery-ui float
@@ -287,6 +312,7 @@
 
     a {
       @extend %t-action3;
+
       display: block;
       padding: ($baseline*0.75) ($baseline*1.25);
       text-align: center;
@@ -315,12 +341,14 @@ $outline-indent-width: $baseline;
 
     .button-new {
       @extend %ui-btn-flat-outline;
+
       padding: ($baseline/2) $baseline;
       display: block;
 
       .icon {
         display: inline-block;
         vertical-align: middle;
+
         @include margin-right($baseline/2);
       }
     }
@@ -331,10 +359,12 @@ $outline-indent-width: $baseline;
 %outline-item-status {
   @extend %t-copy-sub2;
   @extend %t-strong;
+
   color: $gray-d1;
 
   .icon {
     @extend %t-icon5;
+
     @include margin-right($baseline/4);
   }
 }
@@ -360,7 +390,6 @@ $outline-indent-width: $baseline;
     > .section-status,
     > .subsection-status,
     > .unit-status {
-
       .status-message .icon {
         color: $color-staff-only;
       }
@@ -374,7 +403,6 @@ $outline-indent-width: $baseline;
     > .section-status,
     > .subsection-status,
     > .unit-status {
-
       .status-message .icon {
         color: $color-gated;
       }
@@ -388,7 +416,6 @@ $outline-indent-width: $baseline;
     > .section-status .status-message,
     > .subsection-status .status-message,
     > .unit-status .status-message {
-
       .icon {
         color: $color-warning;
       }
@@ -437,8 +464,10 @@ $outline-indent-width: $baseline;
   // outline: sections
   .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;
+
     border-left: 1px solid $color-draft;
     margin-bottom: $baseline;
     padding: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2);
@@ -483,6 +512,7 @@ $outline-indent-width: $baseline;
     .section-title {
       @extend %t-title5;
       @extend %t-strong;
+
       color: $color-heading-base;
     }
 
@@ -495,6 +525,7 @@ $outline-indent-width: $baseline;
     .status-release,
     .explanatory-message {
       @include transition(opacity $tmg-f2 ease-in-out 0s);
+
       opacity: 0.65;
     }
 
@@ -515,12 +546,14 @@ $outline-indent-width: $baseline;
     }
 
     // STATE: hover/active
-    &:hover, &:active {
+    &:hover,
+    &:active {
 
       // status - release
       > .section-status .status-release,
-        .section-status .explanatory-message{
-        opacity: 1.0;
+      .section-status,
+      .explanatory-message {
+        opacity: 1;
       }
     }
   }
@@ -528,7 +561,9 @@ $outline-indent-width: $baseline;
   // outline: subsections
   .outline-subsection {
     @include transition(border-left-color $tmg-f2 linear 0s);
+
     @extend %outline-complex-item;
+
     margin-bottom: ($baseline/2);
     border: 1px solid $gray-l4;
     border-left: ($baseline/4) solid $color-draft;
@@ -568,18 +603,15 @@ $outline-indent-width: $baseline;
     }
 
     // STATE: hover/active
-    &:hover, &:active {
+    &:hover,
+    &:active {
       box-shadow: 0 1px 1px $shadow-l2;
     }
 
-    // STATE: is-collapsed
-    &.is-collapsed {
-
-    }
-
     // header - title
     .subsection-title {
       @extend %t-title6;
+
       color: $color-heading-base;
     }
 
@@ -589,39 +621,45 @@ $outline-indent-width: $baseline;
     }
 
     // STATE: hover/active
-    &:hover, &:active {
+    &:hover,
+    &:active {
 
       // status - release
       > .subsection-status .status-release {
-        opacity: 1.0;
+        opacity: 1;
       }
 
       // status - grading
       > .subsection-status .status-grading {
-        opacity: 1.0;
+        opacity: 1;
       }
 
       > .subsection-status .status-timed-proctored-exam {
-        opacity: 1.0;
+        opacity: 1;
       }
 
       > .subsection-status .status-hide-after-due {
-        opacity: 1.0;
+        opacity: 1;
       }
     }
 
     // status - grading
-    .status-grading, .status-timed-proctored-exam, .status-hide-after-due {
+    .status-grading,
+    .status-timed-proctored-exam,
+    .status-hide-after-due {
       @include transition(opacity $tmg-f2 ease-in-out 0s);
+
       opacity: 0.75;
     }
 
-    .status-grading-value, .status-proctored-exam-value {
+    .status-grading-value,
+    .status-proctored-exam-value {
       display: inline-block;
       vertical-align: middle;
     }
 
-    .status-grading-date, .status-due-date {
+    .status-grading-date,
+    .status-due-date {
       display: inline-block;
       vertical-align: middle;
       margin-left: ($baseline/4);
@@ -631,6 +669,7 @@ $outline-indent-width: $baseline;
   // outline: units
   .outline-unit {
     @extend %outline-complex-item;
+
     margin-bottom: ($baseline/2);
     border: 1px solid $gray-l4;
     padding: ($baseline/4) ($baseline/2);
@@ -638,6 +677,7 @@ $outline-indent-width: $baseline;
     // header - title
     .unit-title {
       @extend %t-title7;
+
       color: $color-heading-base;
     }
 
@@ -646,12 +686,13 @@ $outline-indent-width: $baseline;
     }
 
     // STATE: hover/active
-    &:hover, &:active {
+    &:hover,
+    &:active {
       box-shadow: 0 1px 1px $shadow-l2;
 
       // status - release
       .unit-status .status-release {
-        opacity: 1.0;
+        opacity: 1;
       }
     }
   }
@@ -663,6 +704,7 @@ $outline-indent-width: $baseline;
   // outline: sections
   .outline-section {
     @extend %outline-simple-item;
+
     margin-bottom: $baseline;
     padding: ($baseline/2);
 
@@ -670,6 +712,7 @@ $outline-indent-width: $baseline;
     .section-title {
       @extend %t-title5;
       @extend %t-strong;
+
       color: $color-heading-base;
     }
 
@@ -681,12 +724,14 @@ $outline-indent-width: $baseline;
     // status - release
     .status-release {
       @include transition(opacity $tmg-f2 ease-in-out 0s);
+
       opacity: 0.65;
     }
 
     // status - grading
     .status-grading {
       @include transition(opacity $tmg-f2 ease-in-out 0s);
+
       opacity: 0.65;
     }
 
@@ -721,12 +766,14 @@ $outline-indent-width: $baseline;
   // outline: subsections
   .outline-subsection {
     @extend %outline-simple-item;
+
     margin-bottom: ($baseline/2);
     padding: ($baseline/2);
 
     // header - title
     .subsection-title {
       @extend %t-title6;
+
       color: $color-heading-base;
     }
 
@@ -739,12 +786,14 @@ $outline-indent-width: $baseline;
   // outline: units
   .outline-unit {
     @extend %outline-simple-item;
+
     margin-bottom: ($baseline/4);
     padding: ($baseline/4) ($baseline/2);
 
     // header - title
     .unit-title {
       @extend %t-title7;
+
       color: $color-heading-base;
     }
 
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index 3e436ca0b8..4fae675787 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -3,17 +3,10 @@
 
 // common
 nav {
-
-  ol, ul {
+  ol,
+  ul {
     @extend %cont-no-list;
   }
-
-  .nav-item {
-
-    a {
-
-    }
-  }
 }
 
 // ====================
@@ -26,9 +19,10 @@ nav {
 .nav-skip,
 .transcript-skip {
   @include font-size(13);
+
   display: inline-block;
   position: absolute;
-  left: 0px;
+  left: 0;
   top: -($baseline*30);
   overflow: hidden;
   background: $white;
@@ -49,16 +43,16 @@ nav {
 
 // dropdown
 .nav-dd {
-
   .title {
-
-    .label, .fa-caret-down {
+    .label,
+    .fa-caret-down {
       display: inline-block;
       vertical-align: middle;
     }
 
     .ui-toggle-dd {
       @include transition(all $tmg-f2 ease-in-out 0s);
+
       margin: 0;
       display: inline-block;
       vertical-align: middle;
@@ -66,7 +60,6 @@ nav {
 
     // dropped down state
     &.is-selected {
-
       .ui-toggle-dd {
         @include transform(rotate(-180deg));
         @include transform-origin(50% 50%);
@@ -77,10 +70,6 @@ nav {
   .nav-item {
     position: relative;
 
-    &:hover {
-
-    }
-
     &.nav-course-settings {
       .wrapper-nav-sub {
         width: ($baseline*9);
@@ -90,9 +79,10 @@ nav {
 
   .wrapper-nav-sub {
     @include transition(opacity $tmg-f2 ease-in-out 0s);
+
     position: absolute;
     top: ($baseline*2.5);
-    opacity: 0.0;
+    opacity: 0;
     pointer-events: none;
     width: ($baseline*8);
     overflow: hidden;
@@ -101,7 +91,7 @@ nav {
 
     // dropped down state
     &.is-shown {
-      opacity: 1.0;
+      opacity: 1;
       pointer-events: auto;
       overflow: visible;
       height: auto;
@@ -110,7 +100,9 @@ nav {
 
   .nav-sub {
     border-radius: 2px;
+
     @include box-sizing(border-box);
+
     box-shadow: 0 1px 1px $shadow-l1;
     position: relative;
     width: 100%;
@@ -118,7 +110,8 @@ nav {
     padding: ($baseline/2) ($baseline*0.75);
     background: $white;
 
-    &:after, &:before {
+    &::after,
+    &::before {
       bottom: 100%;
       border: solid transparent;
       content: " ";
@@ -129,13 +122,13 @@ nav {
     }
 
     // ui triangle/nub
-    &:after {
+    &::after {
       border-color: rgba(255, 255, 255, 0);
       border-bottom-color: $white;
       border-width: 10px;
     }
 
-    &:before {
+    &::before {
       border-color: rgba(178, 178, 178, 0);
       border-bottom-color: $gray-l3;
       border-width: 11px;
@@ -144,6 +137,7 @@ nav {
     .nav-item {
       @extend %t-action3;
       @extend %t-regular;
+
       display: block;
       margin: 0 0 ($baseline/4) 0;
       border-bottom: 1px solid $gray-l5;
@@ -158,7 +152,8 @@ nav {
       a {
         display: block;
 
-        &:hover, &:active {
+        &:hover,
+        &:active {
           color: $uxpl-blue-base;
         }
       }
@@ -167,7 +162,6 @@ nav {
 
   // CASE: left-hand side arrow/dd
   &.ui-left {
-
     .wrapper-nav-sub {
       left: 0;
     }
@@ -176,12 +170,12 @@ nav {
       @include text-align(left);
 
       // ui triangle/nub
-      &:after {
+      &::after {
         left: $baseline;
         margin-left: -10px;
       }
 
-      &:before {
+      &::before {
         left: $baseline;
         margin-left: -11px;
       }
@@ -190,7 +184,6 @@ nav {
 
   // CASE: right-hand side arrow/dd
   &.ui-right {
-
     .wrapper-nav-sub {
       @include left(none);
       @include right(0);
@@ -199,13 +192,15 @@ nav {
     .nav-sub {
 
       // ui triangle/nub
-      &:after {
+      &::after {
         @include right($baseline);
+
         margin-right: -10px;
       }
 
-      &:before {
+      &::before {
         @include right($baseline);
+
         margin-right: -11px;
       }
     }
diff --git a/cms/static/sass/elements/_pagination.scss b/cms/static/sass/elements/_pagination.scss
index c7e7e67cc7..b0d03858e7 100644
--- a/cms/static/sass/elements/_pagination.scss
+++ b/cms/static/sass/elements/_pagination.scss
@@ -3,6 +3,7 @@
 
 %pagination {
   @include clearfix();
+
   display: inline-block;
   width: flex-grid(3, 12);
 
@@ -24,6 +25,7 @@
 
   .nav-link {
     @include transition(all $tmg-f2 ease-in-out 0s);
+
     display: block;
     border: 0;
     padding: ($baseline/4) ($baseline*0.75);
@@ -65,6 +67,7 @@
   .total-pages {
     @extend %t-copy-base;
     @extend %t-strong;
+
     width: ($baseline*2.5);
     margin: 0 ($baseline*0.75);
     padding: ($baseline/4);
@@ -74,19 +77,23 @@
 
   .current-page {
     @extend %ui-depth1;
+
     position: absolute;
+
     @include left(-($baseline/4));
   }
 
   .page-divider {
     @extend %t-title4;
     @extend %t-regular;
+
     vertical-align: middle;
     color: $gray;
   }
 
   .pagination-form {
     @extend %ui-depth2;
+
     position: relative;
 
     .page-number-label,
@@ -96,6 +103,7 @@
 
     .page-number-input {
       @include transition(all $tmg-f2 ease-in-out 0s);
+
       border: 1px solid transparent;
       border-bottom: 1px dotted $gray-l2;
       border-radius: 0;
@@ -110,7 +118,8 @@
       &:focus {
         // borrowing the base input focus styles to match overall app
         @include linear-gradient($paleYellow, tint($paleYellow, 90%));
-        opacity: 1.0;
+
+        opacity: 1;
         box-shadow: 0 0 3px $shadow-d1 inset;
         background-color: $white;
         border: 1px solid transparent;
diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss
index 3c96fa328a..34b0f2d4c6 100644
--- a/cms/static/sass/elements/_sock.scss
+++ b/cms/static/sass/elements/_sock.scss
@@ -3,6 +3,7 @@
 
 .wrapper-sock {
   @include clearfix();
+
   position: relative;
   margin: ($baseline*2) 0 0 0;
   border-top: 1px solid $gray-l4;
@@ -10,7 +11,9 @@
 
   .wrapper-inner {
     @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
+
     @extend %ui-depth0;
+
     display: none;
     width: 100% !important;
     border-bottom: 1px solid $white;
@@ -20,6 +23,7 @@
   // sock - actions
   .list-cta {
     @extend %ui-depth1;
+
     position: absolute;
     top: -($baseline*0.75);
     width: 100%;
@@ -29,12 +33,14 @@
     .cta-show-sock {
       @extend %ui-btn-pill;
       @extend %t-action4;
+
       background: $gray-l5;
       padding: ($baseline/2) $baseline;
       color: $gray-d2;
 
       .icon {
         @extend %t-icon6;
+
         @include margin-right($baseline/4);
       }
 
@@ -48,7 +54,9 @@
   // sock - additional help
   .sock {
     @include clearfix();
+
     @extend %t-copy-sub2;
+
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
@@ -58,25 +66,26 @@
 
     // support body
     header {
-
       .title {
         @extend %t-title4;
       }
-
     }
 
     // shared elements
-    .support, .feedback {
+    .support,
+    .feedback {
       @include box-sizing(border-box);
 
       .title {
         @extend %t-title6;
+
         color: $white;
         margin-bottom: ($baseline/2);
       }
 
       .copy {
         @extend %t-copy-sub2;
+
         margin: 0 0 $baseline 0;
       }
 
@@ -86,6 +95,7 @@
         .action-item {
           @include float(left);
           @include margin-right($baseline/2);
+
           margin-bottom: ($baseline/2);
 
           &:last-child {
@@ -94,17 +104,16 @@
 
           .action {
             @extend %t-action4;
+
             display: block;
 
             .icon {
               @extend %t-icon4;
+
               vertical-align: middle;
+
               @include margin-right($baseline/4);
             }
-
-            &:hover, &:active {
-
-            }
           }
 
           .tip {
@@ -121,22 +130,22 @@
 
     // studio support content
     .support {
-      width: flex-grid(8,12);
+      width: flex-grid(8, 12);
       float: left;
       margin-right: flex-gutter();
 
       .action-item {
-        width: flexgrid(4,8);
+        width: flexgrid(4, 8);
       }
     }
 
     // studio feedback content
     .feedback {
-      width: flex-grid(4,12);
+      width: flex-grid(4, 12);
       float: left;
 
       .action-item {
-        width: flexgrid(4,4);
+        width: flexgrid(4, 4);
       }
     }
   }
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 239ddb8305..cb161eb75f 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -4,13 +4,16 @@
 // messages
 .message {
   @extend %t-copy-sub1;
+
   display: block;
 }
 
 .message-status {
   @include border-top-radius(2px);
   @include box-sizing(border-box);
+
   @extend %t-strong;
+
   display: none;
   border-bottom: 2px solid $yellow-d2;
   margin: 0 0 $baseline 0;
@@ -20,6 +23,7 @@
 
   .feedback-symbol {
     @extend %t-icon5;
+
     position: relative;
     top: 1px;
     display: inline-block;
@@ -45,7 +49,9 @@
 // ====================
 
 // shared
-.wrapper-notification, .wrapper-alert, .prompt {
+.wrapper-notification,
+.wrapper-alert,
+.prompt {
   @include box-sizing(border-box);
 
   .copy {
@@ -53,7 +59,9 @@
   }
 }
 
-.wrapper-notification, .wrapper-alert, .prompt {
+.wrapper-notification,
+.wrapper-alert,
+.prompt {
   background: $gray-d3;
 
   .copy {
@@ -64,7 +72,6 @@
     }
 
     .nav-actions {
-
       .action-primary {
         color: $gray-d4;
       }
@@ -73,72 +80,76 @@
 }
 
 .page-banner {
-    max-width: $fg-max-width;
-    margin: 0 auto;
+  max-width: $fg-max-width;
+  margin: 0 auto;
 
-    .user-messages {
-        padding-top: $baseline;
+  .user-messages {
+    padding-top: $baseline;
 
-        // Hack: force override the global important rule
-        // that courseware links don't have an underline.
-        a:hover {
-            color: $link-color;
-            text-decoration: underline !important;
-        }
+    // Hack: force override the global important rule
+    // that courseware links don't have an underline.
+    a:hover {
+      color: $link-color;
+      text-decoration: underline !important;
+    }
+  }
+
+  .alert {
+    margin-bottom: $baseline !important;
+    padding: $baseline;
+    border: 1px solid;
+
+    .icon-alert {
+      margin-right: $baseline / 4;
     }
 
-    .alert {
-        margin-bottom: $baseline !important;
-        padding: $baseline;
-        border: 1px solid;
-
-        .icon-alert {
-            margin-right: $baseline / 4;
-        }
-
-        &.alert-info {
-            color: $state-info-text;
-            background-color: $state-info-bg;
-            border-color: $state-info-border;
-            box-shadow: none;
-        }
-
-        &.alert-success {
-            color: $state-success-text;
-            background-color: $state-success-bg;
-            border-color: $state-success-border;
-            box-shadow: none;
-        }
-
-        &.alert-warning {
-            color: $state-warning-text;
-            background-color: $state-warning-bg;
-            border-color: $state-warning-border;
-            box-shadow: none;
-        }
-
-        &.alert-danger {
-            color: $state-danger-text;
-            background-color: $state-danger-bg;
-            border-color: $state-danger-border;
-            box-shadow: none;
-        }
+    &.alert-info {
+      color: $state-info-text;
+      background-color: $state-info-bg;
+      border-color: $state-info-border;
+      box-shadow: none;
     }
+
+    &.alert-success {
+      color: $state-success-text;
+      background-color: $state-success-bg;
+      border-color: $state-success-border;
+      box-shadow: none;
+    }
+
+    &.alert-warning {
+      color: $state-warning-text;
+      background-color: $state-warning-bg;
+      border-color: $state-warning-border;
+      box-shadow: none;
+    }
+
+    &.alert-danger {
+      color: $state-danger-text;
+      background-color: $state-danger-bg;
+      border-color: $state-danger-border;
+      box-shadow: none;
+    }
+  }
 }
 
-.alert, .notification, .prompt {
+.alert,
+.notification,
+.prompt {
 
   // types - confirm
   &.confirm {
-
     .nav-actions .action-primary {
       @include blue-button();
+
       @extend %t-action4;
+
       border-color: $blue-d2;
     }
 
     button {
       @extend %btn-no-style;
+
       color: $blue;
 
       &:hover {
@@ -149,16 +160,18 @@
 
   // types - warning
   &.warning {
-
     .nav-actions .action-primary {
       @include orange-button();
+
       @extend %t-action4;
+
       border-color: $orange-d2;
       color: $gray-d4;
     }
 
     button {
       @extend %btn-no-style;
+
       color: $orange;
 
       &:hover {
@@ -169,15 +182,17 @@
 
   // types - error
   &.error {
-
     .nav-actions .action-primary {
       @include red-button();
+
       @extend %t-action4;
+
       border-color: $red-d2;
     }
 
     button {
       @extend %btn-no-style;
+
       color: $red-l1;
 
       &:hover {
@@ -188,15 +203,17 @@
 
   // types - announcement
   &.announcement {
-
     .nav-actions .action-primary {
       @include blue-button();
+
       @extend %t-action4;
+
       border-color: $blue-d2;
     }
 
     button {
       @extend %btn-no-style;
+
       color: $blue;
 
       &:hover {
@@ -207,15 +224,17 @@
 
   // types - confirmation
   &.confirmation {
-
     .nav-actions .action-primary {
       @include green-button();
+
       @extend %t-action4;
+
       border-color: $green-d2;
     }
 
     button {
       @extend %btn-no-style;
+
       color: $green;
 
       &:hover {
@@ -226,15 +245,17 @@
 
   // types - step required
   &.step-required {
-
     .nav-actions .action-primary {
       @include pink-button();
+
       @extend %t-action4;
+
       border-color: $pink-d2;
     }
 
     button {
       @extend %btn-no-style;
+
       color: $pink;
 
       &:hover {
@@ -247,7 +268,9 @@
 // prompts
 .wrapper-prompt {
   @extend %ui-depth5;
+
   @include transition(all $tmg-f3 ease-in-out  0s);
+
   position: fixed;
   top: 0;
   background: $black-t1;
@@ -255,7 +278,7 @@
   height: 100%;
   text-align: center;
 
-  &:before {
+  &::before {
     content: '';
     display: inline-block;
     height: 100%;
@@ -270,6 +293,7 @@
     vertical-align: middle;
     width: $baseline*17.5;
     border: 4px solid $black;
+
     @include text-align(left);
 
     .copy {
@@ -285,6 +309,7 @@
 
       .nav-item {
         display: inline-block;
+
         @include margin-right($baseline*0.75);
 
         &:last-child {
@@ -305,7 +330,6 @@
 
   // types of prompts - error
   .prompt.error {
-
     .feedback-symbol {
       color: $red-l1;
     }
@@ -317,7 +341,6 @@
 
   // types of prompts - confirmation
   .prompt.confirmation {
-
     .feedback-symbol {
       color: $green;
     }
@@ -329,7 +352,6 @@
 
   // types of prompts - error
   .prompt.warning {
-
     .feedback-symbol {
       color: $orange;
     }
@@ -345,7 +367,9 @@
 // notifications
 .wrapper-notification {
   @extend %ui-depth5;
+
   @include clearfix();
+
   box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
   position: fixed;
   bottom: 0;
@@ -383,6 +407,7 @@
   // shorter/status notifications
   &.wrapper-notification-status {
     @include border-top-radius(3px);
+
     right: ($baseline);
     width: auto;
     border: 4px solid $black;
@@ -392,11 +417,12 @@
     .notification {
       @include box-sizing(border-box);
       @include clearfix();
+
       width: 100%;
       max-width: none;
-      min-width: none;
 
-      .feedback-symbol, .copy {
+      .feedback-symbol,
+      .copy {
         float: none;
         display: inline-block;
         vertical-align: middle;
@@ -408,16 +434,13 @@
         margin-right: ($baseline/4);
         line-height: 3rem;
       }
-
-      .copy {
-
-      }
     }
   }
 
   // help notifications
   &.wrapper-notification-help {
     @include border-top-radius(3px);
+
     width: ($baseline*14);
     right: ($baseline);
     border: 4px solid $black;
@@ -427,6 +450,7 @@
     .notification {
       @include box-sizing(border-box);
       @include clearfix();
+
       width: 100%;
       max-width: none;
       min-width: none;
@@ -450,6 +474,7 @@
 .notification {
   @include box-sizing(border-box);
   @include clearfix();
+
   margin: 0 auto;
   width: flex-grid(12);
   max-width: $fg-max-width;
@@ -458,7 +483,8 @@
     @extend %t-strong;
   }
 
-  .feedback-symbol, .copy {
+  .feedback-symbol,
+  .copy {
     float: left;
     display: inline-block;
     vertical-align: middle;
@@ -466,7 +492,9 @@
 
   .feedback-symbol {
     @include transition (color $tmg-f1 ease-in-out 0s);
+
     @extend %t-icon3;
+
     width: flex-grid(1, 12);
     height: ($baseline*1.25);
     margin-top: ($baseline/4);
@@ -477,11 +505,13 @@
 
   .copy {
     @extend %t-copy-sub1;
+
     width: flex-grid(10, 12);
     color: $gray-l2;
 
     .title {
       @extend %t-title7;
+
       margin-bottom: 0;
       color: $white;
     }
@@ -489,25 +519,28 @@
 
   // with actions
   &.has-actions {
-
     .feedback-symbol {
       width: flex-grid(1, 12);
     }
 
     .copy {
       width: flex-grid(7, 12);
+
       @include margin-right(flex-gutter());
     }
 
     .nav-actions {
       width: flex-grid(4, 12);
+
       @include float(left);
+
       margin-top: ($baseline/4);
       text-align: right;
 
       .nav-item {
         display: inline-block;
         vertical-align: middle;
+
         @include margin-right($baseline/2);
 
         &:last-child {
@@ -518,18 +551,18 @@
 
     .action-primary {
       @include blue-button();
+
       @extend %t-strong;
+
       border-color: $blue-d2;
     }
 
     .action-secondary {
-
       @extend %t-action4;
     }
   }
 
   &.confirmation {
-
     .copy {
       margin-top: ($baseline/5);
     }
@@ -542,8 +575,10 @@
 
     .feedback-symbol {
       @include animation(rotateCW $tmg-s3 linear infinite);
+
       width: 25px;
       margin: -4px 10px 0 0;
+
       @include transform-origin(52% 60%);
     }
 
@@ -566,7 +601,9 @@
 // alerts
 .wrapper-alert {
   @extend %ui-depth2;
+
   @include box-sizing(border-box);
+
   box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
   position: relative;
   overflow: hidden;
@@ -628,6 +665,7 @@
 .alert {
   @include box-sizing(border-box);
   @include clearfix();
+
   margin: 0 auto;
   width: flex-grid(12);
   max-width: $fg-max-width;
@@ -638,13 +676,16 @@
     @extend %t-strong;
   }
 
-  .feedback-symbol, .copy {
+  .feedback-symbol,
+  .copy {
     float: left;
   }
 
   .feedback-symbol {
     @include transition (color $tmg-f1 ease-in-out 0s);
+
     @extend %t-icon3;
+
     width: flex-grid(1, 12);
     margin: ($baseline/4) flex-gutter() 0 0;
     text-align: right;
@@ -657,6 +698,7 @@
 
     .title {
       @extend %t-title7;
+
       margin-bottom: 0;
       color: $white;
     }
@@ -664,46 +706,50 @@
 
   // with actions
   &.has-actions {
-
     .feedback-symbol {
       width: flex-grid(1, 12);
     }
 
-  	.copy {
-  		width: flex-grid(7, 12);
-  		@include margin-right(flex-gutter());
-  	}
+    .copy {
+      width: flex-grid(7, 12);
+
+      @include margin-right(flex-gutter());
+    }
+
+    .nav-actions {
+      width: flex-grid(4, 12);
 
-  	.nav-actions {
-  	  width: flex-grid(4, 12);
       @include float(left);
+
       margin-top: ($baseline/2);
-  	  text-align: right;
+      text-align: right;
 
-  	  .nav-item {
-  	    display: inline-block;
-  	    vertical-align: middle;
-  	    @include margin-right($baseline/2);
+      .nav-item {
+        display: inline-block;
+        vertical-align: middle;
 
-  	    &:last-child {
-  	      @include margin-right(0);
-  	    }
+        @include margin-right($baseline/2);
 
-       .action-primary {
-        @extend %t-action4;
-        @extend %t-strong;
-      }
+        &:last-child {
+          @include margin-right(0);
+        }
 
-      .action-secondary {
-        @extend %t-action4;
+        .action-primary {
+          @extend %t-action4;
+          @extend %t-strong;
+        }
+
+        .action-secondary {
+          @extend %t-action4;
+        }
       }
     }
   }
-}
 
   // with cancel
   .action-alert-close {
     @include border-bottom-radius(($baseline/5));
+
     position: absolute;
     top: -($baseline/10);
     right: $baseline;
@@ -717,6 +763,7 @@
 
     .icon {
       @extend %t-icon6;
+
       color: $white;
       width: auto;
       margin: 0;
@@ -730,19 +777,21 @@
 
   // with dismiss (to sunset action-alert-clos)
   .action-dismiss {
-
     .button {
       @extend %btn-secondary-white;
-      padding:($baseline/4) ($baseline/2);
+
+      padding: ($baseline/4) ($baseline/2);
     }
 
-    .icon,.button-copy {
+    .icon,
+    .button-copy {
       display: inline-block;
       vertical-align: middle;
     }
 
     .icon {
       @extend %t-icon4;
+
       margin-right: ($baseline/4);
     }
 
@@ -761,15 +810,10 @@
   .wrapper-prompt {
     visibility: hidden;
     pointer-events: none;
-
-    .prompt {
-
-    }
   }
 
   // prompt showing
   &.prompt-is-shown {
-
     .wrapper-prompt.is-shown {
       visibility: visible;
       pointer-events: auto;
@@ -782,18 +826,13 @@
 
   // prompt hiding
   &.prompt-is-hiding {
-
     .wrapper-prompt {
-
       .prompt {
         @include animation(bounceOut $tmg-f1 ease-in-out 1);
       }
     }
   }
 
-  // alert showing/hiding done by jQuery
-  .wrapper-alert { }
-
   // notification showing/hiding
   .wrapper-notification {
     bottom: -($ui-notification-height);
@@ -815,9 +854,9 @@
 
 // block-level messages and validation
 .wrapper-message {
-
   .message {
     @extend %t-copy-sub1;
+
     background-color: $gray-d2;
     padding: ($baseline/2) ($baseline*0.75);
     color: $white;
@@ -828,6 +867,7 @@
 
     &.information {
       @extend %t-copy-sub1;
+
       background-color: $gray-l5;
       color: $gray-d2;
     }
@@ -879,16 +919,20 @@
 
 // temporary
 body.uxdesign.alerts {
-
-  .content-primary, .content-supplementary {
+  .content-primary,
+  .content-supplementary {
     @include box-sizing(border-box);
+
     float: left;
   }
 
   .content-primary {
     @extend %ui-window;
+
     width: flex-grid(12, 12);
+
     @include margin-right(flex-gutter());
+
     padding: $baseline ($baseline*1.5);
 
     > section {
@@ -900,9 +944,9 @@ body.uxdesign.alerts {
     }
 
     ul {
-
       li {
         @include clearfix();
+
         width: flex-grid(12, 12);
         margin-bottom: ($baseline/4);
         border-bottom: 1px solid $gray-l4;
@@ -916,7 +960,9 @@ body.uxdesign.alerts {
 
         a {
           @include float(left);
+
           width: flex-grid(5, 12);
+
           @include margin-right(flex-gutter());
         }
       }
@@ -928,21 +974,21 @@ body.uxdesign.alerts {
 
 // artifact styles
 .main-wrapper {
-
   .alert {
     @extend %t-copy-sub1;
+
     padding: 15px 20px;
     margin-bottom: ($baseline*1.5);
     border-radius: 3px;
     border: 1px solid #edbd3c;
-    border-radius: 3px;
     background: #fbf6e1;
     // background: #edbd3c;
     @include clearfix();
 
     .alert-message {
       @include float(left);
-      margin: 4px 0 0 0;
+
+      margin: 4px 0 0;
       color: $gray-d3;
     }
 
@@ -980,6 +1026,7 @@ body.error {
   h1 {
     @extend %t-title1;
     @extend %t-light;
+
     float: none;
     margin: 0;
     color: $gray-d3;
@@ -987,12 +1034,15 @@ body.error {
 
   .description {
     @extend %t-copy-lead2;
+
     margin-bottom: 50px;
   }
 
   .back-button {
     @include blue-button();
+
     @extend %t-action1;
+
     padding: 14px 40px 18px;
   }
 }
diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss
index 1346caa49c..5ff9a0f48a 100644
--- a/cms/static/sass/elements/_system-help.scss
+++ b/cms/static/sass/elements/_system-help.scss
@@ -4,6 +4,7 @@
 // view introductions - common greeting/starting points for the UI
 .content .introduction {
   @include box-sizing(border-box);
+
   margin-bottom: $baseline;
 
   .title {
@@ -25,19 +26,25 @@
 
     .copy {
       @include float(left);
-      width: flex-grid(8,12);
+
+      width: flex-grid(8, 12);
+
       @include margin-right(flex-gutter());
     }
 
     .nav-introduction-supplementary {
       @extend %t-copy-sub2;
+
       @include float(right);
-      width: flex-grid(4,12);
+
+      width: flex-grid(4, 12);
       display: block;
+
       @include text-align(right);
 
       .icon {
         @extend %t-action3;
+
         display: inline-block;
         vertical-align: middle;
         margin-right: ($baseline/4);
@@ -49,6 +56,7 @@
 // notices - in-context: to be used as notices to users within the context of a form/action
 .notice-incontext {
   @extend %ui-well;
+
   border-radius: ($baseline/10);
   position: relative;
   overflow: hidden;
@@ -57,12 +65,15 @@
   .title {
     @extend %t-title6;
     @extend %t-strong;
+
     margin-bottom: ($baseline/2);
   }
 
   .copy {
     @extend %t-copy-sub1;
+
     @include transition(opacity $tmg-f2 ease-in-out 0s);
+
     opacity: 0.75;
     margin-bottom: $baseline;
 
@@ -76,7 +87,6 @@
   }
 
   &.has-status {
-
     .status-indicator {
       position: absolute;
       top: 0;
@@ -84,20 +94,15 @@
       display: block;
       width: 100%;
       height: ($baseline/4);
-      opacity: 0.40;
+      opacity: 0.4;
     }
   }
 
   // CASE: notice has actions {
   &.has-actions {
-
     .list-actions {
       margin-top: ($baseline*0.75);
 
-      .action-item {
-
-      }
-
       .action-primary {
         @extend %btn-primary-blue;
         @extend %t-action3;
@@ -107,7 +112,6 @@
 
   // list of notices all in one
   &.list-notices {
-
     .notice-item {
       margin-bottom: $baseline;
       border-bottom: 1px solid $gray-l3;
@@ -152,13 +156,7 @@
   }
 
   &.has-actions {
-
     .list-actions {
-
-      .action-item {
-
-      }
-
       .action-primary {
         @extend %btn-primary-blue;
         @extend %t-action3;
@@ -180,13 +178,7 @@
   }
 
   &.has-actions {
-
     .list-actions {
-
-      .action-item {
-
-      }
-
       .action-primary {
         @extend %btn-primary-green;
         @extend %t-action3;
@@ -217,6 +209,7 @@
 // informational bits (rename once UI pattern is further defined)
 .bit {
   @extend %t-copy-sub1;
+
   margin: 0 0 $baseline 0;
   border-bottom: 1px solid $gray-l4;
   padding: 0 0 $baseline 0;
@@ -228,14 +221,17 @@
     padding-bottom: 0;
   }
 
-  h3, .title {
+  h3,
+  .title {
     @extend %t-title7;
     @extend %t-strong;
+
     margin: 0 0 ($baseline/4) 0;
     color: $gray-d2;
   }
 
-  p, .copy {
+  p,
+  .copy {
     margin: 0 0 $baseline 0;
 
     &:last-child {
@@ -246,6 +242,7 @@
   // learn more (aka external help button)
   .external-help-button {
     display: inline-block;
+
     @extend %ui-btn-flat-outline;
     @extend %sizing;
   }
@@ -256,6 +253,7 @@
 
     .action-item {
       @extend %wipe-last-child;
+
       margin-bottom: ($baseline/4);
       border-bottom: 1px dotted $gray-l4;
       padding-bottom: ($baseline/4);
@@ -268,6 +266,7 @@
 
     .item-detail {
       @extend %wipe-last-child;
+
       margin-bottom: ($baseline/4);
       border-bottom: 1px dotted $gray-l4;
       padding-bottom: ($baseline/4);
@@ -275,11 +274,13 @@
   }
 
   // navigation
-  .nav-related, .nav-page {
+  .nav-related,
+  .nav-page {
     @extend %cont-no-list;
 
     .nav-item {
       @extend %wipe-last-child;
+
       margin-bottom: ($baseline/4);
       border-bottom: 1px dotted $gray-l5;
       padding-bottom: ($baseline/4);
diff --git a/cms/static/sass/elements/_tooltip.scss b/cms/static/sass/elements/_tooltip.scss
index 77c42d63de..00fc2f8054 100644
--- a/cms/static/sass/elements/_tooltip.scss
+++ b/cms/static/sass/elements/_tooltip.scss
@@ -1,8 +1,10 @@
 .tooltip {
   @include transition(opacity $tmg-f3 ease-out 0s);
   @include font-size(12);
+
   @extend %t-regular;
   @extend %ui-depth5;
+
   position: absolute;
   top: 0;
   left: 0;
@@ -12,10 +14,11 @@
   line-height: 26px;
   color: $white;
   pointer-events: none;
-  opacity: 0.0;
+  opacity: 0;
 
-  &:after {
+  &::after {
     @include font-size(20);
+
     content: '▾';
     display: block;
     position: absolute;
@@ -24,4 +27,4 @@
     margin-left: -7px;
     color: rgba(0, 0, 0, 0.85);
   }
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/elements/_typography.scss b/cms/static/sass/elements/_typography.scss
index f142e0436e..63b49375c8 100644
--- a/cms/static/sass/elements/_typography.scss
+++ b/cms/static/sass/elements/_typography.scss
@@ -5,22 +5,27 @@
 
 // weights
 %t-ultrastrong {
- font-weight: 700;
+  font-weight: 700;
 }
+
 %t-strong {
- font-weight: 600;
+  font-weight: 600;
 }
+
 %t-demi-strong {
- font-weight: 500;
+  font-weight: 500;
 }
+
 %t-regular {
- font-weight: 400;
+  font-weight: 400;
 }
+
 %t-light {
- font-weight: 300;
+  font-weight: 300;
 }
+
 %t-ultralight {
- font-weight: 200;
+  font-weight: 200;
 }
 
 // headings/titles
@@ -30,12 +35,14 @@
 
 %t-title1 {
   @extend %t-title;
+
   @include font-size(60);
   @include line-height(60);
 }
 
 %t-title2 {
   @extend %t-title;
+
   @include font-size(48);
   @include line-height(48);
 }
@@ -47,36 +54,42 @@
 
 %t-title4 {
   @extend %t-title;
+
   @include font-size(24);
   @include line-height(24);
 }
 
 %t-title5 {
   @extend %t-title;
+
   @include font-size(18);
   @include line-height(18);
 }
 
 %t-title6 {
   @extend %t-title;
+
   @include font-size(16);
   @include line-height(16);
 }
 
 %t-title7 {
   @extend %t-title;
+
   @include font-size(14);
   @include line-height(14);
 }
 
 %t-title8 {
   @extend %t-title;
+
   @include font-size(12);
   @include line-height(12);
 }
 
 %t-title9 {
   @extend %t-title;
+
   @include font-size(11);
   @include line-height(11);
 }
@@ -90,30 +103,35 @@
 
 %t-copy-base {
   @extend %t-copy;
+
   @include font-size(16);
   @include line-height(16);
 }
 
 %t-copy-lead1 {
   @extend %t-copy;
+
   @include font-size(18);
   @include line-height(18);
 }
 
 %t-copy-lead2 {
   @extend %t-copy;
+
   @include font-size(24);
   @include line-height(24);
 }
 
 %t-copy-sub1 {
   @extend %t-copy;
+
   @include font-size(14);
   @include line-height(14);
 }
 
 %t-copy-sub2 {
   @extend %t-copy;
+
   @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 488f7bf172..0b1d4617e0 100644
--- a/cms/static/sass/elements/_uploaded-assets.scss
+++ b/cms/static/sass/elements/_uploaded-assets.scss
@@ -1,10 +1,10 @@
 .wrapper-assets {
-
   .assets-library {
     @include clearfix();
 
     .assets-title {
       @extend %t-strong;
+
       margin-top: ($baseline*2);
       margin-bottom: ($baseline*2);
     }
@@ -15,6 +15,7 @@
 
     .meta {
       @extend %t-copy-sub2;
+
       display: inline-block;
       vertical-align: top;
       width: flex-grid(9, 12);
@@ -36,8 +37,10 @@
       font-size: 80%;
       word-wrap: break-word;
 
-      th, .video-head-col {
+      th,
+      .video-head-col {
         @extend %t-copy-sub2;
+
         background-color: $gray-l5;
         padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
         vertical-align: middle;
@@ -51,6 +54,7 @@
 
         .current-sort {
           @extend %t-strong;
+
           border-bottom: 1px solid $gray-l3;
         }
 
@@ -60,19 +64,23 @@
         }
       }
 
-      td, .video-col {
+      td,
+      .video-col {
         padding: ($baseline/2);
         vertical-align: middle;
         text-align: left;
       }
 
-      tbody, .js-table-body {
+      tbody,
+      .js-table-body {
         box-shadow: 0 2px 2px $shadow-l1;
         border: 1px solid $gray-l4;
         background: $white;
 
-        tr, .video-row {
+        tr,
+        .video-row {
           @include transition(all $tmg-f2 ease-in-out 0s);
+
           border-top: 1px solid $gray-l4;
 
           .name-col {
@@ -116,12 +124,12 @@
           }
         }
 
-      .thumb-col {
-        padding: ($baseline/2) $baseline;
+        .thumb-col {
+          padding: ($baseline/2) $baseline;
 
-        .thumb {
-          width: 100px;
-        }
+          .thumb {
+            width: 100px;
+          }
 
           img {
             width: 100%;
@@ -129,9 +137,9 @@
         }
 
         .name-col {
-
           .title {
             @extend %t-copy-sub1;
+
             display: inline-block;
             max-width: 200px;
             overflow: hidden;
@@ -140,18 +148,23 @@
 
         .date-col {
           @include transition(all $tmg-f2 ease-in-out 0s);
+
           @extend %t-copy-sub2;
+
           color: $gray-d1;
         }
 
         .embed-col {
           @include transition(all $tmg-f2 ease-in-out 0s);
+
           padding-left: ($baseline*0.75);
           color: $gray-d1;
 
           .embeddable-xml-input {
             @include transition(all $tmg-f2 ease-in-out 0s);
+
             @extend %t-copy-sub2;
+
             box-shadow: none;
             border: 1px solid transparent;
             background: none;
diff --git a/cms/static/sass/elements/_vendor.scss b/cms/static/sass/elements/_vendor.scss
index 9795e24693..5418745922 100644
--- a/cms/static/sass/elements/_vendor.scss
+++ b/cms/static/sass/elements/_vendor.scss
@@ -4,6 +4,7 @@
 // JQUI calendar
 .ui-datepicker {
   @extend %t-copy-sub2;
+
   border-color: $darkGrey;
   border-radius: 2px;
   background: $white;
@@ -35,6 +36,7 @@
   .ui-state-default {
     border-color: $mediumGrey;
     color: $blue;
+
     @include transition(none);
 
     &.ui-state-hover {
@@ -79,11 +81,13 @@
   white-space: normal;
 }
 
-.ui-corner-all, .ui-corner-bottom, .ui-corner-left, ui-corner-top, .ui-corner-br, .ui-corner-right {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-left,
+.ui-corner-top,
+.ui-corner-br,
+.ui-corner-right {
+  border-radius: 0;
 }
 
 
@@ -91,12 +95,13 @@
   border: 0;
   background: none;
 }
+
 .ui-widget {
   @extend %t-copy-base;
 }
 
 .ui-widget-header {
-  border:none;
+  border: none;
   background: none;
 }
 
@@ -109,20 +114,20 @@
   padding: 0;
   border: none;
   top: 0;
-  margin: 0;
   float: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
 .ui-tabs-nav {
-
   li {
     top: 0;
     margin: 0;
   }
+
   a {
     @extend %t-regular;
+
     float: none;
   }
 }
@@ -133,27 +138,24 @@
 
 // reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
 .problem-type-tabs {
-  border:none;
+  border: none;
   list-style-type: none;
   width: 100%;
-  @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+
+  @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
   //background-color: $lightBluishGrey;
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
 
   li:first-child {
     margin-left: $baseline;
   }
+
   li {
     opacity: 0.8;
 
-    &:ui-state-active {
-      @extend %t-regular;
-      background-color: rgba(255, 255, 255, .3);
-      opacity: 1.0;
-    }
     a:focus {
       outline: none;
-      border: 0px;
+      border: 0;
     }
   }
 }
@@ -165,7 +167,9 @@
   margin: 0;
   padding: 0;
   cursor: default;
+
   @include linear-gradient($gray-l5, $white);
+
   border-right: 1px solid $gray-l2;
   border-bottom: 1px solid $gray-l2;
   border-left: 1px solid $gray-l2;
@@ -173,7 +177,7 @@
   box-shadow: inset 0 1px 2px $shadow-l1;
   color: $color-copy-emphasized;
 
-  li.ui-menu-item{
+  li.ui-menu-item {
     padding: 0;
     margin: 0;
 
@@ -181,10 +185,9 @@
       color: $color-copy-emphasized;
     }
 
-    a.ui-state-focus{
+    a.ui-state-focus {
       border: none;
       background-color: $blue;
-      background: $blue;
       color: $white;
     }
   }
diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss
index 8083983945..2a3e01252a 100644
--- a/cms/static/sass/elements/_xblocks.scss
+++ b/cms/static/sass/elements/_xblocks.scss
@@ -24,16 +24,18 @@
   border: 1px solid $gray-l4;
   border-radius: ($baseline/5);
   background: $white;
-  box-shadow: 0px 1px 1px $shadow-l1;
+  box-shadow: 0 1px 1px $shadow-l1;
 
   // STATE: hover/focus
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     box-shadow: 0 0 1px $shadow;
   }
 
   // UI: xblock header primary for main title and xblock actions
   .xblock-header-primary {
     @include box-sizing(border-box);
+
     border-bottom: 1px solid $gray-l4;
     border-radius: ($baseline/5) ($baseline/5) 0 0;
     min-height: ($baseline*2.5);
@@ -44,16 +46,19 @@
 
     .header-details {
       @extend %cont-truncated;
+
       width: 50%;
       vertical-align: middle;
 
       .xblock-display-name {
         @extend %t-copy-lead1;
+
         font-weight: font-weight(semi-bold);
       }
 
       .xblock-group-visibility-label {
         @extend %t-copy-sub1;
+
         white-space: normal;
         font-weight: font-weight(semi-bold);
         color: $gray;
@@ -62,6 +67,7 @@
 
     .header-actions {
       width: 49%;
+
       @include text-align(right);
     }
   }
@@ -92,6 +98,7 @@
 
         .action-button {
           @include transition(all $tmg-f3 linear 0s);
+
           display: block;
           width: auto;
           height: ($baseline*1.5);
@@ -130,7 +137,9 @@
   .xmodule_display.xmodule_HtmlModule .xblock-license,
   .xmodule_VideoModule .xblock-license {
     @include text-align(right);
+
     @extend %t-title7;
+
     display: block;
     width: auto;
     border-top: 1px solid $gray-l3;
@@ -170,8 +179,10 @@
     .meta-wrap {
       margin: $baseline ($baseline/2);
     }
+
     .meta {
       @extend %t-copy-sub2;
+
       display: inline-block;
       vertical-align: top;
       width: flex-grid(9, 12);
@@ -201,6 +212,7 @@
   // internal headings for problems and video components
   h2 {
     @extend %t-title5;
+
     margin: ($baseline*1.5) ($baseline*2) ($baseline*1.5) 0;
     color: $gray;
     letter-spacing: 1px;
@@ -220,13 +232,13 @@
     // CASE: xblock is collapsible
     &.is-collapsible,
     &.xblock-type-container {
-
       .icon {
         font-style: normal;
       }
 
       .expand-collapse {
         @extend %expand-collapse;
+
         margin: 0 ($baseline/4);
         height: ($baseline*1.25);
         width: $baseline;
@@ -237,7 +249,6 @@
       }
 
       .action-view {
-
         .action-button {
           transition: none;
         }
@@ -254,9 +265,9 @@
   // ====================
   // xblock message area, for general information as well as validation
   .wrapper-xblock-message {
-
     .xblock-message {
       @extend %t-copy-sub1;
+
       background-color: $gray-d2;
       padding: ($baseline*0.75);
       color: $white;
@@ -267,6 +278,7 @@
 
       &.information {
         @extend %t-copy-sub1;
+
         background-color: $gray-l5;
         color: $gray-d2;
       }
@@ -325,7 +337,6 @@
     }
 
     .xblock-message {
-
       &.validation {
         padding-top: ($baseline*0.75);
       }
@@ -348,14 +359,12 @@
     }
 
     .no-container-content {
-
       .xblock-message-list {
         margin: 0;
         list-style-type: none;
         color: $gray-d2;
       }
     }
-
   }
 
   // +Case: Nesting Level
@@ -363,6 +372,7 @@
   // element wrapper level
   &.level-nesting {
     @include transition(all $tmg-f2 linear 0s);
+
     border: 1px solid $gray-l3;
     padding-bottom: $baseline;
 
@@ -377,6 +387,7 @@
 
     .xblock-header-primary {
       @include ui-flexbox();
+
       margin-bottom: 0;
       border-bottom: none;
       background: none;
@@ -398,6 +409,7 @@
   // ====================
   &.level-element {
     @include transition(all $tmg-f2 linear 0s);
+
     box-shadow: none;
 
     &:hover {
@@ -410,10 +422,12 @@
 
     .xblock-header-primary {
       @extend %t-light;
+
       display: flex;
       margin-bottom: 0;
       border-bottom: 1px solid $gray-l4;
       background-color: $gray-l6;
+
       &.is-collapsed {
         border-bottom: 0;
         border-radius: 3px;
@@ -428,7 +442,6 @@
 
     // STATE: container/component with children - abbreviated preview
     &.xblock-type-container {
-
       .xblock-header-primary {
         margin-bottom: 0;
         border-bottom: 0;
@@ -441,11 +454,10 @@
     }
 
     .wrapper-xblock-message {
-
       .xblock-message {
-
         &.information {
           @extend %t-copy-sub2;
+
           padding: 0 $baseline ($baseline*0.75) $baseline;
           color: $gray-l1;
         }
@@ -457,9 +469,9 @@
   // ====================
   // edited experiment groups: active and inactive
   .wrapper-groups {
-
     .title {
       @extend %t-title7;
+
       margin-left: ($baseline/2);
       color: $gray-l1;
     }
@@ -480,7 +492,8 @@
 
       .wrapper-xblock.level-nesting {
         @include transition(all $tmg-f2 linear 0s);
-        opacity: .7;
+
+        opacity: 0.7;
 
         &:hover {
           opacity: 1;
@@ -522,7 +535,9 @@
       @extend %ui-btn-flat-outline;
       @extend %t-action3;
       @extend %t-strong;
+
       @include box-sizing(border-box);
+
       display: inline-block;
       padding: ($baseline/2);
       width: 49%;
@@ -533,7 +548,9 @@
       @extend %ui-btn-non;
       @extend %t-action4;
       @extend %t-strong;
+
       @include box-sizing(border-box);
+
       display: inline-block;
       padding: ($baseline/2);
       width: 49%;
@@ -555,6 +572,7 @@
   //settings-list
   .list-input.settings-list {
     @extend %cont-no-list;
+
     overflow: auto;
     max-height: 400px;
 
@@ -568,7 +586,7 @@
     &::-webkit-scrollbar-thumb {
       border-radius: 8px;
       border: 2px solid $gray-l2;
-      background-color: rgba(0, 0, 0, .5);
+      background-color: rgba(0, 0, 0, 0.5);
     }
 
     //component-setting-entry
@@ -586,12 +604,13 @@
 
 
       // STATE: hover & focus
-      &:hover, &:focus {
-        opacity: 1.0;
+      &:hover,
+      &:focus {
+        opacity: 1;
       }
 
       &.is-set {
-        opacity: 1.0;
+        opacity: 1;
         background-color: $white;
 
         .setting-input {
@@ -600,18 +619,21 @@
       }
     }
 
-    .wrapper-comp-setting, .wrapper-comp-setting-text {
+    .wrapper-comp-setting,
+    .wrapper-comp-setting-text {
       min-width: 300px;
       top: 0;
       vertical-align: top;
-      margin-bottom:5px;
+      margin-bottom: 5px;
       position: relative;
     }
 
     .setting-label {
       @include transition(color $tmg-f2 ease-in-out 0s);
+
       @extend %t-copy-sub1;
       @extend %t-strong;
+
       vertical-align: middle;
       display: inline-block;
       position: relative;
@@ -625,10 +647,14 @@
       }
     }
 
-    input, select, input[type="number"] {
+    input,
+    select,
+    input[type="number"] {
       @include placeholder($gray-l4);
-      @include size(100%,100%);
+      @include size(100%, 100%);
+
       @extend %t-copy-base;
+
       width: 45%;
       min-width: 100px;
       padding: ($baseline/2);
@@ -640,7 +666,7 @@
     //Allows users to copy full value of disabled inputs.
     input.is-disabled {
       text-overflow: clip;
-      opacity: .5;
+      opacity: 0.5;
     }
 
     input[type="number"] {
@@ -652,15 +678,16 @@
       }
 
       &:active {
-        background-color: #FFFCF1;
+        background-color: #fffcf1;
       }
     }
 
     select {
-
       &:focus {
         box-shadow: 0 0 1px $shadow;
+
         @include transition(opacity $tmg-f2 ease-in-out 0s);
+
         background-color: $yellow;
       }
 
@@ -671,6 +698,7 @@
 
     .action.setting-clear {
       @extend %t-action4;
+
       color: $gray;
       width: 25px;
       height: 25px;
@@ -685,7 +713,9 @@
 
       &:hover {
         box-shadow: 0 1px 1px $shadow;
+
         @include transition(opacity $tmg-f2 ease-in-out 0s);
+
         background-color: $blue-s3;
         border: 1px solid $blue-s3;
         color: $white;
@@ -698,8 +728,8 @@
 
     .setting-help {
       @extend %t-copy-sub2;
+
       display: inline-block;
-      font-color: $gray-l6;
       min-width: ($baseline*10);
       vertical-align: top;
     }
@@ -713,7 +743,6 @@
 
     // TYPE: enumerated lists of metadata sets
     .metadata-list-enum {
-
       * {
         @include box-sizing(border-box);
       }
@@ -726,7 +755,8 @@
 
       // inputs and labels
       .wrapper-list-settings {
-        @include size(45%,100%);
+        @include size(45%, 100%);
+
         display: inline-block;
         min-width: ($baseline*5);
 
@@ -756,6 +786,7 @@
         @extend %ui-btn-flat-outline;
         @extend %t-action3;
         @extend %t-strong;
+
         display: block;
         width: 100%;
         padding: ($baseline/2);
@@ -767,7 +798,9 @@
 
       .remove-setting {
         @include transition(color $tmg-f2 ease-in-out);
+
         @extend %t-action1;
+
         display: inline-block;
         background: transparent;
         color: $blue-l3;
@@ -786,8 +819,8 @@
 
       // label
       .setting-label {
-          vertical-align: top;
-          margin-top: ($baseline*0.75);
+        vertical-align: top;
+        margin-top: ($baseline*0.75);
       }
 
       // inputs and labels
@@ -827,6 +860,7 @@
         @extend %ui-btn-flat-outline;
         @extend %t-action3;
         @extend %t-strong;
+
         display: block;
         width: 88%;
         padding: ($baseline/2);
@@ -838,7 +872,9 @@
 
       .remove-setting {
         @include transition(color $tmg-f2 ease-in-out);
+
         @extend %t-action1;
+
         display: inline-block;
         background: transparent;
         color: $blue-l3;
@@ -879,16 +915,14 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
 
 
 .wrapper-xblock {
-
-    .discussion-preview {
-      color: $gray-l1;
-      font-style: italic;
-    }
+  .discussion-preview {
+    color: $gray-l1;
+    font-style: italic;
+  }
 }
 
 // CASE: xblock license settings
 .wrapper-license {
-
   .license-types {
     text-align: center;
     vertical-align: middle;
@@ -900,7 +934,9 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
 
     .action.license-button {
       @include grey-button;
+
       @extend %t-action2;
+
       display: inline-block;
       text-align: center;
       width: 220px;
@@ -923,6 +959,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
     .tip {
       @extend %t-copy-sub2;
     }
+
     .license-options {
       padding-bottom: ($baseline/2);
 
@@ -945,19 +982,22 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
           min-width: auto;
           height: auto;
           border: 0;
-          margin: ($baseline*0.15) 15px 0px;
+          margin: ($baseline*0.15) 15px 0;
         }
 
         .option-name {
           @extend %t-action3;
           @extend %t-strong;
+
           display: inline-block;
           width: 15%;
           vertical-align: top;
           cursor: pointer;
         }
+
         .explanation {
           @extend %t-action4;
+
           display: inline-block;
           width: 75%;
           vertical-align: top;
@@ -966,6 +1006,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
       }
     }
   }
+
   .license-preview a {
     color: $gray;
 
@@ -973,6 +1014,7 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
       color: $ui-link-color;
     }
   }
+
   .list-input.settings-list ul.license-options li {
     // to make sure the padding is correctly overridden
     padding: ($baseline / 2) 0 ($baseline * 0.4);
diff --git a/cms/static/sass/elements/_xmodules.scss b/cms/static/sass/elements/_xmodules.scss
index 07d5670842..34167ee1ef 100644
--- a/cms/static/sass/elements/_xmodules.scss
+++ b/cms/static/sass/elements/_xmodules.scss
@@ -54,6 +54,7 @@
         .collapse-setting {
           @extend %t-action3;
           @extend %t-strong;
+
           display: block;
           width: 100%;
           padding: ($baseline/2);
@@ -93,7 +94,7 @@
 
             &.is-disabled,
             [disabled="disabled"] {
-              opacity: .5;
+              opacity: 0.5;
             }
           }
 
@@ -142,6 +143,7 @@
 
         .transcripts-message-status {
           @extend %t-strong;
+
           color: $green;
 
           &.status-error {
@@ -151,12 +153,14 @@
           .icon,
           [class*=" fa-"] {
             @extend %t-icon4;
+
             margin-right: ($baseline/4);
           }
         }
 
         .transcripts-error-message {
           @extend %t-copy-sub1;
+
           background: $red;
           color: $white;
           padding: ($baseline/3);
@@ -176,6 +180,7 @@
       .action {
         @extend %btn-primary-blue;
         @extend %t-action3;
+
         margin-bottom: ($baseline/2);
       }
     }
@@ -193,6 +198,7 @@
 
     .progress-bar {
       @extend %t-copy-lead1;
+
       display: block;
       height: 30px;
       margin: ($baseline/2) 0;
@@ -233,7 +239,7 @@
         // label
         .setting-label {
           vertical-align: top;
-          margin-top: ($baseline*.25);
+          margin-top: ($baseline*0.25);
         }
 
         // inputs and labels
@@ -256,6 +262,7 @@
 
               .list-settings-buttons {
                 @extend %cont-truncated;
+
                 padding: ($baseline/2) 0;
                 border-bottom: 1px solid $gray-l4;
               }
@@ -277,13 +284,14 @@
 
         .setting-clear.action {
           vertical-align: top;
-          margin: ($baseline*.25) ($baseline*.5) 0;
+          margin: ($baseline*0.25) ($baseline*0.5) 0;
         }
 
         .create-setting {
           @extend %ui-btn-flat-outline;
           @extend %t-action3;
           @extend %t-strong;
+
           display: block;
           padding: ($baseline/2);
 
@@ -296,6 +304,7 @@
           @extend %ui-btn-flat-outline;
           @extend %t-action3;
           @extend %t-strong;
+
           display: inline-block;
           padding: ($baseline/2);
           width: 49%;
@@ -306,6 +315,7 @@
           @extend %ui-btn-non;
           @extend %t-action4;
           @extend %t-strong;
+
           display: inline-block;
           padding: ($baseline/2);
           width: 49%;
@@ -319,7 +329,9 @@
 
         .remove-setting {
           @include transition(color .25s ease-in-out);
+
           @extend %t-action1;
+
           display: inline-block;
           background: transparent;
           color: $blue-l3;
diff --git a/cms/static/sass/partials/cms/base/_variables.scss b/cms/static/sass/partials/cms/base/_variables.scss
index 87b48c01e3..fa19848246 100644
--- a/cms/static/sass/partials/cms/base/_variables.scss
+++ b/cms/static/sass/partials/cms/base/_variables.scss
@@ -47,7 +47,7 @@ $uxpl-light-blue-base: rgb(242, 248, 251) !default
 
 $uxpl-green-base: rgb(0, 129, 0) !default; // wcag2a compliant
 $uxpl-green-hover-active: rgb(0, 155, 0) !default; // wcag2a compliant
-$uxpl-green-dark-hover-active: rgb(0,88,0) !default;
+$uxpl-green-dark-hover-active: rgb(0, 88,0) !default;
 
 $uxpl-pink-base: rgb(194, 56, 125) !default; // wcag2a compliant
 $uxpl-pink-hover-active: lighten($uxpl-pink-base, 7%) !default; // wcag2a compliant
@@ -65,24 +65,24 @@ $black-t2: rgba($black, 0.5) !default;
 $black-t3: rgba($black, 0.75) !default;
 $black-t4: rgba($black, 0.85) !default;
 
-$white: rgb(255,255,255) !default;
+$white: rgb(255, 255, 255) !default;
 $white-t0: rgba($white, 0.125) !default;
 $white-t1: rgba($white, 0.25) !default;
 $white-t2: rgba($white, 0.5) !default;
 $white-t3: rgba($white, 0.75) !default;
 
-$gray: rgb(127,127,127) !default;
-$gray-l1: tint($gray,20%) !default;
-$gray-l2: tint($gray,40%) !default;
-$gray-l3: tint($gray,60%) !default;
-$gray-l4: tint($gray,80%) !default;
-$gray-l5: tint($gray,90%) !default;
-$gray-l6: tint($gray,95%) !default;
-$gray-l7: tint($gray,99%) !default;
-$gray-d1: shade($gray,20%) !default;
-$gray-d2: shade($gray,40%) !default;
-$gray-d3: shade($gray,60%) !default;
-$gray-d4: shade($gray,80%) !default;
+$gray: rgb(127, 127, 127) !default;
+$gray-l1: tint($gray, 20%) !default;
+$gray-l2: tint($gray, 40%) !default;
+$gray-l3: tint($gray, 60%) !default;
+$gray-l4: tint($gray, 80%) !default;
+$gray-l5: tint($gray, 90%) !default;
+$gray-l6: tint($gray, 95%) !default;
+$gray-l7: tint($gray, 99%) !default;
+$gray-d1: shade($gray, 20%) !default;
+$gray-d2: shade($gray, 40%) !default;
+$gray-d3: shade($gray, 60%) !default;
+$gray-d4: shade($gray, 80%) !default;
 
 // These define button styles similar to LMS
 // The goal here is consistency (until we can overhaul all of this...)
@@ -96,110 +96,110 @@ $btn-lms-gradient-hover: #d1c9c9 !default;
 $btn-lms-shadow-active: #cac2c2 !default;
 
 $blue: rgb(0, 159, 230) !default;
-$blue-l1: tint($blue,20%) !default;
-$blue-l2: tint($blue,40%) !default;
-$blue-l3: tint($blue,60%) !default;
-$blue-l4: tint($blue,80%) !default;
-$blue-l5: tint($blue,90%) !default;
-$blue-d1: shade($blue,20%) !default;
-$blue-d2: shade($blue,40%) !default;
-$blue-d3: shade($blue,60%) !default;
-$blue-d4: shade($blue,80%) !default;
-$blue-s1: saturate($blue,15%) !default;
-$blue-s2: saturate($blue,30%) !default;
-$blue-s3: saturate($blue,45%) !default;
-$blue-u1: desaturate($blue,15%) !default;
-$blue-u2: desaturate($blue,30%) !default;
-$blue-u3: desaturate($blue,45%) !default;
+$blue-l1: tint($blue, 20%) !default;
+$blue-l2: tint($blue, 40%) !default;
+$blue-l3: tint($blue, 60%) !default;
+$blue-l4: tint($blue, 80%) !default;
+$blue-l5: tint($blue, 90%) !default;
+$blue-d1: shade($blue, 20%) !default;
+$blue-d2: shade($blue, 40%) !default;
+$blue-d3: shade($blue, 60%) !default;
+$blue-d4: shade($blue, 80%) !default;
+$blue-s1: saturate($blue, 15%) !default;
+$blue-s2: saturate($blue, 30%) !default;
+$blue-s3: saturate($blue, 45%) !default;
+$blue-u1: desaturate($blue, 15%) !default;
+$blue-u2: desaturate($blue, 30%) !default;
+$blue-u3: desaturate($blue, 45%) !default;
 $blue-t0: rgba($blue, 0.125) !default;
 $blue-t1: rgba($blue, 0.25) !default;
-$blue-t2: rgba($blue, 0.50) !default;
+$blue-t2: rgba($blue, 0.5) !default;
 $blue-t3: rgba($blue, 0.75) !default;
 
 $pink: rgb(183, 37, 103) !default; // #b72567;
-$pink-l1: tint($pink,20%) !default;
-$pink-l2: tint($pink,40%) !default;
-$pink-l3: tint($pink,60%) !default;
-$pink-l4: tint($pink,80%) !default;
-$pink-l5: tint($pink,90%) !default;
-$pink-d1: shade($pink,20%) !default;
-$pink-d2: shade($pink,40%) !default;
-$pink-d3: shade($pink,60%) !default;
-$pink-d4: shade($pink,80%) !default;
-$pink-s1: saturate($pink,15%) !default;
-$pink-s2: saturate($pink,30%) !default;
-$pink-s3: saturate($pink,45%) !default;
-$pink-u1: desaturate($pink,15%) !default;
-$pink-u2: desaturate($pink,30%) !default;
-$pink-u3: desaturate($pink,45%) !default;
+$pink-l1: tint($pink, 20%) !default;
+$pink-l2: tint($pink, 40%) !default;
+$pink-l3: tint($pink, 60%) !default;
+$pink-l4: tint($pink, 80%) !default;
+$pink-l5: tint($pink, 90%) !default;
+$pink-d1: shade($pink, 20%) !default;
+$pink-d2: shade($pink, 40%) !default;
+$pink-d3: shade($pink, 60%) !default;
+$pink-d4: shade($pink, 80%) !default;
+$pink-s1: saturate($pink, 15%) !default;
+$pink-s2: saturate($pink, 30%) !default;
+$pink-s3: saturate($pink, 45%) !default;
+$pink-u1: desaturate($pink, 15%) !default;
+$pink-u2: desaturate($pink, 30%) !default;
+$pink-u3: desaturate($pink, 45%) !default;
 
 $red: rgb(178, 6, 16) !default;  // #b20610;
-$red-l1: tint($red,20%) !default;
-$red-l2: tint($red,40%) !default;
-$red-l3: tint($red,60%) !default;
-$red-l4: tint($red,80%) !default;
-$red-l5: tint($red,90%) !default;
-$red-d1: shade($red,20%) !default;
-$red-d2: shade($red,40%) !default;
-$red-d3: shade($red,60%) !default;
-$red-d4: shade($red,80%) !default;
-$red-s1: saturate($red,15%) !default;
-$red-s2: saturate($red,30%) !default;
-$red-s3: saturate($red,45%) !default;
-$red-u1: desaturate($red,15%) !default;
-$red-u2: desaturate($red,30%) !default;
-$red-u3: desaturate($red,45%) !default;
+$red-l1: tint($red, 20%) !default;
+$red-l2: tint($red, 40%) !default;
+$red-l3: tint($red, 60%) !default;
+$red-l4: tint($red, 80%) !default;
+$red-l5: tint($red, 90%) !default;
+$red-d1: shade($red, 20%) !default;
+$red-d2: shade($red, 40%) !default;
+$red-d3: shade($red, 60%) !default;
+$red-d4: shade($red, 80%) !default;
+$red-s1: saturate($red, 15%) !default;
+$red-s2: saturate($red, 30%) !default;
+$red-s3: saturate($red, 45%) !default;
+$red-u1: desaturate($red, 15%) !default;
+$red-u2: desaturate($red, 30%) !default;
+$red-u3: desaturate($red, 45%) !default;
 
 $green: rgb(37, 184, 90) !default; // #25b85a
-$green-l1: tint($green,20%) !default;
-$green-l2: tint($green,40%) !default;
-$green-l3: tint($green,60%) !default;
-$green-l4: tint($green,80%) !default;
-$green-l5: tint($green,90%) !default;
-$green-d1: shade($green,20%) !default;
-$green-d2: shade($green,40%) !default;
-$green-d3: shade($green,60%) !default;
-$green-d4: shade($green,80%) !default;
-$green-s1: saturate($green,15%) !default;
-$green-s2: saturate($green,30%) !default;
-$green-s3: saturate($green,45%) !default;
-$green-u1: desaturate($green,15%) !default;
-$green-u2: desaturate($green,30%) !default;
-$green-u3: desaturate($green,45%) !default;
+$green-l1: tint($green, 20%) !default;
+$green-l2: tint($green, 40%) !default;
+$green-l3: tint($green, 60%) !default;
+$green-l4: tint($green, 80%) !default;
+$green-l5: tint($green, 90%) !default;
+$green-d1: shade($green, 20%) !default;
+$green-d2: shade($green, 40%) !default;
+$green-d3: shade($green, 60%) !default;
+$green-d4: shade($green, 80%) !default;
+$green-s1: saturate($green, 15%) !default;
+$green-s2: saturate($green, 30%) !default;
+$green-s3: saturate($green, 45%) !default;
+$green-u1: desaturate($green, 15%) !default;
+$green-u2: desaturate($green, 30%) !default;
+$green-u3: desaturate($green, 45%) !default;
 
 $yellow: rgb(237, 189, 60) !default;
-$yellow-l1: tint($yellow,20%) !default;
-$yellow-l2: tint($yellow,40%) !default;
-$yellow-l3: tint($yellow,60%) !default;
-$yellow-l4: tint($yellow,80%) !default;
-$yellow-l5: tint($yellow,90%) !default;
-$yellow-d1: shade($yellow,20%) !default;
-$yellow-d2: shade($yellow,40%) !default;
-$yellow-d3: shade($yellow,60%) !default;
-$yellow-d4: shade($yellow,80%) !default;
-$yellow-s1: saturate($yellow,15%) !default;
-$yellow-s2: saturate($yellow,30%) !default;
-$yellow-s3: saturate($yellow,45%) !default;
-$yellow-u1: desaturate($yellow,15%) !default;
-$yellow-u2: desaturate($yellow,30%) !default;
-$yellow-u3: desaturate($yellow,45%) !default;
+$yellow-l1: tint($yellow, 20%) !default;
+$yellow-l2: tint($yellow, 40%) !default;
+$yellow-l3: tint($yellow, 60%) !default;
+$yellow-l4: tint($yellow, 80%) !default;
+$yellow-l5: tint($yellow, 90%) !default;
+$yellow-d1: shade($yellow, 20%) !default;
+$yellow-d2: shade($yellow, 40%) !default;
+$yellow-d3: shade($yellow, 60%) !default;
+$yellow-d4: shade($yellow, 80%) !default;
+$yellow-s1: saturate($yellow, 15%) !default;
+$yellow-s2: saturate($yellow, 30%) !default;
+$yellow-s3: saturate($yellow, 45%) !default;
+$yellow-u1: desaturate($yellow, 15%) !default;
+$yellow-u2: desaturate($yellow, 30%) !default;
+$yellow-u3: desaturate($yellow, 45%) !default;
 
 $orange: rgb(237, 189, 60) !default;
-$orange-l1: tint($orange,20%) !default;
-$orange-l2: tint($orange,40%) !default;
-$orange-l3: tint($orange,60%) !default;
-$orange-l4: tint($orange,80%) !default;
-$orange-l5: tint($orange,90%) !default;
-$orange-d1: shade($orange,20%) !default;
-$orange-d2: shade($orange,40%) !default;
-$orange-d3: shade($orange,60%) !default;
-$orange-d4: shade($orange,80%) !default;
-$orange-s1: saturate($orange,15%) !default;
-$orange-s2: saturate($orange,30%) !default;
-$orange-s3: saturate($orange,45%) !default;
-$orange-u1: desaturate($orange,15%) !default;
-$orange-u2: desaturate($orange,30%) !default;
-$orange-u3: desaturate($orange,45%) !default;
+$orange-l1: tint($orange, 20%) !default;
+$orange-l2: tint($orange, 40%) !default;
+$orange-l3: tint($orange, 60%) !default;
+$orange-l4: tint($orange, 80%) !default;
+$orange-l5: tint($orange, 90%) !default;
+$orange-d1: shade($orange, 20%) !default;
+$orange-d2: shade($orange, 40%) !default;
+$orange-d3: shade($orange, 60%) !default;
+$orange-d4: shade($orange, 80%) !default;
+$orange-s1: saturate($orange, 15%) !default;
+$orange-s2: saturate($orange, 30%) !default;
+$orange-s3: saturate($orange, 45%) !default;
+$orange-u1: desaturate($orange, 15%) !default;
+$orange-u2: desaturate($orange, 30%) !default;
+$orange-u3: desaturate($orange, 45%) !default;
 
 // +Colors - Shadows
 // ====================
@@ -230,7 +230,7 @@ $tmg-s3: 3.0s;
 $tmg-s2: 2.0s;
 $tmg-s1: 1.0s;
 $tmg-avg: 0.75s;
-$tmg-f1: 0.50s;
+$tmg-f1: 0.5s;
 $tmg-f2: 0.25s;
 $tmg-f3: 0.125s;
 
@@ -252,7 +252,7 @@ $ui-update-color: $blue-l4 !default;
 // ====================
 // do not use, future clean up will use updated styles
 $baseFontColor: $gray-d2 !default;
-$lighter-base-font-color: rgb(100,100,100) !default;
+$lighter-base-font-color: rgb(100, 100, 100) !default;
 $offBlack: #3c3c3c !default;
 $green: #108614 !default;
 $lightGrey: #edf1f5 !default;
diff --git a/cms/static/sass/studio-main-v1-rtl.scss b/cms/static/sass/studio-main-v1-rtl.scss
index 83150f3607..dde051df3c 100644
--- a/cms/static/sass/studio-main-v1-rtl.scss
+++ b/cms/static/sass/studio-main-v1-rtl.scss
@@ -16,5 +16,4 @@
 // ====================
 @import 'bourbon/bourbon'; // lib - bourbon
 @import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
-
 @import 'build-v1'; // shared app style assets/rendering
diff --git a/cms/static/sass/studio-main-v1.scss b/cms/static/sass/studio-main-v1.scss
index 4c40522015..ac649970d6 100644
--- a/cms/static/sass/studio-main-v1.scss
+++ b/cms/static/sass/studio-main-v1.scss
@@ -17,5 +17,4 @@
 // ====================
 @import 'bourbon/bourbon'; // lib - bourbon
 @import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
-
 @import 'build-v1'; // shared app style assets/rendering
diff --git a/cms/static/sass/studio-main-v2-rtl.scss b/cms/static/sass/studio-main-v2-rtl.scss
index 9f0643502f..7096f6cd4e 100644
--- a/cms/static/sass/studio-main-v2-rtl.scss
+++ b/cms/static/sass/studio-main-v2-rtl.scss
@@ -8,6 +8,7 @@
 
 // Load the RTL version of the edX Pattern Library
 $pattern-library-path: '../edx-pattern-library' !default;
+
 @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
 
 // Load the shared build
diff --git a/cms/static/sass/studio-main-v2.scss b/cms/static/sass/studio-main-v2.scss
index cd355d5a7d..46d49d93ea 100644
--- a/cms/static/sass/studio-main-v2.scss
+++ b/cms/static/sass/studio-main-v2.scss
@@ -8,6 +8,7 @@
 
 // Load the LTR version of the edX Pattern Library
 $pattern-library-path: '../edx-pattern-library' !default;
+
 @import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
 
 // Load the shared build
diff --git a/cms/static/sass/vendor/bi-app/_mixins.scss b/cms/static/sass/vendor/bi-app/_mixins.scss
index 170120e1b0..e1adf07c89 100755
--- a/cms/static/sass/vendor/bi-app/_mixins.scss
+++ b/cms/static/sass/vendor/bi-app/_mixins.scss
@@ -31,7 +31,9 @@
 @mixin bi-app-compact($property, $top, $right, $bottom, $left) {
   @if $bi-app-direction == ltr {
     #{$property}: $top $right $bottom $left;
-  } @else {
+  }
+
+  @else {
     #{$property}: $top $left $bottom $right;
   }
 }
@@ -77,9 +79,13 @@
 @mixin float($direction) {
   @if $direction == left {
     @include bi-app-float-left;
-  } @else if $direction == right {
+  }
+
+  @else if $direction == right {
     @include bi-app-float-right;
-  } @else {
+  }
+
+  @else {
     float: $direction;
   }
 }
@@ -97,9 +103,13 @@
 @mixin text-align($direction) {
   @if $direction == left {
     @include bi-app-text-align-left;
-  } @else if $direction == right {
+  }
+
+  @else if $direction == right {
     @include bi-app-text-align-right;
-  } @else {
+  }
+
+  @else {
     text-align: $direction;
   }
 }
@@ -117,9 +127,13 @@
 @mixin clear($direction) {
   @if $direction == left {
     @include bi-app-clear-left;
-  } @else if $direction == right {
+  }
+
+  @else if $direction == right {
     @include bi-app-clear-right;
-  } @else {
+  }
+
+  @else {
     clear: $direction;
   }
 }
@@ -129,7 +143,9 @@
 @mixin left($distance) {
   @if $bi-app-direction == ltr {
     left: $distance;
-  } @else if $bi-app-direction == rtl {
+  }
+
+  @else if $bi-app-direction == rtl {
     right: $distance;
   }
 }
@@ -137,7 +153,9 @@
 @mixin right($distance) {
   @if $bi-app-direction == ltr {
     right: $distance;
-  } @else if $bi-app-direction == rtl {
+  }
+
+  @else if $bi-app-direction == rtl {
     left: $distance;
   }
 }
@@ -196,26 +214,26 @@
 // radius
 @mixin border-top-left-radius($radius) {
   -webkit-border-top-#{$bi-app-left}-radius: $radius;
-     -moz-border-top#{$bi-app-left}-radius: $radius;
-          border-top-#{$bi-app-left}-radius: $radius;
+  -moz-border-top#{$bi-app-left}-radius: $radius;
+  border-top-#{$bi-app-left}-radius: $radius;
 }
 
 @mixin border-top-right-radius($radius) {
   -webkit-border-top-#{$bi-app-right}-radius: $radius;
-     -moz-border-top#{$bi-app-right}-radius: $radius;
-          border-top-#{$bi-app-right}-radius: $radius;
+  -moz-border-top#{$bi-app-right}-radius: $radius;
+  border-top-#{$bi-app-right}-radius: $radius;
 }
 
 @mixin border-bottom-left-radius($radius) {
   -webkit-border-bottom-#{$bi-app-left}-radius: $radius;
-     -moz-border-bottom#{$bi-app-left}-radius: $radius;
-          border-bottom-#{$bi-app-left}-radius: $radius;
+  -moz-border-bottom#{$bi-app-left}-radius: $radius;
+  border-bottom-#{$bi-app-left}-radius: $radius;
 }
 
 @mixin border-bottom-right-radius($radius) {
   -webkit-border-bottom-#{$bi-app-right}-radius: $radius;
-     -moz-border-bottom#{$bi-app-right}-radius: $radius;
-          border-bottom-#{$bi-app-right}-radius: $radius;
+  -moz-border-bottom#{$bi-app-right}-radius: $radius;
+  border-bottom-#{$bi-app-right}-radius: $radius;
 }
 
 @mixin border-right-radius($radius) {
@@ -244,12 +262,14 @@
     @include border-top-right-radius($topRight);
     @include border-bottom-right-radius($bottomRight);
     @include border-bottom-left-radius($bottomLeft);
-  } @else {
+  }
+
+  @else {
     -webkit-border-radius: $topLeft;
-       -moz-border-radius: $topLeft;
-        -ms-border-radius: $topLeft;
-         -o-border-radius: $topLeft;
-            border-radius: $topLeft;
+    -moz-border-radius: $topLeft;
+    -ms-border-radius: $topLeft;
+    -o-border-radius: $topLeft;
+    border-radius: $topLeft;
   }
 }
 
@@ -258,7 +278,9 @@
 @function lang() {
   @if $bi-app-direction == ltr {
     @return 'en';
-  } @else {
+  }
+
+  @else {
     @return 'ar';
   }
 }
@@ -274,7 +296,9 @@
 @function bi-app-invert-percentage($percentage) {
   @if $bi-app-direction == rtl {
     @return 100% - $percentage;
-  } @else {
+  }
+
+  @else {
     @return $percentage;
   }
 }
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index 48e2ea7986..accef1ab4f 100644
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -4,7 +4,6 @@
 .view-signup,
 .view-signin,
 .view-util {
-
   .wrapper-content {
     margin: ($baseline*1.5) 0 0 0;
     padding: 0 $baseline;
@@ -14,7 +13,9 @@
 
   .content {
     @include clearfix();
+
     @extend %t-copy-base;
+
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
@@ -30,20 +31,25 @@
       h1 {
         @extend %t-title3;
         @extend %t-strong;
+
         margin: 0;
         padding: 0;
       }
 
       .action {
         @extend %t-action3;
+
         position: absolute;
+
         @include right(0);
+
         top: 40%;
       }
     }
 
     .introduction {
       @extend %t-copy-sub1;
+
       margin: 0 0 $baseline 0;
     }
   }
@@ -57,6 +63,7 @@
 
     form {
       @include box-sizing(border-box);
+
       box-shadow: 0 1px 2px $shadow-l1;
       border-radius: 2px;
       width: 100%;
@@ -70,8 +77,10 @@
         .action-primary {
           @include blue-button();
           @include transition(all $tmg-f3 linear 0s);
+
           @extend %t-action2;
           @extend %t-strong;
+
           display: block;
           width: 100%;
           padding: ($baseline*0.75) ($baseline/2);
@@ -90,12 +99,11 @@
           }
 
           &.required {
-
             label {
               @extend %t-strong;
             }
 
-            label:after {
+            label::after {
               margin-left: ($baseline/4);
               content: "*";
             }
@@ -107,7 +115,9 @@
 
           label {
             @extend %t-copy-sub1;
+
             @include transition(color $tmg-f3 ease-in-out 0s);
+
             margin: 0 0 ($baseline/4) 0;
 
             &.is-focused {
@@ -117,6 +127,7 @@
 
           input, textarea {
             @extend %t-copy-base;
+
             height: 100%;
             width: 100%;
             padding: ($baseline/2);
@@ -130,23 +141,22 @@
             }
 
             ::-webkit-input-placeholder {
-               color: $gray-l4;
+              color: $gray-l4;
             }
 
             :-moz-placeholder {
-               color: $gray-l3;
+              color: $gray-l3;
             }
 
             ::-moz-placeholder {
-               color: $gray-l3;
+              color: $gray-l3;
             }
 
             :-ms-input-placeholder {
-               color: $gray-l3;
+              color: $gray-l3;
             }
 
             &:focus {
-
               + .tip {
                 color: $gray-d1;
               }
@@ -170,7 +180,9 @@
 
           .tip {
             @extend %t-copy-sub2;
+
             @include transition(color $tmg-f3 ease-in-out 0s);
+
             display: block;
             margin-top: ($baseline/4);
             color: $gray-d1;
@@ -179,6 +191,7 @@
 
         .field-group {
           @include clearfix();
+
           margin: 0 0 ($baseline/2) 0;
 
           .field {
@@ -211,6 +224,7 @@
 
     .bit {
       @extend %t-copy-sub1;
+
       margin: 0 0 $baseline 0;
       border-bottom: 1px solid $gray-l4;
       padding: 0 0 $baseline 0;
@@ -225,6 +239,7 @@
       h3 {
         @extend %t-title7;
         @extend %t-strong;
+
         margin: 0 0 ($baseline/4) 0;
         color: $gray-d2;
       }
@@ -237,8 +252,10 @@
 
     .action-forgotpassword {
       @extend %t-action3;
+
       position: absolute;
       top: 0;
+
       @include right(0);
     }
   }
diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss
index ad6b5fb61e..1e44f2a5c8 100644
--- a/cms/static/sass/views/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -2,7 +2,6 @@
 // ====================
 
 .view-uploads {
-
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
   }
@@ -16,9 +15,9 @@
   }
 
   .nav-actions {
-
     .fa-cloud-upload {
       @extend %t-copy;
+
       vertical-align: bottom;
       margin-right: ($baseline/5);
     }
@@ -27,6 +26,7 @@
 
   .no-asset-content {
     @extend %ui-well;
+
     padding: ($baseline*2);
     background-color: $gray-l4;
     text-align: center;
@@ -35,6 +35,7 @@
     .new-button {
       @extend %btn-primary-green;
       @extend %t-action3;
+
       @include margin-left($baseline);
 
       .icon {
@@ -49,8 +50,10 @@
     .meta-wrap {
       margin-bottom: $baseline;
     }
+
     .meta {
       @extend %t-copy-sub2;
+
       display: inline-block;
       vertical-align: top;
       width: flex-grid(9, 12);
@@ -66,6 +69,7 @@
 
     .pagination {
       @include clearfix;
+
       display: inline-block;
       width: flex-grid(3, 12);
 
@@ -86,6 +90,7 @@
 
       .nav-link {
         @include transition(all $tmg-f2 ease-in-out 0s);
+
         display: block;
         padding: ($baseline/4) ($baseline*0.75);
 
@@ -126,6 +131,7 @@
       .total-pages {
         @extend %t-copy-base;
         @extend %t-strong;
+
         width: ($baseline*2.5);
         margin: 0 ($baseline*0.75);
         padding: ($baseline/4);
@@ -135,13 +141,16 @@
 
       .current-page {
         @extend %ui-depth1;
+
         position: absolute;
+
         @include left(-($baseline/4));
       }
 
       .page-divider {
         @extend %t-title4;
         @extend %t-regular;
+
         vertical-align: middle;
         color: $gray;
       }
@@ -149,6 +158,7 @@
 
       .pagination-form {
         @extend %ui-depth2;
+
         position: relative;
 
         .page-number-label,
@@ -158,6 +168,7 @@
 
         .page-number-input {
           @include transition(all $tmg-f2 ease-in-out 0s);
+
           border: 1px solid transparent;
           border-bottom: 1px dotted $gray-l2;
           border-radius: 0;
@@ -172,7 +183,8 @@
           &:focus {
             // borrowing the base input focus styles to match overall app
             @include linear-gradient($paleYellow, tint($paleYellow, 90%));
-            opacity: 1.0;
+
+            opacity: 1;
             box-shadow: 0 0 3px $shadow-d1 inset;
             background-color: $white;
             border: 1px solid transparent;
@@ -194,6 +206,7 @@
 
       th {
         @extend %t-copy-sub2;
+
         background-color: $gray-l5;
         padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
         vertical-align: middle;
@@ -207,6 +220,7 @@
 
         .current-sort {
           @extend %t-strong;
+
           border-bottom: 1px solid $gray-l3;
         }
 
@@ -221,13 +235,16 @@
           margin: 0 -($baseline/2);
           color: $blue-d2;
           cursor: pointer;
+
           .wrapper-nav-sub {
             top: 35px;
+
             @extend %ui-depth2;
 
             > ol > .nav-item {
               @extend %t-action3;
               @extend %t-strong;
+
               display: inline-block;
               vertical-align: middle;
 
@@ -235,16 +252,17 @@
                 margin-right: 0;
               }
             }
+
             .nav-sub {
               @include text-align(left);
 
               // ui triangle/nub
-              &:after {
+              &::after {
                 left: $baseline;
                 margin-left: -10px;
               }
 
-              &:before {
+              &::before {
                 left: $baseline;
                 margin-left: -11px;
               }
@@ -280,6 +298,7 @@
 
         tr {
           @include transition(all $tmg-f2 ease-in-out 0s);
+
           border-top: 1px solid $gray-l4;
 
           &:first-child {
@@ -315,14 +334,16 @@
           }
         }
 
-      .thumb-col {
-        padding: ($baseline/2) $baseline;
-        @extend %t-copy-sub2;
-        color: $gray-l2;
+        .thumb-col {
+          padding: ($baseline/2) $baseline;
 
-        .thumb {
-          width: 100px;
-        }
+          @extend %t-copy-sub2;
+
+          color: $gray-l2;
+
+          .thumb {
+            width: 100px;
+          }
 
           img {
             width: 100%;
@@ -331,9 +352,9 @@
 
 
         .name-col {
-
           .title {
             @extend %t-copy-sub1;
+
             display: inline-block;
             max-width: 200px;
             overflow: hidden;
@@ -342,18 +363,23 @@
 
         .type-col {
           @extend %t-copy-sub2;
+
           color: $gray-d1;
         }
 
         .date-col {
           @include transition(all $tmg-f2 ease-in-out 0s);
+
           @extend %t-copy-sub2;
+
           color: $gray-l2;
         }
 
         .embed-col {
           @include transition(all $tmg-f2 ease-in-out 0s);
+
           @extend %t-copy-sub2;
+
           padding-left: ($baseline*0.75);
           color: $gray-l2;
 
@@ -364,7 +390,9 @@
 
           .embeddable-xml-input {
             @include transition(all $tmg-f2 ease-in-out 0s);
+
             @extend %t-copy-sub2;
+
             box-shadow: none;
             border: 1px solid transparent;
             background: none;
@@ -445,7 +473,7 @@
           pointer-events: none;
         }
 
-       .fa-unlock-alt {
+        .fa-unlock-alt {
           display: none;
         }
       }
@@ -470,6 +498,7 @@
     .title {
       @extend %t-title3;
       @extend %t-light;
+
       float: none;
       margin: ($baseline*2) 0 ($baseline*1.5);
     }
@@ -480,7 +509,9 @@
 
     .choose-file-button {
       @include blue-button();
+
       @extend %t-action2;
+
       padding: 10px 82px 12px;
     }
 
@@ -503,6 +534,7 @@
 
     .progress-fill {
       @extend %t-copy-sub1;
+
       width: 0%;
       height: ($baseline*1.5);
       border-radius: ($baseline*2);
@@ -513,6 +545,7 @@
 
     .close-button {
       @include transition(color $tmg-f2 ease-in-out 0s);
+
       position: absolute;
       top: 0;
       right: ($baseline*0.75);
@@ -537,6 +570,7 @@
 
       label {
         @extend %t-strong;
+
         display: block;
         margin-bottom: ($baseline/2);
       }
@@ -549,6 +583,7 @@
 
     .copy-button {
       @include white-button;
+
       display: none;
       margin-bottom: ($baseline*5);
     }
diff --git a/cms/static/sass/views/_certificates.scss b/cms/static/sass/views/_certificates.scss
index 5349aa4725..6ae672652c 100644
--- a/cms/static/sass/views/_certificates.scss
+++ b/cms/static/sass/views/_certificates.scss
@@ -11,9 +11,9 @@
 // * +Layout - Certificates
 // ====================
 .view-certificates {
-
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
+
     float: left;
   }
 
@@ -24,6 +24,7 @@
     .notice-moduledisabled {
       @extend %ui-well;
       @extend %t-copy-base;
+
       background-color: $white;
       padding: ($baseline*1.5) $baseline;
       text-align: center;
@@ -34,7 +35,6 @@
     }
 
     .wrapper-certificates {
-
       .title {
         @extend %t-title4;
         @extend %t-strong;
@@ -46,6 +46,7 @@
 
       .instructions {
         @extend %t-copy-sub1;
+
         margin-bottom: $baseline;
       }
     }
@@ -56,6 +57,7 @@
 
     .actual-course-title {
       @extend %t-strong;
+
       margin-bottom: $baseline;
     }
   }
@@ -65,10 +67,11 @@
   }
 
   .certificate-info-section{
-      overflow: auto;
+    overflow: auto;
 
     .course-title-section, .course-number-section{
       min-width: 47%;
+
       @include margin-right(2%);
     }
   }
@@ -77,14 +80,14 @@
 // * +Main - Collection
 // ====================
 .view-certificates {
-
   .wrapper-collection {
     @extend %ui-window;
+
     position: relative;
     outline: none;
 
     &:hover .collection .actions {
-      opacity: 1.0;
+      opacity: 1;
     }
 
     .collection-details {
@@ -111,6 +114,7 @@
 
         li {
           @include box-sizing(border-box);
+
           display: table-cell;
           margin-right: 1%;
           padding: ($baseline/4) 0;
@@ -124,6 +128,7 @@
 
       .item {
         @extend %t-copy-lead1;
+
         padding: ($baseline/7) 0 ($baseline/4);
         border-top: 1px solid $gray-l4;
         white-space: nowrap;
@@ -144,13 +149,13 @@
     }
 
     .collection-details {
-
       .actions {
         @include transition(opacity .15s .25s ease-in-out);
+
         position: absolute;
         top: $baseline;
         right: $baseline;
-        opacity: 0.0;
+        opacity: 0;
 
         .action {
           display: inline-block;
@@ -179,6 +184,7 @@
 
     .collection-references {
       @extend %t-copy-sub1;
+
       box-shadow: 0 2px 2px 0 $shadow inset;
       padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5);
       color: $gray-l1;
@@ -208,6 +214,7 @@
 
     .collection-edit {
       @include box-sizing(border-box);
+
       border-radius: 2px;
       width: 100%;
       background: $white;
@@ -226,6 +233,7 @@
 
       .action-add-signatory {
         @extend %ui-btn-flat-outline;
+
         display: block;
         width: 100%;
         margin-top: ($baseline*0.75);
@@ -234,12 +242,15 @@
 
       .disableClick {
         @extend %ui-disabled;
+
         color: $gray-l1;
       }
 
       .tip {
         @extend %t-copy-sub2;
+
         @include transition(color, 0.15s, ease-in-out);
+
         display: block;
         margin-top: ($baseline/2);
         color: $gray-d1;
@@ -252,6 +263,7 @@
 
       .collection-fields {
         @extend %cont-no-list;
+
         margin-bottom: $baseline;
       }
 
@@ -263,12 +275,11 @@
         }
 
         &.required {
-
           label {
             @extend %t-strong;
           }
 
-          label:after {
+          label::after {
             margin-left: ($baseline/4);
             content: "*";
           }
@@ -284,7 +295,9 @@
 
         label {
           @extend %t-copy-sub1;
+
           @include transition(color, 0.15s, ease-in-out);
+
           margin: 0 0 ($baseline/4) 0;
 
           &.is-focused {
@@ -295,6 +308,7 @@
         //this section is borrowed from _account.scss - we should clean up and unify later
         input, textarea {
           @extend %t-copy-base;
+
           height: 100%;
           width: 100%;
           padding: ($baseline/2);
@@ -308,19 +322,19 @@
           }
 
           ::-webkit-input-placeholder {
-             color: $gray-l4;
+            color: $gray-l4;
           }
 
           :-moz-placeholder {
-             color: $gray-l3;
+            color: $gray-l3;
           }
 
           ::-moz-placeholder {
-             color: $gray-l3;
+            color: $gray-l3;
           }
 
           :-ms-input-placeholder {
-             color: $gray-l3;
+            color: $gray-l3;
           }
 
           &:focus {
@@ -331,30 +345,31 @@
         }
 
         &.error {
-            label {
-              color: $red;
-            }
+          label {
+            color: $red;
+          }
 
-            input {
-              border-color: $red;
-            }
+          input {
+            border-color: $red;
+          }
         }
       }
 
       label.required {
         @extend %t-strong;
 
-        &:after {
+        &::after {
           margin-left: ($baseline/4);
           content: "*";
         }
       }
 
       .field.add-collection-name {
-
         label {
           width: 50%;
+
           @extend %t-title5;
+
           display: inline-block;
           vertical-align: bottom;
         }
@@ -368,6 +383,7 @@
 
           .certificate-value {
             @extend %t-strong;
+
             white-space: nowrap;
             margin-left: ($baseline*0.5);
           }
@@ -390,11 +406,13 @@
 
         .action-primary {
           @extend %btn-primary-blue;
+
           padding: ($baseline/4) $baseline;
         }
 
         .action-secondary {
           @extend %btn-secondary-gray;
+
           padding: ($baseline/4) $baseline;
         }
 
@@ -406,16 +424,18 @@
             color: $gray-l3;
           }
         }
+
         &.custom-signatory-action {
           position: relative;
           top: 0;
           left: 0;
-          opacity: 1.0;
+          opacity: 1;
         }
       }
 
       .copy {
         @extend %t-copy-sub2;
+
         margin: ($baseline) 0 ($baseline/2) 0;
         color: $gray;
 
@@ -429,6 +449,7 @@
       @extend %ui-btn-flat-outline;
       @extend %t-action2;
       @extend %t-strong;
+
       display: block;
       width: 100%;
       margin: ($baseline*1.5) 0 0 0;
@@ -439,6 +460,7 @@
   // add/new collection
   .action-add {
     @extend %ui-btn-flat-outline;
+
     display: block;
     width: 100%;
     margin-top: ($baseline*0.75);
@@ -451,9 +473,11 @@
     .icon {
       display: inline-block;
       vertical-align: middle;
+
       @include margin-right($baseline/2);
     }
   }
+
   .action-add-hidden {
     visibility: hidden;
   }
@@ -467,18 +491,16 @@
 }
 
 .view-certificates .certificates {
-
   .certificate-details, .certificate-edit {
-
     .title {
       @extend %t-title4;
       @extend %t-strong;
+
       margin-bottom: ($baseline/2);
     }
   }
 
   .certificate-edit {
-
     .add-collection-name label {
       padding-right: 5%;
       overflow: hidden;
@@ -488,6 +510,7 @@
 
     .field-group {
       @include clearfix();
+
       margin: 0 0 ($baseline/2) 0;
       padding: ($baseline/4) 0 0 0;
 
@@ -518,7 +541,9 @@
 
       .action-close {
         @include transition(color $tmg-f2 ease-in-out);
+
         @extend %t-action1;
+
         display: inline-block;
         border: 0;
         padding: 0;
@@ -538,13 +563,14 @@
 // ====================
 // TO-DO: refactor to use collection styling where possible.
 .view-certificates .certificates {
-
   .signatory-details, .signatory-edit {
     @extend %ui-window;
+
     border-color: $gray-l4;
 
     .signatory-panel-header {
       @extend %t-strong;
+
       background-color: $gray-l5;
       padding: ($baseline/2) ($baseline*0.75);
       border-bottom: 1px solid $gray-l5;
@@ -585,7 +611,9 @@
 
     .tip {
       @extend %t-copy-sub2;
+
       @include transition(color, 0.15s, ease-in-out);
+
       display: block;
       margin-top: ($baseline/4);
       color: $gray-d1;
@@ -599,12 +627,11 @@
       }
 
       &.required {
-
         label {
           @extend %t-strong;
         }
 
-        label:after {
+        label::after {
           margin-left: ($baseline/4);
           content: "*";
         }
@@ -620,7 +647,9 @@
 
       label {
         @extend %t-copy-sub1;
+
         @include transition(color, 0.15s, ease-in-out);
+
         margin: 0 0 ($baseline/4) 0;
 
         &.is-focused {
@@ -631,6 +660,7 @@
       //TO-DO: this section is borrowed from _account.scss - we should clean up and unify later
       input, textarea {
         @extend %t-copy-base;
+
         height: 100%;
         width: 100%;
         padding: ($baseline/2);
@@ -644,19 +674,19 @@
         }
 
         ::-webkit-input-placeholder {
-           color: $gray-l4;
+          color: $gray-l4;
         }
 
         :-moz-placeholder {
-           color: $gray-l3;
+          color: $gray-l3;
         }
 
         ::-moz-placeholder {
-           color: $gray-l3;
+          color: $gray-l3;
         }
 
         :-ms-input-placeholder {
-           color: $gray-l3;
+          color: $gray-l3;
         }
 
         &:focus {
@@ -667,32 +697,35 @@
       }
 
       &.error {
-          label {
-            color: $red;
-          }
+        label {
+          color: $red;
+        }
 
-          input {
-            border-color: $red;
-          }
+        input {
+          border-color: $red;
+        }
 
-          .message-error{
-            color: $red;
-          }
+        .message-error{
+          color: $red;
+        }
       }
+
       .signature-upload-wrapper {
         @include clearfix();
-        width: flex-grid(12,12);
+
+        width: flex-grid(12, 12);
 
         .signature-upload-input-wrapper {
           float: left;
-          width: flex-grid(7,12);
+          width: flex-grid(7, 12);
           margin-right: flex-gutter();
         }
 
         .action-upload-signature {
           @extend %ui-btn-flat-outline;
+
           float: right;
-          width: flex-grid(4,12);
+          width: flex-grid(4, 12);
           margin-top: ($baseline/4);
           padding: ($baseline/2) $baseline;
         }
diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
index 0632ce4469..5508ef47f1 100644
--- a/cms/static/sass/views/_container.scss
+++ b/cms/static/sass/views/_container.scss
@@ -15,6 +15,7 @@
 
 %status-value-sub1 {
   @extend %t-title8;
+
   display: block;
 }
 
@@ -24,13 +25,11 @@
   @extend %two-col-1;
 
   .wrapper-mast {
-
     .mast {
       border-bottom: none;
       padding-bottom: 0;
 
       .page-header {
-
         .page-header-title {
           @extend %t-title4;
           @extend %t-strong;
@@ -41,8 +40,10 @@
           // TOOD: abstract this out into a Sass placeholder
           .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;
+
             width: 100%;
             background: none repeat scroll 0 0 $white;
             border: 0;
@@ -50,7 +51,7 @@
 
             // STATE: focus
             &:focus {
-              box-shadow: 0 0 2px 2px rgba($ui-action-primary-color-focus, 0.50) inset;
+              box-shadow: 0 0 2px 2px rgba($ui-action-primary-color-focus, 0.5) inset;
               color: $ui-action-primary-color-focus;
             }
           }
@@ -58,6 +59,7 @@
 
         .container-access {
           @include font-size(14);
+
           line-height: 1.5;
           white-space: normal;
           color: #707070;
@@ -66,12 +68,11 @@
       }
 
       &.has-actions {
-
         .nav-actions {
-
           .button {
             @extend %t-action3;
             @extend %t-regular;
+
             padding: ($baseline/4) ($baseline*0.75);
           }
         }
@@ -80,9 +81,9 @@
   }
 
   .content-primary {
-
     .no-container-content {
       @extend %no-content;
+
       padding: ($baseline*1.5) ($baseline*2);
 
       // custom rules to reuse xblock validation styling in ui-well context
@@ -92,7 +93,6 @@
     }
 
     .container-message {
-
       .message {
         border-radius: 3px 3px 0 0;
       }
@@ -100,7 +100,6 @@
 
     // dragging bits
     .ui-sortable-helper {
-
       article {
         display: none;
       }
@@ -118,7 +117,6 @@
   }
 
   .content-supplementary {
-
     label {
       @extend %t-title8;
     }
@@ -172,7 +170,6 @@
       }
 
       .wrapper-last-draft {
-
         .date,
         .user {
           @extend %t-strong;
@@ -184,7 +181,6 @@
       }
 
       .wrapper-release {
-
         .release-date {
           @extend %status-value-base;
         }
@@ -195,9 +191,9 @@
       }
 
       .wrapper-visibility {
-
         .copy {
           @extend %status-value-base;
+
           margin-bottom: ($baseline/10);
         }
 
@@ -226,12 +222,14 @@
 
         .action-publish {
           @extend %btn-primary-blue;
+
           display: block;
           padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
         }
 
         .action-discard {
           @extend %t-copy-sub1;
+
           display: block;
           margin-top: ($baseline/2);
           text-align: right;
@@ -246,7 +244,6 @@
 
     // versioning widget
     .unit-publish-history {
-
       .wrapper-last-publish {
         margin-bottom: $baseline;
         padding: ($baseline*0.75);
@@ -254,6 +251,7 @@
 
         .copy {
           @extend %t-copy-sub2;
+
           color: $gray-d2;
         }
 
@@ -271,18 +269,20 @@
     // location widget
     .unit-location, .library-location {
       @extend %bar-module;
+
       border-top: none;
 
       .wrapper-unit-id, .wrapper-library-id {
-
         .unit-id-value, .library-id-value {
           @extend %status-value-base;
+
           display: inline-block;
           width: 100%;
         }
 
         .tip {
           @extend %t-copy-sub2;
+
           display: inline-block;
           margin: ($baseline/4) 0;
           color: $gray-d1;
@@ -290,7 +290,6 @@
       }
 
       .wrapper-unit-tree-location {
-
         .item-title {
           @extend %cont-text-wrap;
 
@@ -310,6 +309,7 @@
           .unit-title a {
             @extend %ui-disabled;
             @extend %t-strong;
+
             color: $color-heading-base;
           }
         }
@@ -342,7 +342,6 @@
 
 
 .move-xblock-modal {
-
   button {
     background: transparent;
     border-color: transparent;
@@ -357,9 +356,9 @@
     background: $color-background-alternate;
 
     .breadcrumbs {
-
       .bc-container {
         @include font-size(14);
+
         display: inline-block;
 
         .breadcrumb-fa-icon {
@@ -389,6 +388,7 @@
   .category-text {
     @include margin-left($baseline/2);
     @include font-size(14);
+
     color: $black;
   }
 
@@ -418,6 +418,7 @@
 
       .button-forward {
         padding: ($baseline/2);
+
         .forward-sr-icon {
           @include float(right);
 
@@ -434,6 +435,7 @@
 
     .xblock-no-child-message {
       @include text-align(center);
+
       display: block;
       padding: ($baseline*2);
     }
diff --git a/cms/static/sass/views/_course-create.scss b/cms/static/sass/views/_course-create.scss
index 2bfeb24e84..48fed97374 100644
--- a/cms/static/sass/views/_course-create.scss
+++ b/cms/static/sass/views/_course-create.scss
@@ -5,8 +5,10 @@
 
   // basic layout
   // --------------------
-  .content-primary, .content-supplementary {
+  .content-primary,
+  .content-supplementary {
     @include box-sizing(border-box);
+
     float: left;
   }
 
@@ -24,8 +26,8 @@
   // header/masthead
   // --------------------
   .mast .page-header-super {
-
-    .course-original-title-id, .course-original-title {
+    .course-original-title-id,
+    .course-original-title {
       display: block;
     }
 
@@ -38,9 +40,9 @@
   // course re-run form
   // --------------------
   .rerun-course {
-
     .row {
       @include clearfix();
+
       margin-bottom: ($baseline*0.75);
     }
 
@@ -55,6 +57,7 @@
 
     label {
       @extend %t-title7;
+
       display: block;
       font-weight: 700;
     }
@@ -73,6 +76,7 @@
 
     .rerun-course-name {
       @extend %t-title5;
+
       font-weight: 300;
     }
 
@@ -96,6 +100,7 @@
 
     .wrap-error {
       @include transition(opacity $tmg-f2 ease 0s);
+
       opacity: 0;
     }
 
@@ -106,20 +111,21 @@
     .message-status {
       display: block;
       margin-bottom: 0;
-      padding: ($baseline*.5) ($baseline*1.5) 8px ($baseline*1.5);
+      padding: ($baseline*0.5) ($baseline*1.5) 8px ($baseline*1.5);
       font-weight: bold;
     }
 
     // NOTE: override for modern button styling until all buttons (in _forms.scss) can be converted
     .actions {
-
       .action-primary {
         @include blue-button;
+
         @extend %t-action2;
       }
 
       .action-secondary {
         @include grey-button;
+
         @extend %t-action2;
       }
     }
diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss
index 8c9ac6b1ea..9711172012 100644
--- a/cms/static/sass/views/_dashboard.scss
+++ b/cms/static/sass/views/_dashboard.scss
@@ -15,7 +15,8 @@
   // ====================
 
   // basic layout
-  .content-primary, .content-supplementary {
+  .content-primary,
+  .content-supplementary {
     @include box-sizing(border-box);
   }
 
@@ -34,9 +35,10 @@
     width: flexgrid(9, 9);
 
     // CASE: notice has actions {
-    &.has-actions, &.list-notices .notice-item.has-actions {
-
-      .msg, .list-actions {
+    &.has-actions,
+    &.list-notices .notice-item.has-actions {
+      .msg,
+      .list-actions {
         display: inline-block;
         vertical-align: middle;
       }
@@ -51,11 +53,8 @@
         text-align: right;
         margin-top: 0;
 
-        .action-item {
-
-        }
-
-        .action-create-course, .action-create-library {
+        .action-create-course,
+        .action-create-library {
           @extend %btn-primary-green;
           @extend %t-action3;
         }
@@ -72,7 +71,9 @@
     .ui-toggle-control {
       @extend %ui-depth2;
       @extend %btn-secondary-gray;
+
       @include clearfix();
+
       display: block;
       text-align: left;
 
@@ -84,6 +85,7 @@
 
       .label {
         @extend %t-action3;
+
         float: left;
         width: flex-grid(8, 9);
         margin: 3px flex-gutter() 0 0;
@@ -91,9 +93,11 @@
 
       .fa-times-circle {
         @extend %t-action1;
+
         @include transform(rotate(45deg));
         @include transform-origin(center center);
         @include transition(all $tmg-f1 linear 0s);
+
         float: right;
         text-align: right;
       }
@@ -101,7 +105,9 @@
 
     .ui-toggle-target {
       @extend %ui-depth1;
+
       @include transition(opacity $tmg-f1 ease-in-out 0s);
+
       position: relative;
       top: -2px;
       display: none;
@@ -110,7 +116,6 @@
 
     // CASE: when the content area is shown
     &.is-shown {
-
       .ui-toggle-control {
         @include border-bottom-radius(0);
 
@@ -122,11 +127,9 @@
 
       .ui-toggle-target {
         display: block;
-        opacity: 1.0;
+        opacity: 1;
       }
     }
-
-
   }
 
   // elements - course creation rights controls
@@ -136,21 +139,15 @@
     .title {
       @extend %t-title7;
       @extend %t-strong;
+
       margin-bottom: ($baseline/4);
       color: $gray-d1;
     }
 
-    .copy {
-
-    }
-
-    .list-actions, .form-actions {
+    .list-actions,
+    .form-actions {
       margin-top: ($baseline*0.75);
 
-      .action-item {
-
-      }
-
       .action-primary {
         @extend %btn-primary-blue;
         @extend %t-action3;
@@ -164,12 +161,14 @@
 
         .fa-cog {
           @include transition(all $tmg-f1 ease-in-out $tmg-f1);
+
           @extend %t-icon4;
+
           position: absolute;
           top: ($baseline/2);
           left: -($baseline);
           visibility: hidden;
-          opacity: 0.0;
+          opacity: 0;
         }
 
         // state: submitting
@@ -179,7 +178,7 @@
           .fa-cog {
             left: ($baseline*0.75);
             visibility: visible;
-            opacity: 1.0;
+            opacity: 1;
           }
         }
 
@@ -192,14 +191,13 @@
           .fa-cog {
             left: ($baseline*0.75);
             visibility: visible;
-            opacity: 1.0;
+            opacity: 1;
           }
         }
       }
     }
 
     .status-update {
-
       .label {
         @extend %cont-text-sr;
       }
@@ -218,11 +216,12 @@
           display: block;
           width: 100%;
           height: ($baseline/4);
-          opacity: 0.40;
+          opacity: 0.4;
         }
       }
 
-      .value-formal, .value-description {
+      .value-formal,
+      .value-description {
         border-radius: ($baseline/10);
         display: inline-block;
         vertical-align: middle;
@@ -232,6 +231,7 @@
       .value-formal {
         @extend %t-title5;
         @extend %t-strong;
+
         margin: ($baseline/2);
 
         .icon {
@@ -241,6 +241,7 @@
 
       .value-description {
         @extend %t-copy-sub1;
+
         position: relative;
         color: $white;
         opacity: 0.85;
@@ -249,7 +250,6 @@
 
     // CASE: rights are not requested yet
     &.is-unrequested {
-
       .title {
         @extend %cont-text-sr;
       }
@@ -257,9 +257,7 @@
 
     // CASE: status is pending
     &.is-pending {
-
       .status-update {
-
         .value {
           background: $orange;
         }
@@ -273,9 +271,7 @@
 
     // CASE: status is denied
     &.is-denied {
-
       .status-update {
-
         .value {
           background: $red-l1;
         }
@@ -303,7 +299,8 @@
         border-bottom: 4px solid $uxpl-blue-base;
       }
 
-      &.active, &:hover {
+      &.active,
+      &:hover {
         a {
           color: $gray-d2;
         }
@@ -318,7 +315,9 @@
   }
 
   // ELEM: course listings
-  .courses-tab, .archived-courses-tab, .libraries-tab {
+  .courses-tab,
+  .archived-courses-tab,
+  .libraries-tab {
     display: none;
 
     &.active {
@@ -326,9 +325,12 @@
     }
   }
 
-  .courses, .libraries, .archived-courses {
+  .courses,
+  .libraries,
+  .archived-courses {
     .title {
       @extend %t-title6;
+
       margin-bottom: $baseline;
       border-bottom: 1px solid $gray-l3;
       padding-bottom: ($baseline/2);
@@ -337,6 +339,7 @@
 
     .title {
       @extend %t-title6;
+
       margin-bottom: $baseline;
       border-bottom: 1px solid $gray-l3;
       padding-bottom: ($baseline/2);
@@ -353,7 +356,7 @@
     li:last-child {
       margin-bottom: 0;
     }
-	}
+  }
 
 
   // UI: course wrappers (needed for status messages)
@@ -361,9 +364,9 @@
 
     // CASE: has status
     &.has-status {
-
       .course-status {
         @include box-sizing(border-box);
+
         display: inline-block;
         vertical-align: middle;
         width: flex-grid(3, 9);
@@ -371,14 +374,15 @@
         text-align: right;
 
         .value {
-
-          .copy, .icon {
+          .copy,
+          .icon {
             display: inline-block;
             vertical-align: middle;
           }
 
           .icon {
             @extend %t-icon4;
+
             margin-right: ($baseline/2);
           }
 
@@ -390,13 +394,14 @@
 
       .status-message {
         @extend %t-copy-sub1;
+
         background-color: $gray-l5;
         box-shadow: 0 2px 2px 0 $shadow inset;
         padding: ($baseline*0.75) $baseline;
 
         &.has-actions {
-
-          .copy, .status-actions {
+          .copy,
+          .status-actions {
             display: inline-block;
             vertical-align: middle;
           }
@@ -412,16 +417,19 @@
 
             .button {
               @extend %btn-secondary-white;
-              padding:($baseline/4) ($baseline/2);
+
+              padding: ($baseline/4) ($baseline/2);
             }
 
-            .icon,.button-copy {
+            .icon,
+            .button-copy {
               display: inline-block;
               vertical-align: middle;
             }
 
             .icon {
               @extend %t-icon4;
+
               margin-right: ($baseline/4);
             }
 
@@ -437,6 +445,7 @@
   // UI: individual course listings
   .course-item {
     @include box-sizing(border-box);
+
     width: flex-grid(9, 9);
     position: relative;
     border-bottom: 1px solid $gray-l2;
@@ -447,8 +456,10 @@
       background: $paleYellow;
     }
 
-    .course-link, .course-actions {
+    .course-link,
+    .course-actions {
       @include box-sizing(border-box);
+
       display: inline-block;
       vertical-align: middle;
     }
@@ -456,27 +467,33 @@
     // encompassing course link
     .course-link {
       @extend %ui-depth2;
+
       width: flex-grid(6, 9);
+
       @include margin-right(flex-gutter());
     }
 
     // course title
     .course-title {
       @extend %t-title4;
+
       @include margin(0, ($baseline*2), ($baseline/4), 0);
+
       font-weight: 300;
     }
 
     // course metadata
     .course-metadata {
       @extend %t-copy-sub1;
+
       @include transition(opacity $tmg-f1 ease-in-out 0);
+
       color: $gray-d2;
 
       .metadata-item {
         display: inline-block;
 
-        & + .metadata-item:before {
+        & + .metadata-item::before {
           content: "/";
           margin-left: ($baseline/4);
           margin-right: ($baseline/4);
@@ -495,13 +512,16 @@
 
     .course-actions {
       @extend %ui-depth3;
+
       position: static;
       width: flex-grid(3, 9);
+
       @include text-align(right);
 
       .action {
         display: inline-block;
         vertical-align: middle;
+
         @include margin-right($baseline/2);
 
         &:last-child {
@@ -516,6 +536,7 @@
       // view live button
       .view-button {
         @include box-sizing(border-box);
+
         padding: ($baseline/2);
       }
 
@@ -527,7 +548,6 @@
 
     // CASE: is processing
     &.is-processing {
-
       .course-status .value {
         color: $gray-l2;
       }
@@ -535,7 +555,6 @@
 
     // CASE: has an error
     &.has-error {
-
       .course-status {
         color: $red; // TODO: abstract this out to an error-based color variable
       }
@@ -569,6 +588,7 @@
 
     .wrapper-course {
       @extend %ui-window;
+
       position: relative;
     }
 
@@ -583,18 +603,17 @@
           color: inherit;
         }
       }
-
     }
 
     // course details (replacement for course-link when a course cannot be linked)
     .course-details {
       @extend %ui-depth2;
+
       display: inline-block;
       vertical-align: middle;
       width: flex-grid(6, 9);
       margin-right: flex-gutter();
     }
-
   }
 
   .optimization-form {
@@ -633,10 +652,11 @@
 
   // course listings
 
-  .create-course, .create-library {
-
+  .create-course,
+  .create-library {
     .row {
       @include clearfix();
+
       margin-bottom: ($baseline*0.75);
     }
 
@@ -652,6 +672,7 @@
     label {
       @extend %t-title7;
       @extend %t-strong;
+
       display: block;
     }
 
@@ -661,14 +682,15 @@
     .new-course-run {
       width: 100%;
     }
+
     .course-run-text-direction {
       direction: ltr;
       text-align: right;
     }
 
     .placeholder-text-direction {
-        direction: rtl;
-      }
+      direction: rtl;
+    }
 
     .new-course-name {
       @extend %t-title5;
@@ -687,23 +709,25 @@
       padding-bottom: 0;
     }
 
-      .wrap-error {
-        @include transition(all $tmg-f2 ease 0s);
-        height: 0;
-        overflow: hidden;
-        opacity: 0;
-      }
+    .wrap-error {
+      @include transition(all $tmg-f2 ease 0s);
 
-      .wrap-error.is-shown {
-        height: 65px;
-        opacity: 1;
-      }
+      height: 0;
+      overflow: hidden;
+      opacity: 0;
+    }
 
-      .message-status {
-        @extend %t-strong;
-        display: block;
-        margin-bottom: 0;
-        padding: ($baseline*.5) ($baseline*1.5) 8px ($baseline*1.5);
-      }
+    .wrap-error.is-shown {
+      height: 65px;
+      opacity: 1;
+    }
+
+    .message-status {
+      @extend %t-strong;
+
+      display: block;
+      margin-bottom: 0;
+      padding: ($baseline*0.5) ($baseline*1.5) 8px ($baseline*1.5);
+    }
   }
 }
diff --git a/cms/static/sass/views/_export-git.scss b/cms/static/sass/views/_export-git.scss
index 30d9098a0c..f1de2bb64f 100644
--- a/cms/static/sass/views/_export-git.scss
+++ b/cms/static/sass/views/_export-git.scss
@@ -6,16 +6,17 @@
   // UI: basic layout
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
+
     float: left;
   }
 
   .content-primary {
-    width: flex-grid(9,12);
+    width: flex-grid(9, 12);
     margin-right: flex-gutter();
   }
 
   .content-supplementary {
-    width: flex-grid(3,12);
+    width: flex-grid(3, 12);
   }
 
   .error-text {
@@ -28,38 +29,41 @@
   }
 
   .export-git-info-block {
-
     dt {
       @extend %t-copy-lead1;
       @extend %t-strong;
+
       margin-top: 12px;
     }
 
     dd {
       @extend %t-copy-base;
+
       margin-bottom: $baseline;
     }
 
     .course_text {
-        color: $green;
+      color: $green;
     }
+
     .giturl_text {
       color: $blue;
     }
   }
 
-   // UI: introduction
+  // UI: introduction
   .introduction {
-
     .title {
       @extend %cont-text-sr;
     }
   }
 
- // UI: export controls
+  // UI: export controls
   .export-git-controls {
     @include box-sizing(border-box);
+
     @extend %ui-window;
+
     padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
 
     .title {
@@ -69,15 +73,16 @@
     .action-export-git {
       @extend %btn-primary-blue;
       @extend %t-action1;
+
       display: block;
       margin: $baseline 0;
       padding: ($baseline*0.75) $baseline;
     }
 
     .action {
-
       .icon {
         @extend %t-icon2;
+
         display: inline-block;
         vertical-align: middle;
         margin-right: ($baseline/4);
diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss
index 385f6adaa5..60627568db 100644
--- a/cms/static/sass/views/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -19,7 +19,6 @@
 
   // UI: introduction
   .introduction {
-
     .title {
       @extend %cont-text-sr;
     }
@@ -28,7 +27,9 @@
   // UI: export controls
   .export-controls {
     @include box-sizing(border-box);
+
     @extend %ui-window;
+
     padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
 
     .title {
@@ -38,15 +39,16 @@
     .action-export {
       @extend %btn-primary-blue;
       @extend %t-action1;
+
       display: block;
       margin: $baseline 0;
       padding: ($baseline*0.75) $baseline;
     }
 
     .action {
-
       .icon {
         @extend %t-icon2;
+
         display: inline-block;
         vertical-align: middle;
         margin-right: ($baseline/4);
@@ -63,14 +65,16 @@
   // UI: export rules
   .export-contents {
     @include clearfix();
+
     margin: ($baseline*2) 0;
 
     .export-includes, .export-excludes {
-      width: flex-grid(4,9);
+      width: flex-grid(4, 9);
 
       .item-detail {
         @extend %t-copy-sub1;
         @extend %wipe-last-child;
+
         padding-bottom: ($baseline/4);
         border-bottom: 1px solid $gray-l4;
         margin-bottom: ($baseline/4);
@@ -91,16 +95,18 @@
   // UI: upload progress
   .wrapper-status {
     @include transition(opacity $tmg-f2 ease-in-out 0);
-    opacity: 1.0;
+
+    opacity: 1;
 
     // STATE: hidden
     &.is-hidden {
-      opacity: 0.0;
+      opacity: 0;
       display: none;
     }
 
     > .title {
       @extend %t-title4;
+
       margin-bottom: $baseline;
       border-bottom: 1px solid $gray-l3;
       padding-bottom: ($baseline/2);
@@ -112,11 +118,13 @@
       .status-visual {
         position: relative;
         float: left;
-        width: flex-grid(1,9);
+        width: flex-grid(1, 9);
 
         .icon {
           @include transition(opacity $tmg-f1 ease-in-out 0);
+
           @extend %t-icon4;
+
           position: absolute;
           top: ($baseline/2);
           left: $baseline;
@@ -125,7 +133,7 @@
 
       .status-detail {
         float: left;
-        width: flex-grid(8,9);
+        width: flex-grid(8, 9);
         margin-left: ($baseline*3);
 
         .title {
@@ -135,6 +143,7 @@
 
         .copy {
           @extend %t-copy-base;
+
           color: $gray-l2;
         }
       }
@@ -142,6 +151,7 @@
       .item-progresspoint {
         @include clearfix();
         @include transition(opacity $tmg-f1 ease-in-out 0);
+
         margin-bottom: $baseline;
         border-bottom: 1px solid $gray-l4;
         padding-bottom: $baseline;
@@ -154,7 +164,6 @@
 
         // CASE: has actions
         &.has-actions {
-
           .list-actions {
             display: none;
 
@@ -166,14 +175,13 @@
 
         // TYPE: success
         &.item-progresspoint-success {
-
           .item-progresspoint-success-date {
             @include margin-left($baseline/4);
+
             display: none;
           }
 
           &.is-complete {
-
             .item-progresspoint-success-date {
               display: inline;
             }
@@ -187,12 +195,12 @@
 
           .fa-warning {
             visibility: hidden;
-            opacity: 0.0;
+            opacity: 0;
           }
 
           .fa-cog {
             visibility: visible;
-            opacity: 1.0;
+            opacity: 1;
           }
 
           .fa-check {
@@ -202,31 +210,29 @@
 
         // STATE: started
         &.is-started {
-
           .fa-warning  {
             visibility: hidden;
-            opacity: 0.0;
+            opacity: 0;
           }
 
           .fa-cog {
             @include animation(fa-spin 2s infinite linear);
 
             visibility: visible;
-            opacity: 1.0;
+            opacity: 1;
           }
         }
 
         // STATE: completed
         &.is-complete {
-
           .fa-cog {
             visibility: visible;
-            opacity: 1.0;
+            opacity: 1;
           }
 
           .fa-warning {
             visibility: hidden;
-            opacity: 0.0;
+            opacity: 0;
           }
 
           .icon {
@@ -244,15 +250,14 @@
 
         // STATE: error
         &.has-error {
-
           .fa-cog {
             visibility: hidden;
-            opacity: 0.0;
+            opacity: 0;
           }
 
           .fa-warning {
             visibility: visible;
-            opacity: 1.0;
+            opacity: 1;
           }
 
           .icon {
diff --git a/cms/static/sass/views/_group-configuration.scss b/cms/static/sass/views/_group-configuration.scss
index 7a16c2935a..ba89d4aa98 100644
--- a/cms/static/sass/views/_group-configuration.scss
+++ b/cms/static/sass/views/_group-configuration.scss
@@ -1,7 +1,6 @@
 // studio - views - group-configurations
 // ====================
 .view-group-configurations {
-
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
     @include float(left);
@@ -9,11 +8,13 @@
 
   .content-primary {
     @include margin-right(flex-gutter());
+
     width: flex-grid(9, 12);
 
     .notice-moduledisabled {
       @extend %ui-well;
       @extend %t-copy-base;
+
       background-color: $white;
       padding: ($baseline*1.5) $baseline;
       text-align: center;
@@ -21,6 +22,7 @@
 
     .no-content {
       @extend %no-content;
+
       color: $gray-d1;
     }
 
@@ -30,6 +32,7 @@
       .title {
         @extend %t-title4;
         @extend %t-strong;
+
         margin-bottom: ($baseline/2);
       }
 
@@ -40,11 +43,12 @@
 
     .wrapper-collection {
       @extend %ui-window;
+
       position: relative;
       outline: none;
 
       &:hover .collection .actions {
-        opacity: 1.0;
+        opacity: 1;
       }
 
       .collection-details {
@@ -60,11 +64,14 @@
           @extend %cont-truncated;
           @extend %t-title5;
           @extend %t-strong;
+
           @include margin-right($baseline*14);
+
           color: $black;
 
           .toggle {
             @include padding-left($baseline);
+
             display: inline-block;
             color: $black;
 
@@ -74,13 +81,16 @@
 
             .ui-toggle-expansion {
               @include transition(rotate .15s ease-in-out .25s);
+
               @extend %t-action1;
+
               @include margin-left(-$baseline);
+
               display: inline-block;
               width: ($baseline*0.75);
               vertical-align: baseline;
 
-              &.fa-caret-right:before {
+              &.fa-caret-right::before {
                 @include rtl {
                   // Flip to fa-caret-left on RTL
                   content: "\f0d9";
@@ -105,17 +115,21 @@
 
       .collection-info {
         @extend %t-copy-sub1;
+
         @include margin-left($baseline);
+
         color: $gray-l1;
 
         &.group-configuration-info-inline {
           @include margin($baseline/4, 0, $baseline/2, $baseline);
+
           display: table;
           width: 70%;
 
           li {
             @include box-sizing(border-box);
             @include margin-right(1%);
+
             display: table-cell;
 
             &.group-configuration-usage-count {
@@ -132,12 +146,14 @@
 
         &.collection-info-inline {
           @include margin($baseline/4, 0, $baseline/2, $baseline);
+
           display: table;
           width: 70%;
 
           li {
             @include box-sizing(border-box);
             @include margin-right(1%);
+
             display: table-cell;
             padding: ($baseline/4) 0;
 
@@ -159,10 +175,12 @@
 
       .collection-items {
         @include margin-left($baseline);
+
         margin-bottom: ($baseline*0.75);
 
         .item {
           @extend %t-copy-lead1;
+
           padding: ($baseline/7) 0 ($baseline/4);
           border-top: 1px solid $gray-l4;
           white-space: nowrap;
@@ -173,6 +191,7 @@
 
           .name {
             @include margin-right(5%);
+
             overflow: hidden;
             text-overflow: ellipsis;
             display: inline-block;
@@ -183,16 +202,17 @@
       }
 
       .collection-details {
-
         .actions {
           @include transition(opacity .15s .25s ease-in-out);
           @include right($baseline);
+
           position: absolute;
           top: $baseline;
-          opacity: 0.0;
+          opacity: 0;
 
           .action {
             @include margin-right($baseline/4);
+
             display: inline-block;
             vertical-align: middle;
 
@@ -214,7 +234,9 @@
 
       .collection-references {
         @extend %t-copy-sub1;
+
         @include padding($baseline, $baseline*1.5, $baseline, $baseline*2.5);
+
         box-shadow: 0 2px 2px 0 $shadow inset;
         color: $gray-l1;
 
@@ -230,11 +252,13 @@
 
             .fa-warning {
               @include margin($baseline/4, $baseline/2, 0, $baseline*1.5);
+
               color: $orange;
             }
 
             .fa-times-circle {
               @include margin($baseline/4, $baseline/2, 0, $baseline*1.5);
+
               color: $red-l2;
             }
           }
@@ -243,13 +267,16 @@
 
       .usage-validation {
         @extend %t-copy-sub1;
+
         @include padding($baseline, $baseline*1.5, $baseline, $baseline*1.5);
+
         background-color: $gray-l6;
         margin-top: $baseline;
 
         .fa-warning {
           @include margin($baseline/2, $baseline, 0, 0);
           @include float(left);
+
           color: $orange;
         }
 
@@ -260,6 +287,7 @@
 
       .collection-edit {
         @include box-sizing(border-box);
+
         border-radius: 2px;
         width: 100%;
         background: $white;
@@ -274,7 +302,9 @@
 
         .tip {
           @extend %t-copy-sub2;
+
           @include transition(color, 0.15s, ease-in-out);
+
           display: block;
           margin-top: ($baseline/4);
           color: $gray-d1;
@@ -287,6 +317,7 @@
 
         .collection-fields {
           @extend %cont-no-list;
+
           margin-bottom: $baseline;
         }
 
@@ -298,13 +329,13 @@
           }
 
           &.required {
-
             label {
               @extend %t-strong;
             }
 
-            label:after {
+            label::after {
               @include margin-left($baseline/4);
+
               content: "*";
             }
           }
@@ -319,6 +350,7 @@
 
           label {
             @extend %t-copy-sub1;
+
             @include transition(color, 0.15s, ease-in-out);
             @include margin(0, 0, $baseline/4, 0);
 
@@ -330,6 +362,7 @@
           //this section is borrowed from _account.scss - we should clean up and unify later
           input, textarea {
             @extend %t-copy-base;
+
             height: 100%;
             width: 100%;
             padding: ($baseline/2);
@@ -343,19 +376,19 @@
             }
 
             ::-webkit-input-placeholder {
-               color: $gray-l4;
+              color: $gray-l4;
             }
 
             :-moz-placeholder {
-               color: $gray-l3;
+              color: $gray-l3;
             }
 
             ::-moz-placeholder {
-               color: $gray-l3;
+              color: $gray-l3;
             }
 
             :-ms-input-placeholder {
-               color: $gray-l3;
+              color: $gray-l3;
             }
 
             &:focus {
@@ -366,36 +399,39 @@
           }
 
           &.error {
-              label {
-                color: $red;
-              }
+            label {
+              color: $red;
+            }
 
-              input {
-                border-color: $red;
-              }
+            input {
+              border-color: $red;
+            }
           }
         }
 
         label.required {
           @extend %t-strong;
 
-          &:after {
+          &::after {
             @include margin-left($baseline/4);
+
             content: "*";
           }
         }
 
         .field.add-collection-name {
-
           label {
             width: 50%;
+
             @extend %t-title5;
+
             display: inline-block;
             vertical-align: bottom;
           }
 
           .group-configuration-id {
             @include text-align(right);
+
             display: inline-block;
             width: 45%;
             vertical-align: top;
@@ -403,7 +439,9 @@
 
             .group-configuration-value {
               @extend %t-strong;
+
               @include margin-left($baseline*0.5);
+
               white-space: nowrap;
             }
           }
@@ -427,16 +465,19 @@
           // add a group is below with groups styling
           .action-primary {
             @extend %btn-primary-blue;
+
             padding: ($baseline/4) $baseline;
           }
 
           .action-secondary {
             @extend %btn-secondary-gray;
+
             padding: ($baseline/4) $baseline;
           }
 
           .wrapper-delete-button {
             @include float(right);
+
             padding: ($baseline/4) ($baseline/2);
 
             .is-disabled {
@@ -447,7 +488,9 @@
 
         .copy {
           @extend %t-copy-sub2;
+
           @include margin($baseline, 0, $baseline/2, 0);
+
           color: $gray;
 
           strong {
@@ -460,7 +503,9 @@
         @extend %ui-btn-flat-outline;
         @extend %t-action2;
         @extend %t-strong;
+
         @include margin($baseline*1.5, 0, 0, 0);
+
         display: block;
         width: 100%;
         padding: ($baseline/2);
@@ -470,6 +515,7 @@
     // add/new collection
     .action-add {
       @extend %ui-btn-flat-outline;
+
       display: block;
       width: 100%;
       margin-top: ($baseline*0.75);
@@ -481,6 +527,7 @@
 
       .icon {
         @include margin-right($baseline/2);
+
         display: inline-block;
         vertical-align: middle;
       }
@@ -488,22 +535,20 @@
 
     // specific group-type styles
     .content-groups {
-
       .collection-header{
-
-         .title {
-            margin-bottom: 0;
+        .title {
+          margin-bottom: 0;
         }
       }
     }
 
     .experiment-groups {
-
       .group-configuration-details {
-
         .group-configuration-info {
           @extend %t-copy-sub1;
+
           @include margin-left($baseline);
+
           color: $gray-l1;
 
           .group-configuration-label {
@@ -518,10 +563,12 @@
 
         .groups {
           @include margin-left($baseline);
+
           margin-bottom: ($baseline*0.75);
 
           .group {
             @extend %t-copy-lead1;
+
             padding: ($baseline/7) 0 ($baseline/4);
             border-top: 1px solid $gray-l4;
             white-space: nowrap;
@@ -532,6 +579,7 @@
 
             .group-name {
               @include margin-right(5%);
+
               overflow: hidden;
               text-overflow: ellipsis;
               display: inline-block;
@@ -541,6 +589,7 @@
 
             .group-allocation {
               @include text-align(right);
+
               display: inline-block;
               vertical-align: middle;
               width: 20%;
@@ -551,9 +600,9 @@
       }
 
       .group-configuration-edit {
-
         .add-collection-name label {
           @include padding-right(5%);
+
           overflow: hidden;
           text-overflow: ellipsis;
           vertical-align: bottom;
@@ -567,6 +616,7 @@
           .group-allocation,
           .field {
             @include margin(0, 3%, 0, 0);
+
             display: inline-block;
             vertical-align: middle;
           }
@@ -591,7 +641,9 @@
 
           .action-close {
             @include transition(color $tmg-f2 ease-in-out);
+
             @extend %t-action1;
+
             display: inline-block;
             border: 0;
             padding: 0;
diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss
index bfedc974a8..60d7857132 100644
--- a/cms/static/sass/views/_import.scss
+++ b/cms/static/sass/views/_import.scss
@@ -2,7 +2,6 @@
 // ====================
 
 .view-import {
-
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
   }
@@ -18,14 +17,18 @@
   // UI: export controls
   .export-controls {
     @extend %ui-window;
+
     @include clearfix();
+
     padding: ($baseline*1.5) ($baseline*2);
   }
 
   // UI: import form
   .import-form {
     @include box-sizing(border-box);
+
     @extend %ui-window;
+
     padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
 
     > .title {
@@ -53,12 +56,14 @@
   .action-choose-file {
     @extend %btn-primary-green;
     @extend %t-action1;
+
     display: block;
     margin: $baseline 0;
     padding: ($baseline*0.75) $baseline;
 
     .icon {
       @extend %t-icon2;
+
       display: inline-block;
       vertical-align: middle;
       margin-right: ($baseline/4);
@@ -75,12 +80,14 @@
   // UI: elem - file selection
   .wrapper-file-name {
     @extend %ui-well;
+
     margin: $baseline 0;
     padding: $baseline ($baseline*1.5);
     background-color: $gray-l4;
 
     .title {
       @extend %t-copy-lead1;
+
       overflow-x: hidden;
       text-overflow: ellipsis;
       margin-bottom: 0;
@@ -98,6 +105,7 @@
     .submit-button {
       @extend %btn-primary-green;
       @extend %t-action1;
+
       display: none;
       margin-top: ($baseline*0.75);
       width: 100%;
@@ -110,16 +118,18 @@
   // UI: upload progress
   .wrapper-status {
     @include transition(opacity $tmg-f2 ease-in-out 0);
-    opacity: 1.0;
+
+    opacity: 1;
 
     // STATE: hidden
     &.is-hidden {
-      opacity: 0.0;
+      opacity: 0;
       display: none;
     }
 
     > .title {
       @extend %t-title4;
+
       margin-bottom: $baseline;
       border-bottom: 1px solid $gray-l3;
       padding-bottom: ($baseline/2);
@@ -131,11 +141,13 @@
       .status-visual {
         position: relative;
         float: left;
-        width: flex-grid(1,9);
+        width: flex-grid(1, 9);
 
         .icon {
           @include transition(opacity $tmg-f1 ease-in-out 0);
+
           @extend %t-icon4;
+
           position: absolute;
           top: ($baseline/2);
           left: $baseline;
@@ -144,7 +156,7 @@
 
       .status-detail {
         float: left;
-        width: flex-grid(8,9);
+        width: flex-grid(8, 9);
         margin-left: ($baseline*3);
 
         .title {
@@ -154,6 +166,7 @@
 
         .copy {
           @extend %t-copy-base;
+
           color: $gray-l2;
         }
       }
@@ -161,6 +174,7 @@
       .item-progresspoint {
         @include clearfix();
         @include transition(opacity $tmg-f1 ease-in-out 0);
+
         margin-bottom: $baseline;
         border-bottom: 1px solid $gray-l4;
         padding-bottom: $baseline;
@@ -173,7 +187,6 @@
 
         // CASE: has actions
         &.has-actions {
-
           .list-actions {
             display: none;
 
@@ -185,14 +198,13 @@
 
         // TYPE: success
         &.item-progresspoint-success {
-
           .item-progresspoint-success-date {
             @include margin-left($baseline/4);
+
             display: none;
           }
 
           &.is-complete {
-
             .item-progresspoint-success-date {
               display: inline;
             }
@@ -206,12 +218,12 @@
 
           .fa-warning {
             visibility: hidden;
-            opacity: 0.0;
+            opacity: 0;
           }
 
           .fa-cog {
             visibility: visible;
-            opacity: 1.0;
+            opacity: 1;
           }
 
           .fa-check {
@@ -221,31 +233,29 @@
 
         // STATE: started
         &.is-started {
-
           .fa-warning  {
             visibility: hidden;
-            opacity: 0.0;
+            opacity: 0;
           }
 
           .fa-cog {
             @include animation(fa-spin 2s infinite linear);
 
             visibility: visible;
-            opacity: 1.0;
+            opacity: 1;
           }
         }
 
         // STATE: completed
         &.is-complete {
-
           .fa-cog {
             visibility: visible;
-            opacity: 1.0;
+            opacity: 1;
           }
 
           .fa-warning {
             visibility: hidden;
-            opacity: 0.0;
+            opacity: 0;
           }
 
           .icon {
@@ -263,15 +273,14 @@
 
         // STATE: error
         &.has-error {
-
           .fa-cog {
             visibility: hidden;
-            opacity: 0.0;
+            opacity: 0;
           }
 
           .fa-warning {
             visibility: visible;
-            opacity: 1.0;
+            opacity: 1;
           }
 
           .icon {
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
index b08261a321..1f209bf393 100644
--- a/cms/static/sass/views/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -2,15 +2,14 @@
 // ====================
 
 .view-howitworks {
-
   &.not-signedin {
-
     .wrapper-header {
       margin-bottom: 0;
     }
 
     .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
       @include box-sizing(border-box);
+
       margin: 0;
       padding: 0 $baseline;
       position: relative;
@@ -19,7 +18,9 @@
 
     .content {
       @extend %t-copy-base;
+
       @include clearfix();
+
       max-width: $fg-max-width;
       min-width: $fg-min-width;
       width: flex-grid(12);
@@ -51,7 +52,8 @@
 
     // welcome content
     .wrapper-content-header {
-      @include linear-gradient($blue-l1,$blue,$blue-d1);
+      @include linear-gradient($blue-l1, $blue, $blue-d1);
+
       padding-bottom: ($baseline*4);
       padding-top: ($baseline*4);
     }
@@ -64,6 +66,7 @@
       h1 {
         @extend %t-title2;
         @extend %t-strong;
+
         float: none;
         margin: 0 0 ($baseline/2) 0;
         border-bottom: 1px solid $blue-l1;
@@ -77,11 +80,13 @@
 
       .logo {
         @extend %t-strong;
+
         margin-left: ($baseline/2);
       }
 
       .tagline {
         @extend %t-title4;
+
         margin: 0;
         color: $blue-l3;
       }
@@ -92,7 +97,8 @@
       background: $white;
       border: 4px solid $black;
     }
-    .arrow_box:after, .arrow_box:before {
+
+    .arrow_box::after, .arrow_box::before {
       top: 100%;
       border: solid transparent;
       content: " ";
@@ -102,14 +108,15 @@
       pointer-events: none;
     }
 
-    .arrow_box:after {
+    .arrow_box::after {
       border-color: rgba(255, 255, 255, 0);
       border-top-color: $white;
       border-width: 30px;
       left: 50%;
       margin-left: -($baseline*1.5);
     }
-    .arrow_box:before {
+
+    .arrow_box::before {
       border-color: $transparent;
       border-top-color: $black;
       border-width: 36px;
@@ -126,7 +133,6 @@
     }
 
     .content-features {
-
       .list-features {
 
       }
@@ -134,18 +140,21 @@
       // indiv features
       .feature {
         @include clearfix();
+
         margin: 0 0 ($baseline*2) 0;
         border-bottom: 1px solid $gray-l4;
         padding: 0 0 ($baseline*2) 0;
 
         .img {
           @include box-sizing(border-box);
+
           float: left;
           width: flex-grid(3, 12);
           margin-right: flex-gutter();
 
           a {
             @include box-sizing(border-box);
+
             box-shadow: 0 1px ($baseline/10) $shadow-l1;
             position: relative;
             top: 0;
@@ -157,14 +166,17 @@
 
             .action-zoom {
               @include transition(bottom $tmg-f2 ease-in-out 0s);
+
               position: absolute;
               bottom: -30px;
               right: ($baseline/2);
-              opacity: 0.0;
+              opacity: 0;
 
               .icon {
                 @include border-top-radius(3px);
+
                 @extend %t-icon4;
+
                 display: inline-block;
                 padding: ($baseline/2);
                 background: $blue;
@@ -177,7 +189,7 @@
               border-color: $blue;
 
               .action-zoom {
-                opacity: 1.0;
+                opacity: 1;
                 bottom: -2px;
               }
             }
@@ -198,28 +210,34 @@
           h3 {
             @extend %t-title4;
             @extend %t-strong;
+
             margin: 0 0 ($baseline/2) 0;
           }
 
           > p {
             @extend %t-copy-lead1;
+
             color: $gray-d1;
           }
 
           strong {
             @extend %t-strong;
+
             color: $gray-d2;
           }
 
           .list-proofpoints {
             @extend %t-copy-sub1;
+
             @include clearfix();
+
             width: flex-grid(9, 9);
             margin: ($baseline*1.5) 0 0 0;
 
             .proofpoint {
               @include box-sizing(border-box);
               @include transition(all $tmg-f2 ease-in-out 0s);
+
               border-radius: ($baseline/4);
               position: relative;
               top: 0;
@@ -233,12 +251,14 @@
               .title {
                 @extend %t-copy-base;
                 @extend %t-strong;
+
                 margin: 0 0 ($baseline/4) 0;
                 color: $gray-d3;
               }
 
               &:hover {
                 @extend %ui-fake-link;
+
                 box-shadow: 0 1px ($baseline/10) $shadow-l1;
                 background: $blue-l5;
                 top: -($baseline/5);
@@ -263,7 +283,6 @@
         }
 
         &:nth-child(even) {
-
           .img {
             float: right;
             margin-right: 0;
@@ -276,7 +295,6 @@
           }
 
           .list-proofpoints {
-
             .proofpoint {
               float: right;
               width: flex-grid(3, 9);
@@ -324,8 +342,10 @@
 
           &.action-primary {
             @include blue-button;
+
             @extend %t-action1;
             @extend %t-strong;
+
             padding: ($baseline*0.75) ($baseline/2);
             text-align: center;
             text-transform: uppercase;
@@ -333,6 +353,7 @@
 
           &.action-secondary {
             @extend %t-action3;
+
             margin-top: ($baseline/2);
           }
         }
diff --git a/cms/static/sass/views/_maintenance.scss b/cms/static/sass/views/_maintenance.scss
index 8f18be8246..7de3928fd5 100644
--- a/cms/static/sass/views/_maintenance.scss
+++ b/cms/static/sass/views/_maintenance.scss
@@ -1,70 +1,85 @@
 .maintenance-header {
-    text-align: center;
-    margin-top: 50px;
+  text-align: center;
+  margin-top: 50px;
 
-    h2 {
-      margin-bottom: 10px;
-    }
+  h2 {
+    margin-bottom: 10px;
+  }
 }
+
 .maintenance-content {
   padding: 3rem 0;
+
   .maintenance-list {
     max-width: 1280px;
     margin: 0 auto;
+
     .view-list-container {
       padding: 10px 15px;
       background-color: #fff;
       border-bottom: 1px solid #ddd;
+
       &:hover {
         background-color: #fafafa;
       }
+
       .view-name {
         display: inline-block;
         width: 20%;
         float: left;
       }
+
       .view-desc {
         display: inline-block;
         width: 80%;
-      font-size: 15px;
+        font-size: 15px;
       }
     }
   }
+
   .maintenance-form {
     width: 60%;
     margin: auto;
+
     .result-list {
       height: calc(100vh - 200px);
       overflow: auto;
     }
+
     .result{
       box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
       margin-top: 15px;
       padding: 15px 30px;
       background: #f9f9f9;
     }
+
     li {
       font-size: 13px;
       line-height: 9px;
     }
+
     .actions {
       text-align: right;
     }
+
     .field-radio div {
       display: inline-block;
       margin-right: 10px;
     }
+
     div.error {
-      color: #F00;
+      color: #f00;
       margin-top: 10px;
       font-size: 13px;
     }
+
     div.head-output {
       font-size: 13px;
       margin-bottom: 10px;
     }
+
     div.main-output {
-      color: #0A0;
+      color: #0a0;
       font-size: 15px;
     }
   }
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 92e7240227..926d650f75 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -5,12 +5,12 @@
 // --------------------
 %outline-item-header {
   @include clearfix();
+
   line-height: 0;
 
   // CASE: is-editable
   // TODO: abstract out
   .is-editable {
-
     .incontext-editor-value, .incontext-editor-action-wrapper {
       vertical-align: top;
     }
@@ -21,7 +21,8 @@
 
     .incontext-editor-open-action {
       @include transition(opacity $tmg-f1 ease-in-out 0);
-      opacity: 0.0;
+
+      opacity: 0;
     }
 
     .incontext-editor-form {
@@ -33,6 +34,7 @@
     // TOOD: abstract this out into a Sass placeholder
     .incontext-editor-input {
       @include transition(box-shadow $tmg-f1 ease-in-out 0, color $tmg-f1 ease-in-out 0);
+
       width: 100%;
       background: none repeat scroll 0 0 $white;
       border: 0;
@@ -40,16 +42,15 @@
 
       // STATE: focus
       &:focus {
-        box-shadow: 0 0 2px 2px rgba($ui-action-primary-color-focus, 0.50) inset;
+        box-shadow: 0 0 2px 2px rgba($ui-action-primary-color-focus, 0.5) inset;
         color: $ui-action-primary-color-focus;
       }
     }
 
     // STATE: hover/focus
     &:hover, &:focus {
-
       .incontext-editor-open-action {
-        opacity: 1.0;
+        opacity: 1;
       }
     }
   }
@@ -91,7 +92,6 @@
 
     // STATE: action will collapse all
     &.collapse-all {
-
       .expand-all {
         display: none;
       }
@@ -103,7 +103,6 @@
 
     // STATE: action will expand all
     &.expand-all {
-
       .collapse-all {
         display: none;
       }
@@ -121,6 +120,7 @@
   .new-section-name,
   .new-subsection-name-input {
     @extend %t-copy-base;
+
     display: inline-block;
     width: 515px;
     padding: ($baseline/4);
@@ -130,9 +130,11 @@
   .new-subsection-name-input {
     @extend %t-copy-sub1;
   }
+
   .new-section-name-save,
   .new-subsection-name-save {
     @include blue-button();
+
     margin: 0 5px;
     padding: 4px 20px 7px;
     color: $white;
@@ -141,6 +143,7 @@
   .new-section-name-cancel,
   .new-subsection-name-cancel {
     @include white-button();
+
     padding: 4px 20px 7px;
     color: $gray-l1;
   }
@@ -149,6 +152,7 @@
   .new-subsection-item,
   .new-unit-item {
     @extend %ui-btn-flat-outline;
+
     width: 100%;
     margin: 0 0 ($baseline/2) 0;
     border: 1px solid $gray-l3;
@@ -181,13 +185,14 @@
     .status-release,
     .status-pacing {
       @extend %t-copy-base;
+
       display: inline-block;
       color: $color-copy-base;
 
       // STATE: hover
       &:hover {
         .status-actions {
-          opacity: 1.0;
+          opacity: 1;
         }
       }
     }
@@ -214,9 +219,11 @@
 
     .status-actions {
       @extend %actions-list;
+
       @include transition(opacity $tmg-f1 ease-in-out 0);
+
       margin-left: ($baseline/4);
-      opacity: 0.0;
+      opacity: 0;
     }
   }
 
@@ -230,7 +237,6 @@
 
   // UI: complex version of the outline
   .outline-complex {
-
     .outline-content {
       margin-top: 0;
     }
@@ -274,7 +280,7 @@
 
       // STATE: drag and drop
       .drop-target-prepend .draggable-drop-indicator-initial {
-        opacity: 1.0;
+        opacity: 1;
       }
 
       // STATE: was dropped
@@ -300,6 +306,7 @@
 
       .section-header-details {
         @include float(left);
+
         width: flex-grid(6, 9);
 
         .icon, .wrapper-section-title {
@@ -317,10 +324,10 @@
         }
 
         .action-edit.action-inline {
-
           .icon {
             @include margin-right(0);
             @include transform(none);
+
             vertical-align: middle;
           }
         }
@@ -328,8 +335,10 @@
 
       .section-header-actions {
         @include float(right);
+
         width: flex-grid(3, 9);
         margin-top: -($baseline/4);
+
         @include text-align(right);
 
         .actions-list {
@@ -359,13 +368,13 @@
 
         .ui-toggle-expansion {
           @extend %t-icon3;
+
           color: $gray-l3;
         }
       }
 
       // STATE: is-collapsed
       &.is-collapsed {
-
         .section-content {
           @extend %outline-item-content-hidden;
         }
@@ -397,6 +406,7 @@
 
       .subsection-header-details {
         @include float(left);
+
         width: flex-grid(6, 9);
 
         .icon, .wrapper-subsection-title {
@@ -415,9 +425,9 @@
         }
 
         .action-edit.action-inline {
-
           .icon {
             @include transform(none);
+
             margin-right: 0;
             vertical-align: middle;
           }
@@ -426,13 +436,16 @@
 
       .subsection-header-actions {
         @include float(right);
+
         width: flex-grid(3, 9);
         margin-top: -($baseline/4);
+
         @include text-align(right);
 
         .actions-list {
           @extend %actions-list;
           @extend %t-action2;
+
           margin-right: ($baseline/2);
         }
       }
@@ -458,13 +471,13 @@
 
         .ui-toggle-expansion {
           @extend %t-icon4;
+
           color: $gray-l3;
         }
       }
 
       // STATE: is-collapsed
       &.is-collapsed {
-
         .subsection-content {
           @extend %outline-item-content-hidden;
         }
@@ -479,6 +492,7 @@
 
     .outline-unit {
       @include transition(margin $tmg-f2 linear 0s); // needed for drag and drop transitions
+
       margin-left: $outline-indent-width;
 
       // header
@@ -488,14 +502,17 @@
 
       .unit-header-details {
         @include float(left);
+
         width: flex-grid(6, 9);
         margin-top: ($baseline/4);
       }
 
       .unit-header-actions {
         @include float(right);
+
         width: flex-grid(3, 9);
         margin-top: -($baseline/10);
+
         @include text-align(right);
 
         .actions-list {
@@ -511,12 +528,14 @@
 
       .button-new {
         @extend %ui-btn-flat-outline;
+
         padding: ($baseline/2) $baseline;
         display: block;
 
         .icon {
           display: inline-block;
           vertical-align: middle;
+
           @include margin-right($baseline/2);
         }
       }
@@ -539,7 +558,6 @@
   // UI: drag and drop: section
   // --------------------
   .outline-section {
-
     .ui-splint-indicator {
       height: ($baseline/10);
       margin-left: ($baseline/4);
@@ -558,7 +576,6 @@
 
   // UI: drag and drop: subsection
   .outline-subsection {
-
     .ui-splint-indicator {
       height: ($baseline/10);
       margin-left: ($baseline*1.25);
@@ -575,7 +592,6 @@
 
   // // UI: drag and drop: unit
   .outline-unit {
-
     .draggable-drop-indicator-before {
       top: -($baseline*0.75);
     }
@@ -591,14 +607,17 @@
 
     .draggable-drop-indicator {
       @extend %ui-depth3;
+
       @include transition(opacity $tmg-f2 linear 0s);
       @include size(100%, auto);
+
       position: absolute;
       border-top: 1px solid $blue-l1;
-      opacity: 0.0;
+      opacity: 0;
 
       .fa-caret-right {
         @extend %t-icon5;
+
         position: absolute;
         top: -12px;
         left: -($baseline/4);
@@ -620,9 +639,7 @@
   .wrapper-modal-window-bulkpublish-subsection,
   .wrapper-modal-window-bulkpublish-unit,
   .course-outline-modal {
-
     .list-fields {
-
       .field {
         display: inline-block;
         vertical-align: top;
@@ -637,7 +654,9 @@
 
         label {
           @extend %t-copy-sub1;
+
           @include transition(color $tmg-f3 ease-in-out 0s);
+
           margin: 0 0 ($baseline/4) 0;
           font-weight: 600;
 
@@ -649,7 +668,9 @@
 
         input, textarea {
           @extend %t-copy-base;
+
           @include transition(all $tmg-f2 ease-in-out 0s);
+
           height: 100%;
           width: 100%;
           padding: ($baseline/2);
@@ -676,7 +697,6 @@
 
       // CASE: select input
       .field-select {
-
         .label, .input {
           display: inline-block;
           vertical-align: middle;
@@ -693,7 +713,6 @@
     }
 
     .edit-settings-grading {
-
       .grading-type {
         margin-bottom: $baseline;
       }
@@ -704,7 +723,6 @@
   .bulkpublish-section-modal,
   .bulkpublish-subsection-modal,
   .bulkpublish-unit-modal {
-
     .modal-introduction {
       color: $gray-d2;
     }
@@ -727,6 +745,7 @@
 
     .outline-subsection .subsection-title {
       @extend %t-title8;
+
       margin-bottom: ($baseline/4);
       font-weight: 600;
       color: $gray-l2;
@@ -740,11 +759,13 @@
 
     .outline-unit .unit-title {
       @extend %t-title7;
+
       color: $color-heading-base;
     }
 
     .outline-unit .unit-status {
       @extend %t-copy-sub2;
+
       text-align: right;
     }
 
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index 603492f717..f53fd56206 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -17,19 +17,23 @@
   .content-primary {
     @extend %ui-window;
     @extend .ui-col-wide;
+
     padding: $baseline ($baseline*1.5);
   }
 
   // messages - should be synced up with global messages in the future
   .message {
     @extend %t-copy-sub1;
+
     display: block;
   }
 
   .message-status {
     @include border-top-radius(2px);
     @include box-sizing(border-box);
+
     @extend %t-strong;
+
     display: none;
     border-bottom: 2px solid $yellow;
     margin: 0 0 $baseline 0;
@@ -67,7 +71,6 @@
 
     // course details that should appear more like content than elements to change
     .is-not-editable {
-
       label {
 
       }
@@ -75,6 +78,7 @@
       input, textarea {
         @extend %t-copy-lead1;
         @extend %t-strong;
+
         box-shadow: none;
         border: none;
         background: none;
@@ -94,16 +98,22 @@
       .title-2 {
         width: flex-grid(4, 9);
         margin: 0;
+
         @include margin-right(flex-gutter());
         @include float(left);
       }
 
       .tip {
         @extend %t-copy-sub2;
+
         width: flex-grid(5, 9);
+
         @include float(right);
+
         margin-top: ($baseline/2);
+
         @include text-align(right);
+
         color: $gray-d1;
       }
     }
@@ -124,12 +134,15 @@
 
     .instructions {
       @extend %t-copy-sub1;
+
       margin: 0 0 $baseline 0;
     }
 
     .tip {
       @extend %t-copy-sub2;
+
       @include transition(color $tmg-f2 ease-in-out 0s);
+
       display: block;
       margin-top: ($baseline/4);
       color: $gray-d1;
@@ -137,11 +150,13 @@
 
     .tip-inline {
       display: inline;
+
       @include margin-left($baseline/4);
     }
 
     .message-error {
       @extend %t-copy-sub1;
+
       display: block;
       margin-top: ($baseline/4);
       margin-bottom: ($baseline/2);
@@ -151,6 +166,7 @@
     // buttons
     .remove-item {
       @include white-button;
+
       @extend %t-action3;
       @extend %t-strong;
     }
@@ -165,20 +181,22 @@
 
       .show-data{
         .heading{
-          border: 1px solid #E0E0E0;
+          border: 1px solid #e0e0e0;
           padding: 5px 15px;
           margin-top: 5px;
         }
-         .div-grade-requirements{
-            border: 1px solid #E0E0E0;
-            border-top: none;
-            padding: 10px 15px;
-           label{font-weight: 600;}
-           input#entrance-exam-minimum-score-pct{
-              height: 40px;
-              font-size: 18px;
-           }
-         }
+
+        .div-grade-requirements{
+          border: 1px solid #e0e0e0;
+          border-top: none;
+          padding: 10px 15px;
+          label{font-weight: 600;}
+
+          input#entrance-exam-minimum-score-pct{
+            height: 40px;
+            font-size: 18px;
+          }
+        }
       }
 
       #heading-entrance-exam{
@@ -197,12 +215,11 @@
         }
 
         &.required {
-
           label {
             @extend %t-strong;
           }
 
-          label:after {
+          label::after {
             margin-left: ($baseline/4);
             content: "*";
           }
@@ -214,8 +231,10 @@
 
         label {
           @include transition(color $tmg-f2 ease-in-out 0s);
+
           @extend %t-copy-sub1;
           @extend %t-strong;
+
           margin: 0 0 ($baseline/4) 0;
 
           &.is-focused {
@@ -225,8 +244,10 @@
 
         input, textarea {
           @extend %t-copy-base;
+
           @include placeholder($gray-l4);
-          @include size(100%,100%);
+          @include size(100%, 100%);
+
           padding: ($baseline/2);
 
           &.long {
@@ -240,7 +261,6 @@
           }
 
           &:focus {
-
             + .tip {
               color: $gray-d1;
             }
@@ -249,11 +269,12 @@
 
         .input-minimum-grade {
           @include float(left);
-          @include size(92%,100%);
+          @include size(92%, 100%);
         }
 
         .minimum-grade-percentage-sign {
           @include line-height(30);
+
           padding-left: ($baseline/4);;
         }
 
@@ -275,14 +296,15 @@
 
       .field-group {
         @include clearfix();
+
         margin: 0 0 ($baseline/2) 0;
       }
 
       // enumerated/grouped lists
       &.enum {
-
         .field-group {
           @include box-sizing(border-box);
+
           border-radius: 3px;
           background: $gray-l5;
           padding: $baseline;
@@ -293,6 +315,7 @@
 
           .actions {
             @include clearfix();
+
             margin-top: ($baseline/2);
             border-top: 1px solid $gray-l4;
             padding-top: ($baseline/2);
@@ -316,9 +339,9 @@
 
     // specific fields - basic
     &.basic {
-
       .list-input {
         @include clearfix();
+
         padding: 0 ($baseline/2);
 
         .field {
@@ -327,7 +350,6 @@
       }
 
       .is-not-editable {
-
         input, textarea {
           padding: 0;
         }
@@ -378,6 +400,7 @@
 
         .title {
           @extend %t-copy-sub1;
+
           margin: 0 0 ($baseline/10) 0;
           padding: 0 ($baseline/2);
 
@@ -392,7 +415,9 @@
 
           .link-courseURL {
             @extend %t-copy-lead1;
+
             @include box-sizing(border-box);
+
             display: block;
             width: 100%;
             overflow: hidden;
@@ -401,7 +426,7 @@
             color: $uxpl-blue-base;
 
             &:hover {
-                color: $uxpl-blue-hover-active;
+              color: $uxpl-blue-hover-active;
             }
           }
         }
@@ -419,6 +444,7 @@
 
             .icon {
               @extend %t-icon5;
+
               display: inline-block;
               vertical-align: middle;
               margin-top: -3px;
@@ -430,7 +456,6 @@
 
     // specific fields - schedule
     &.schedule {
-
       .list-input {
         margin-bottom: ($baseline*1.5);
 
@@ -441,6 +466,7 @@
 
       .field-group {
         @include clearfix();
+
         border-bottom: 1px solid $gray-l5;
         padding-bottom: ($baseline/2);
 
@@ -450,7 +476,6 @@
         }
 
         .is-not-editable {
-
           input, textarea {
             padding: 10px;
           }
@@ -458,6 +483,7 @@
 
         .field {
           @include float(left);
+
           width: flex-grid(3, 9);
           margin-bottom: ($baseline/4);
           margin-right: flex-gutter();
@@ -469,6 +495,7 @@
           .tip {
             position: absolute;
             top: 0;
+
             @include right(0);
           }
         }
@@ -477,7 +504,6 @@
 
     // specific fields - overview
     #field-course-overview {
-
       #course-overview {
         height: ($baseline*20);
       }
@@ -490,15 +516,16 @@
 
     // specific fields - video
     #field-course-introduction-video {
-
       .input-existing {
         @include box-sizing(border-box);
+
         border-radius: 3px;
         background: $gray-l5;
         padding: ($baseline/2);
 
         .actions {
           @include clearfix();
+
           margin-top: ($baseline/2);
           border-top: 1px solid $gray-l4;
           padding-top: ($baseline/2);
@@ -518,7 +545,6 @@
 
     // specific fields - course image
     #field-course-image, #field-banner-image, #field-video-thumbnail-image {
-
       .current-course-image {
         margin-bottom: ($baseline/2);
         padding: ($baseline/2) $baseline;
@@ -545,6 +571,7 @@
 
         .msg {
           @extend %t-copy-sub2;
+
           display: block;
           margin-top: ($baseline/2);
           color: $gray-d3;
@@ -553,18 +580,21 @@
 
       .wrapper-input {
         @include clearfix();
-        width: flex-grid(9,9);
+
+        width: flex-grid(9, 9);
 
         .input {
           float: left;
-          width: flex-grid(6,9);
+          width: flex-grid(6, 9);
           margin-right: flex-gutter();
         }
 
         .action-upload-image {
           @extend %ui-btn-flat-outline;
+
           @include float(right);
-          width: flex-grid(2,9);
+
+          width: flex-grid(2, 9);
           margin-top: ($baseline/4);
           padding: ($baseline/2) $baseline;
         }
@@ -573,7 +603,6 @@
 
     // specific fields - requirements
     &.requirements {
-
       #field-course-effort {
         width: flex-grid(3, 9);
       }
@@ -585,14 +614,16 @@
 
       .grade-controls {
         @include clearfix();
-        width: flex-grid(9,9);
+
+        width: flex-grid(9, 9);
       }
 
       .new-grade-button {
         @include box-sizing(border-box);
         @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
-        box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
-        width: flex-grid(1,9);
+
+        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
+        width: flex-grid(1, 9);
         height: ($baseline*2);
         position: relative;
         display: inline-block;
@@ -615,7 +646,8 @@
 
       .grade-slider {
         @include box-sizing(border-box);
-        width: flex-grid(8,9);
+
+        width: flex-grid(8, 9);
         display: inline-block;
         vertical-align: middle;
 
@@ -630,6 +662,7 @@
 
             li {
               @include font-size(9);
+
               position: absolute;
               top: 52px;
               width: 30px;
@@ -710,6 +743,7 @@
 
               .remove-button {
                 @extend %t-action5;
+
                 display: none;
                 position: absolute;
                 top: -17px;
@@ -741,12 +775,14 @@
               .letter-grade {
                 @extend %t-copy-base;
                 @extend %t-strong;
+
                 display: block;
                 margin: 5px 15px 0 0;
               }
 
               .range {
                 @include font-size(10);
+
                 display: block;
                 margin-right: ($baseline*0.75);
                 line-height: 12px;
@@ -760,8 +796,8 @@
                 width: 2px;
                 background-color: $white;
                 box-shadow: -1px 0 3px rgba(0,0,0,0.1);
-
                 cursor: ew-resize;
+
                 @include transition(none);
 
                 &:hover {
@@ -777,7 +813,6 @@
 
     // specific fields - grading rules
     &.grade-rules {
-
       #field-course-grading-graceperiod {
         width: flex-grid(3, 9);
       }
@@ -789,9 +824,7 @@
     }
 
     &.assignment-types {
-
       .list-input {
-
         &:last-child {
           margin-bottom: 0;
         }
@@ -799,6 +832,7 @@
 
       .field-group {
         @include clearfix();
+
         width: flex-grid(9, 9);
         margin-bottom: ($baseline*1.5);
         border-bottom: 1px solid $gray-l5;
@@ -842,12 +876,14 @@
     &.course-learning-info {
       .list-input {
         margin-bottom: $baseline;
+
         .course-settings-learning-fields {
           .field {
             .input-learning-info {
               width: flex-grid(10, 12);
               display: inline-block;
             }
+
             .delete-button {
               padding-bottom: 3px;
               line-height: 3.5rem;
@@ -874,19 +910,23 @@
         .course-instructor-details-fields {
           .field {
             width: flex-grid(2, 6);
+
             &.field-course-instructor-bio {
               width: flex-grid(6, 6);
             }
+
             &.current-instructor-image {
               width: flex-grid(6, 6);
               text-align: left;
               padding: 0;
+
               .wrapper-instructor-image {
                 margin: 15px auto;
               }
             }
           }
         }
+
         &:last-child {
           margin-bottom: 0;
         }
@@ -894,6 +934,7 @@
 
       .field-group {
         @include clearfix();
+
         width: flex-grid(9, 9);
         margin-bottom: ($baseline*1.5);
         border-bottom: 1px solid $gray-l5;
@@ -939,6 +980,7 @@
 
           .msg {
             @extend %t-copy-sub2;
+
             display: block;
             margin-top: ($baseline/2);
             color: $gray-l5;
@@ -947,18 +989,20 @@
 
         .wrapper-input {
           @include clearfix();
-          width: flex-grid(9,9);
+
+          width: flex-grid(9, 9);
 
           .input {
             float: left;
-            width: flex-grid(6,9);
+            width: flex-grid(6, 9);
             margin-right: flex-gutter();
           }
 
           .action-upload-instructor-image {
             @extend %ui-btn-flat-outline;
+
             float: right;
-            width: flex-grid(2,9);
+            width: flex-grid(2, 9);
             margin-top: ($baseline/4);
             padding: ($baseline/2) $baseline;
           }
@@ -981,13 +1025,13 @@
 
     // specific fields - advanced settings
     &.advanced-policies {
-
       .wrapper-options {
         margin: (-$baseline/2) 0 ($baseline/2) 0;
         text-align: right;
 
         .wrapper-deprecated-setting {
           @include transition(opacity $tmg-f2 ease-in-out 0s);
+
           opacity: .5;
           position: relative;
           display: inline-block;
@@ -1026,15 +1070,16 @@
 
       .course-advanced-policy-list-item {
         @include clearfix();
+
         position: relative;
 
         .title {
           @extend %t-strong;
+
           margin-top: ($baseline/2);
         }
 
         .field {
-
           input {
             width: 100%;
           }
@@ -1044,9 +1089,8 @@
           }
 
           input.error {
-
             & + .tip {
-              opacity: 0.0;
+              opacity: 0;
             }
           }
         }
@@ -1056,9 +1100,9 @@
           margin: 0 0 ($baseline/2) 0;
         }
 
-       .key {
-         width: flex-grid(3, 9);
-         margin-right: flex-gutter();
+        .key {
+          width: flex-grid(3, 9);
+          margin-right: flex-gutter();
         }
 
         .value {
@@ -1091,9 +1135,13 @@
       // specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
       .CodeMirror {
         @extend %t-copy-base;
+
         @include box-sizing(border-box);
+
         box-shadow: 0 1px 2px $shadow-l1 inset;
+
         @include linear-gradient($lightGrey, tint($lightGrey, 90%));
+
         padding: 5px 8px;
         border: 1px solid $mediumGrey;
         border-radius: 2px;
@@ -1106,6 +1154,7 @@
 
         &.CodeMirror-focused {
           @include linear-gradient($paleYellow, tint($paleYellow, 90%));
+
           outline: 0;
         }
 
@@ -1116,7 +1165,6 @@
         .CodeMirror-scroll {
           @include margin-left(-30px);
           @include margin-right(0);
-
           @include padding-left(30px);
           @include padding-right(0);
         }
@@ -1128,7 +1176,6 @@
 
         // editor color changes just for JSON
         .CodeMirror-lines {
-
           .cm-string {
             color: #cb9c40;
           }
@@ -1146,9 +1193,7 @@
   }
 
   .wrapper-modal-window {
-
     .validation-error-modal-content {
-
       .error-header {
         p {
           strong {
@@ -1195,7 +1240,9 @@
 
       .field-radio {
         display: inline-block;
+
         @include margin-right($baseline/4);
+
         width: auto;
         height: auto;
 
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index a4194913e8..3ee8b14f6d 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -7,6 +7,7 @@
   .content-primary,
   .content-supplementary {
     @include box-sizing(border-box);
+
     float: left;
   }
 
@@ -16,6 +17,7 @@
 
     .add-pages {
       @extend %no-content;
+
       margin: ($baseline*1.5) 0;
       color: $gray-d1;
     }
@@ -26,6 +28,7 @@
 
       .copy {
         @extend %t-copy-base;
+
         opacity: 1;
       }
     }
@@ -39,7 +42,6 @@
     top: 6px;
 
     .actions-list {
-
       .action-item {
         position: relative;
         display: inline-block;
@@ -50,6 +52,7 @@
         .action-button,
         .toggle-actions-view {
           @include transition(all $tmg-f2 ease-in-out 0s);
+
           display: inline-block;
           border: 0;
           background: none;
@@ -134,12 +137,14 @@
 
     .wrapper-component-editor {
       @extend %ui-depth4;
+
       position: relative;
       background: $lightBluishGrey2;
     }
 
     .component-editor {
       @include edit-box;
+
       box-shadow: none;
       display: none;
       padding: 0;
@@ -147,17 +152,17 @@
 
       //Overrides general edit-box mixin
       .row {
-        margin-bottom: 0px;
+        margin-bottom: 0;
       }
 
       // This duplicates the styling from Unit page editing
       .module-actions {
         box-shadow: inset 0 1px 1px $shadow;
-        padding: 0px 0 10px 10px;
+        padding: 0 0 10px 10px;
         background-color: $gray-l6;
 
         .save-button {
-        margin: ($baseline/2) 8px 0 0;
+          margin: ($baseline/2) 8px 0 0;
         }
       }
     }
@@ -204,7 +209,9 @@
 
     .drag-handle {
       @extend %ui-depth1;
+
       @include right(0);
+
       position: absolute;
       display: block;
       top: 0;
@@ -227,6 +234,7 @@
     // uses similar styling as assets.scss, unit.scss
     .wrapper-component-action-header {
       @include box-sizing(border-box);
+
       position: absolute;
       width: 100%;
       padding: $baseline/4 $baseline/2;
@@ -241,9 +249,11 @@
     .component-actions,
     .course-nav-item-actions {
       display: inline-block;
+
       @include float(right);
       @include margin-right($baseline*2);
-      padding: 8px 0px;
+
+      padding: 8px 0;
       vertical-align: middle;
       text-align: center;
 
@@ -253,6 +263,7 @@
 
         .action-button {
           @include transition(all $tmg-f2 ease-in-out 0s);
+
           display: block;
           padding: 0 $baseline/2;
           width: auto;
@@ -296,7 +307,9 @@
 
     &.is-fixed {
       @extend %ui-disabled;
+
       @include transition(opacity $tmg-f2 ease-in-out 0s);
+
       opacity: 0.5;
     }
 
@@ -310,7 +323,8 @@
 
       .title-sub {
         @extend %t-title7;
-         color: $gray-l2;
+
+        color: $gray-l2;
       }
     }
 
@@ -335,7 +349,9 @@
 
   .xblock-student_view {
     @include transition(background-color $tmg-s3 linear 0s);
+
     @extend %t-title4;
+
     padding: 20px 20px 22px;
     background: $white;
   }
@@ -368,6 +384,7 @@
 
   .static-page-details {
     @extend %ui-window;
+
     padding: 32px 40px;
 
     .row {
@@ -377,13 +394,16 @@
 
   .page-display-name-input {
     @extend %t-copy-lead1;
+
     width: 100%;
   }
 
   .page-contents {
     @include box-sizing(border-box);
-    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
+    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
+
     @extend %t-copy-sub1;
+
     width: 100%;
     height: 360px;
     padding: 15px;
diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss
index b9dee5bede..6e78ed535b 100644
--- a/cms/static/sass/views/_textbooks.scss
+++ b/cms/static/sass/views/_textbooks.scss
@@ -2,7 +2,6 @@
 // ====================
 
 .view-textbooks {
-
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
   }
@@ -12,11 +11,13 @@
 
     .no-textbook-content {
       @extend %no-content;
+
       color: $gray-d1;
     }
 
     .textbook {
       @extend %ui-window;
+
       position: relative;
 
       .view-textbook {
@@ -30,12 +31,15 @@
         .textbook-title {
           @extend %t-title4;
           @extend %t-strong;
+
           @include margin-right($baseline*14);
         }
 
         .ui-toggle-expansion {
           @include transition(rotate .15s ease-in-out .25s);
+
           @extend %t-action1;
+
           display: inline-block;
           width: ($baseline*0.75);
           vertical-align: text-bottom;
@@ -58,6 +62,7 @@
 
           .chapter {
             @extend %t-copy-sub2;
+
             margin-bottom: ($baseline/4);
             border-bottom: 1px solid $gray-l4;
 
@@ -81,9 +86,11 @@
 
         .actions {
           @include transition(opacity .15s .25s ease-in-out);
-          opacity: 0.0;
+
+          opacity: 0;
           position: absolute;
           top: $baseline;
+
           @include right($baseline);
 
           .action {
@@ -92,11 +99,13 @@
 
             .view {
               @include blue-button;
+
               @extend %t-action4;
             }
 
             .edit {
               @include blue-button;
+
               @extend %t-action4;
             }
 
@@ -110,182 +119,191 @@
       }
 
       &:hover .actions {
-        opacity: 1.0;
+        opacity: 1;
       }
 
-    .edit-textbook {
+      .edit-textbook {
         @include box-sizing(border-box);
+
         border-radius: 2px;
         width: 100%;
         background: $white;
 
-      .wrapper-form {
-        padding: $baseline ($baseline*1.5);
-      }
+        .wrapper-form {
+          padding: $baseline ($baseline*1.5);
+        }
 
 
-      fieldset {
+        fieldset {
           margin-bottom: $baseline;
-      }
-
-      .actions {
-        box-shadow: inset 0 1px 2px $shadow;
-        border-top: 1px solid $gray-l1;
-        padding: ($baseline*0.75) $baseline;
-        background: $gray-l6;
-
-        .action {
-          margin-right: ($baseline/4);
-
-          &:last-child {
-            margin-right: 0;
-          }
         }
 
-        // add a chapter is below with chapters styling
+        .actions {
+          box-shadow: inset 0 1px 2px $shadow;
+          border-top: 1px solid $gray-l1;
+          padding: ($baseline*0.75) $baseline;
+          background: $gray-l6;
+
+          .action {
+            margin-right: ($baseline/4);
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+
+          // add a chapter is below with chapters styling
+
+          .action-primary {
+            @include blue-button;
+            @include transition(all .15s);
+
+            @extend %t-action2;
+            @extend %t-strong;
+
+            display: inline-block;
+            padding: ($baseline/5) $baseline;
+            text-transform: uppercase;
+          }
+
+          .action-secondary {
+            @include grey-button;
+            @include transition(all .15s);
+
+            @extend %t-action2;
+            @extend %t-strong;
+
+            display: inline-block;
+            padding: ($baseline/5) $baseline;
+            text-transform: uppercase;
+          }
+
 
-        .action-primary {
-          @include blue-button;
-          @include transition(all .15s);
-          @extend %t-action2;
-          @extend %t-strong;
-          display: inline-block;
-          padding: ($baseline/5) $baseline;
-          text-transform: uppercase;
         }
 
-        .action-secondary {
-          @include grey-button;
-          @include transition(all .15s);
-          @extend %t-action2;
-          @extend %t-strong;
-          display: inline-block;
-          padding: ($baseline/5) $baseline;
-          text-transform: uppercase;
+        .copy {
+          @extend %t-copy-sub2;
+
+          margin: ($baseline) 0 ($baseline/2) 0;
+          color: $gray;
+
+
+          strong {
+            @extend %t-strong;
+          }
+
+
         }
 
+        .chapters-fields,
+        .textbook-fields {
+          @extend %cont-no-list;
 
-      }
+          .field {
+            margin: 0 0 ($baseline*0.75) 0;
 
-      .copy {
-        @extend %t-copy-sub2;
-        margin: ($baseline) 0 ($baseline/2) 0;
-        color: $gray;
-
-
-        strong {
-          @extend %t-strong;
-        }
-
-
-      }
-
-      .chapters-fields,
-      .textbook-fields {
-        @extend %cont-no-list;
-
-        .field {
-          margin: 0 0 ($baseline*0.75) 0;
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-
-          &.required {
-
-            label {
-              @extend %t-strong;
+            &:last-child {
+              margin-bottom: 0;
             }
 
-            label:after {
-              margin-left: ($baseline/4);
-              content: "*";
-            }
-          }
+            &.required {
+              label {
+                @extend %t-strong;
+              }
 
-          label, input, textarea {
-            display: block;
-          }
-
-          label {
-            @extend %t-copy-sub1;
-            @include transition(color, 0.15s, ease-in-out);
-            margin: 0 0 ($baseline/4) 0;
-
-            &.is-focused {
-              color: $uxpl-blue-base;
-            }
-          }
-
-
-          &.add-textbook-name label {
-            @extend %t-title5;
-          }
-
-
-          //this section is borrowed from _account.scss - we should clean up and unify later
-          input, textarea {
-            @extend %t-copy-base;
-            height: 100%;
-            width: 100%;
-            padding: ($baseline/2);
-
-            &.long {
-              width: 100%;
-            }
-
-            &.short {
-              width: 25%;
-            }
-
-            ::-webkit-input-placeholder {
-               color: $gray-l4;
-            }
-
-            :-moz-placeholder {
-               color: $gray-l3;
-            }
-
-            ::-moz-placeholder {
-               color: $gray-l3;
-            }
-
-            :-ms-input-placeholder {
-               color: $gray-l3;
-            }
-
-            &:focus {
-
-              + .tip {
-                color: $gray-d1;
+              label::after {
+                margin-left: ($baseline/4);
+                content: "*";
               }
             }
-          }
 
-          textarea.long {
-            height: ($baseline*5);
-          }
-
-          input[type="checkbox"] {
-            display: inline-block;
-            margin-right: ($baseline/4);
-            width: auto;
-            height: auto;
-
-            & + label {
-              display: inline-block;
+            label, input, textarea {
+              display: block;
             }
-          }
 
-          .tip {
-            @extend %t-copy-sub2;
-            @include transition(color, 0.15s, ease-in-out);
-            display: block;
-            margin-top: ($baseline/4);
-            color: $gray-d1;
-          }
+            label {
+              @extend %t-copy-sub1;
 
-          &.error {
+              @include transition(color, 0.15s, ease-in-out);
+
+              margin: 0 0 ($baseline/4) 0;
+
+              &.is-focused {
+                color: $uxpl-blue-base;
+              }
+            }
+
+
+            &.add-textbook-name label {
+              @extend %t-title5;
+            }
+
+
+            //this section is borrowed from _account.scss - we should clean up and unify later
+            input, textarea {
+              @extend %t-copy-base;
+
+              height: 100%;
+              width: 100%;
+              padding: ($baseline/2);
+
+              &.long {
+                width: 100%;
+              }
+
+              &.short {
+                width: 25%;
+              }
+
+              ::-webkit-input-placeholder {
+                color: $gray-l4;
+              }
+
+              :-moz-placeholder {
+                color: $gray-l3;
+              }
+
+              ::-moz-placeholder {
+                color: $gray-l3;
+              }
+
+              :-ms-input-placeholder {
+                color: $gray-l3;
+              }
+
+              &:focus {
+                + .tip {
+                  color: $gray-d1;
+                }
+              }
+            }
+
+            textarea.long {
+              height: ($baseline*5);
+            }
+
+            input[type="checkbox"] {
+              display: inline-block;
+              margin-right: ($baseline/4);
+              width: auto;
+              height: auto;
+
+              & + label {
+                display: inline-block;
+              }
+            }
+
+            .tip {
+              @extend %t-copy-sub2;
+
+              @include transition(color, 0.15s, ease-in-out);
+
+              display: block;
+              margin-top: ($baseline/4);
+              color: $gray-d1;
+            }
+
+            &.error {
               label {
                 color: $red;
               }
@@ -293,65 +311,76 @@
               input {
                 border-color: $red;
               }
-          }
-        }
-
-        .field-group {
-          @include clearfix();
-          margin: 0 0 ($baseline/2) 0;
-
-          .field {
-            display: block;
-            width: 46%;
-            border-bottom: none;
-            @include margin(0, ($baseline*0.75), 0, 0);
-            padding: ($baseline/4) 0 0 0;
-            @include float(left);
-            position: relative;
-
-            input, textarea {
-              width: 100%;
             }
+          }
 
-            .action-upload {
+          .field-group {
+            @include clearfix();
+
+            margin: 0 0 ($baseline/2) 0;
+
+            .field {
+              display: block;
+              width: 46%;
+              border-bottom: none;
+
+              @include margin(0, ($baseline*0.75), 0, 0);
+
+              padding: ($baseline/4) 0 0 0;
+
+              @include float(left);
+
+              position: relative;
+
+              input, textarea {
+                width: 100%;
+              }
+
+              .action-upload {
                 @extend %ui-btn-flat-outline;
+
                 position: absolute;
                 top: 3px;
+
                 @include right(0);
+              }
+
             }
 
-          }
+            .action-close {
+              @include transition(color $tmg-f2 ease-in-out);
 
-          .action-close {
-            @include transition(color $tmg-f2 ease-in-out);
-            @extend %t-action1;
-            display: inline-block;
-            float: right;
-            margin-top: ($baseline*2);
-            border: 0;
-            padding: 0;
-            background: transparent;
-            color: $blue-l3;
+              @extend %t-action1;
 
-            &:hover {
-              color: $blue;
+              display: inline-block;
+              float: right;
+              margin-top: ($baseline*2);
+              border: 0;
+              padding: 0;
+              background: transparent;
+              color: $blue-l3;
+
+              &:hover {
+                color: $blue;
+              }
             }
           }
         }
-      }
 
 
-      .action-add-chapter {
-        @extend %ui-btn-flat-outline;
-        @extend %t-action1;
-        display: block;
-        width: 100%;
-        margin: ($baseline*1.5) 0 0 0;
-        padding: ($baseline/2);
+        .action-add-chapter {
+          @extend %ui-btn-flat-outline;
+          @extend %t-action1;
+
+          display: block;
+          width: 100%;
+          margin: ($baseline*1.5) 0 0 0;
+          padding: ($baseline/2);
+        }
       }
     }
   }
-}
+
   .content-supplementary {
     @extend .ui-col-narrow;
   }
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
deleted file mode 100644
index 9ceb0ee843..0000000000
--- a/cms/static/sass/views/_unit.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// studio - views - unit
-// ====================
-// .view-unit styles will go here once we split it from container
-
-.view-unit {
-
-}
diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss
index 8b53f7f2d3..82201c4723 100644
--- a/cms/static/sass/views/_updates.scss
+++ b/cms/static/sass/views/_updates.scss
@@ -2,7 +2,6 @@
 // ====================
 
 .view-updates {
-
   .course-info-wrapper {
     display: table;
     width: 100%;
@@ -42,6 +41,7 @@
 
     &.editing {
       @extend %ui-depth4;
+
       position: relative;
       padding: 0;
       border-top: none;
@@ -56,12 +56,14 @@
     h1 {
       @extend %t-title4;
       @extend %t-light;
+
       float: none;
     }
 
     h2 {
       @extend %t-title7;
       @extend %t-strong;
+
       margin-bottom: 18px;
       line-height: 30px;
       color: #646464;
@@ -71,30 +73,32 @@
     h3 {
       @extend %t-title6;
       @extend %t-strong;
+
       margin: 34px 0 11px;
     }
 
     .display-date {
-        padding-right: 15px;
+      padding-right: 15px;
     }
 
     .message-error {
-        display: inline-block;
-        font-weight: normal;
-        font-size: 1.2em;
+      display: inline-block;
+      font-weight: normal;
+      font-size: 1.2em;
 
-        &:before {
-            content: "\f06a";
-            font-family: FontAwesome;
-            color: #fdbc56;
-            padding: 5px;
-        }
+      &::before {
+        content: "\f06a";
+        font-family: FontAwesome;
+        color: #fdbc56;
+        padding: 5px;
+      }
     }
   }
 
   .update-contents {
     p {
       @extend %t-copy-base;
+
       line-height: 25px;
     }
 
@@ -128,6 +132,7 @@
 
     pre {
       @extend %t-copy-base;
+
       margin: 1em 0;
       color: $baseFontColor;
       font-family: monospace, serif;
@@ -151,6 +156,7 @@
 
   .new-update-form {
     @include edit-box;
+
     margin-bottom: 24px;
     padding: 30px;
     border: none;
@@ -166,8 +172,10 @@
     .edit-button,
     .delete-button {
       @include white-button();
+
       @extend %t-action4;
       @extend %t-regular;
+
       float: left;
       padding: 3px 10px 4px;
       margin-left: 7px;
@@ -181,25 +189,31 @@
 }
 
 .course-handouts {
-	@extend %ui-window;
-	width: 30%;
-	padding: 20px 30px;
-	margin: 0;
-	@include border-radius(0, 3px, 3px, 0);
-	@include border-left(none);
-	background: $uxpl-light-blue-base;
+  @extend %ui-window;
 
-	.title {
-		@extend %t-title4;
+  width: 30%;
+  padding: 20px 30px;
+  margin: 0;
+
+  @include border-radius(0, 3px, 3px, 0);
+  @include border-left(none);
+
+  background: $uxpl-light-blue-base;
+
+  .title {
+    @extend %t-title4;
     @extend %t-light;
-    margin-bottom: 24px;
-	}
 
-	.edit-button {
+    margin-bottom: 24px;
+  }
+
+  .edit-button {
     @include white-button;
+
     @extend %t-action4;
     @extend %t-regular;
-		float: right;
+
+    float: right;
     padding: 3px 10px 4px;
     margin-left: 7px;
 
@@ -220,7 +234,9 @@
 
 .edit-handouts-form {
   @extend %ui-depth4;
+
   @include edit-box;
+
   position: absolute;
   right: 0;
   top: 0;
diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss
index 58640f6e83..3089593068 100644
--- a/cms/static/sass/views/_users.scss
+++ b/cms/static/sass/views/_users.scss
@@ -18,9 +18,9 @@
 
   // ELEM: content
   .content {
-
     .introduction {
       @extend %t-copy-sub1;
+
       margin: 0 0 ($baseline*2) 0;
     }
   }
@@ -32,7 +32,6 @@
 
     // CASE: notice has actions {
     &.has-actions {
-
       .msg, .list-actions {
         display: inline-block;
         vertical-align: middle;
@@ -54,6 +53,7 @@
 
         .action-primary {
           @extend %btn-primary-green;
+
           padding: ($baseline/2) $baseline;
         }
       }
@@ -63,7 +63,6 @@
 
   // ELEM: new user form
   .wrapper-create-user {
-
     &.is-shown {
       height: ($baseline*15);
     }
@@ -75,10 +74,11 @@
   }
 
   .user-list {
-
     .user-item {
       @extend %ui-window;
+
       @include clearfix();
+
       position: relative;
       width: flex-grid(9, 9);
       margin: 0 0 ($baseline/2) 0;
@@ -96,16 +96,18 @@
       // ELEM: item - flag
       .flag-role {
         @extend %ui-badge;
+
         color: $white;
 
         .msg-you {
           @extend %t-strong;
+
           margin-left: ($baseline/5);
           text-transform: none;
           color: $pink-l3;
         }
 
-        &:after {
+        &::after {
           border-bottom-color: $pink-d4;
         }
 
@@ -128,6 +130,7 @@
       // ELEM: item - metadata
       .item-metadata {
         width: flex-grid(4, 9);
+
         @include margin-right(flex-gutter());
 
         .user-username, .user-email {
@@ -137,9 +140,12 @@
 
         .user-username {
           @include transition(color $tmg-f2 ease-in-out 0s);
+
           @extend %t-title4;
           @extend %t-strong;
+
           @include margin(0, ($baseline/2), ($baseline/10), 0);
+
           color: $gray-d4;
         }
 
@@ -166,8 +172,10 @@
           .add-admin-role {
             @include blue-button;
             @include transition(all .15s);
+
             @extend %t-action2;
             @extend %t-strong;
+
             display: inline-block;
             padding: ($baseline/5) $baseline;
           }
@@ -175,13 +183,17 @@
           .remove-admin-role {
             @include grey-button;
             @include transition(all .15s);
+
             @extend %t-action2;
             @extend %t-strong;
+
             display: inline-block;
             padding: ($baseline/5) $baseline;
           }
+
           .notoggleforyou {
             @extend %t-copy-sub1;
+
             color: $gray-l2;
           }
         }
@@ -191,7 +203,7 @@
 
           // STATE: disabled
           &.is-disabled {
-            opacity: 0.0;
+            opacity: 0;
             visibility: hidden;
             pointer-events: none;
           }
@@ -211,7 +223,6 @@
 
       // STATE: hover
       &:hover {
-
         .user-username {
         }
 
diff --git a/cms/static/sass/views/_video-upload.scss b/cms/static/sass/views/_video-upload.scss
index 0753ff3621..2d860384bc 100644
--- a/cms/static/sass/views/_video-upload.scss
+++ b/cms/static/sass/views/_video-upload.scss
@@ -1,13 +1,12 @@
 .view-video-uploads {
-
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
   }
 
   .nav-actions {
-
     .fa-cloud-upload {
       @extend %t-copy;
+
       vertical-align: bottom;
       margin-right: ($baseline/5);
     }
@@ -15,6 +14,7 @@
 
   .file-upload-form {
     @include clearfix();
+
     width: 100%;
 
     .file-drop-area {
@@ -22,7 +22,9 @@
       border-radius: ($baseline/5);
       padding: ($baseline*1.25);
       background: $white;
+
       @include text-align(center);
+
       cursor: pointer;
 
       &:hover,
@@ -39,11 +41,13 @@
       .fa-cloud-upload{
         font-size:7em;
         vertical-align: top;
+
         @include margin-right(0.1em);
       }
 
       .text-container {
         display: inline-block;
+
         @include text-align(left);
 
         .upload-text-link {
@@ -82,6 +86,7 @@
         .video-detail-name {
           @extend %cont-truncated;
           @extend %t-strong;
+
           margin-bottom: ($baseline/2);
           font-size: 90%;
         }
@@ -120,6 +125,7 @@
 
         &:hover {
           @include transition(all $tmg-f3);
+
           background: $white;
         }
 
@@ -168,7 +174,6 @@
   }
 
   .assets-library {
-
     .js-table-body .video-id-col {
       word-break: break-all;
     }
@@ -176,6 +181,7 @@
     .assets-title {
       display: inline-block;
       width: flex-grid(5, 9);
+
       @include margin-right(flex-gutter());
     }
 
@@ -217,7 +223,7 @@
       }
 
       .video-head-col.thumbnail-col {
-          width: 17% !important;
+        width: 17% !important;
       }
     }
   }
@@ -226,6 +232,7 @@
     display: table-row;
     white-space: nowrap;
     color: $red;
+
     .icon {
       margin: ($baseline*0.75) ($baseline/4) 0 ($baseline/2);
     }
@@ -257,6 +264,7 @@
       .requirements-text {
         font-weight: 600;
       }
+
       .requirements-instructions {
         font-size: 15px;
         font-family: "Open Sans";
@@ -264,6 +272,7 @@
         color: $gray-d2;
         line-height: 1.5;
       }
+
       .video-duration {
         opacity: 0;
       }
@@ -277,6 +286,7 @@
       &.focused {
         img, .video-duration {
           @include transition(all 0.3s linear);
+
           opacity: 0.1;
         }
       }
@@ -287,6 +297,7 @@
 
       img {
         @include transition(all 0.5s linear);
+
         opacity: 0.15;
       }
 
@@ -296,7 +307,7 @@
     }
 
     &.upload .thumbnail-action {
-        color: $blue;
+      color: $blue;
     }
 
     &.progress .thumbnail-action {
@@ -335,7 +346,9 @@
       top: 50%;
       left: 5px;;
       right: 5px;
+
       @include transform(translateY(-50%));
+
       z-index: 1;
     }
 
@@ -354,7 +367,9 @@
       position: absolute;
       text-align: center;
       bottom: 1px;
+
       @include right(1px);
+
       width: auto;
       min-width: 25%;
       color: white;
@@ -363,11 +378,11 @@
     }
 
     &.focused {
-        box-shadow: 0 0 ($baseline/5) 1px $blue;
+      box-shadow: 0 0 ($baseline/5) 1px $blue;
     }
 
     &.error {
-        box-shadow: 0 0 ($baseline/5) 1px $red;
+      box-shadow: 0 0 ($baseline/5) 1px $red;
     }
   }
 }
diff --git a/cms/static/sass/xmodule/_headings.scss b/cms/static/sass/xmodule/_headings.scss
index c58fba2f3e..07ae25606d 100644
--- a/cms/static/sass/xmodule/_headings.scss
+++ b/cms/static/sass/xmodule/_headings.scss
@@ -17,104 +17,104 @@ $headings-base-font-family:                 inherit;
 $headings-base-color:                       $gray-d2;
 
 %reset-headings {
-    margin: 0;
-    font-weight: $headings-font-weight-normal;
-    font-size: inherit;
-    line-height: inherit;
-    color: $headings-base-color;
+  margin: 0;
+  font-weight: $headings-font-weight-normal;
+  font-size: inherit;
+  line-height: inherit;
+  color: $headings-base-color;
 }
 
 %hd-1 {
-    margin-bottom: 1.41575em;
-    font-size: 2em;
-    line-height: 1.4em;
+  margin-bottom: 1.41575em;
+  font-size: 2em;
+  line-height: 1.4em;
 }
 
 
 %hd-2 {
-    font-size: 1.1125em;
-    font-weight: $headings-font-weight-bold;
-    line-height: 1.4em;
+  font-size: 1.1125em;
+  font-weight: $headings-font-weight-bold;
+  line-height: 1.4em;
 }
 
 
 %hd-3 {
-    margin-bottom: ($baseline / 2);
-    font-size: 1.35em;
-    font-weight: $headings-font-weight-normal;
-    line-height: 1.4em;
+  margin-bottom: ($baseline / 2);
+  font-size: 1.35em;
+  font-weight: $headings-font-weight-normal;
+  line-height: 1.4em;
 }
 
 
 %hd-4 {
-    margin-bottom: ($baseline / 2);
-    font-size: 1.25em;
-    font-weight: $headings-font-weight-bold;
-    line-height: 1.4em;
+  margin-bottom: ($baseline / 2);
+  font-size: 1.25em;
+  font-weight: $headings-font-weight-bold;
+  line-height: 1.4em;
 }
 
 
 %hd-5 {
-    margin-bottom: ($baseline / 2);
-    font-size: 1.1em;
-    font-weight: $headings-font-weight-bold;
-    line-height: 1.4em;
+  margin-bottom: ($baseline / 2);
+  font-size: 1.1em;
+  font-weight: $headings-font-weight-bold;
+  line-height: 1.4em;
 }
 
 
 %hd-6 {
-    margin-bottom: ($baseline / 2);
-    font-size: 1em;
-    font-weight: $headings-font-weight-bold;
-    line-height: 1.4em;
+  margin-bottom: ($baseline / 2);
+  font-size: 1em;
+  font-weight: $headings-font-weight-bold;
+  line-height: 1.4em;
 }
 
 %hd-7 {
-    margin-bottom: ($baseline / 4);
-    font-size: 14px;
-    font-weight: $headings-font-weight-bold;
-    text-transform: uppercase;
-    line-height: 1.6em;
-    letter-spacing: 1px;
+  margin-bottom: ($baseline / 4);
+  font-size: 14px;
+  font-weight: $headings-font-weight-bold;
+  text-transform: uppercase;
+  line-height: 1.6em;
+  letter-spacing: 1px;
 }
 
 %hd-8 {
-    margin-bottom: ($baseline / 8);
-    font-size: 12px;
-    font-weight: $headings-font-weight-bold;
-    text-transform: uppercase;
-    line-height: 1.5em;
-    letter-spacing: 1px;
+  margin-bottom: ($baseline / 8);
+  font-size: 12px;
+  font-weight: $headings-font-weight-bold;
+  text-transform: uppercase;
+  line-height: 1.5em;
+  letter-spacing: 1px;
 }
 
 .wrapper-xblock .xblock-render .xblock .xblock-render .xblock {
+  .hd-1,
+  .hd-2,
+  .hd-3,
+  .hd-4,
+  .hd-5,
+  .hd-6,
+  .hd-7,
+  .hd-8 {
+    @extend %reset-headings;
+  }
 
-    .hd-1,
-    .hd-2,
-    .hd-3,
-    .hd-4,
-    .hd-5,
-    .hd-6,
-    .hd-7,
-    .hd-8 {
-        @extend %reset-headings;
+
+  // ----------------------------
+  // #CANNED
+  // ----------------------------
+  // canned heading classes
+  @for $i from 1 through $headings-count {
+    .hd-#{$i} {
+      @extend %hd-#{$i};
     }
+  }
 
+  h3 {
+    @extend %hd-2;
 
-    // ----------------------------
-    // #CANNED
-    // ----------------------------
-    // canned heading classes
-    @for $i from 1 through $headings-count {
-        .hd-#{$i} {
-            @extend %hd-#{$i};
-        }
-    }
-
-    h3 {
-        @extend %hd-2;
-        font-weight: $headings-font-weight-normal;
-        // override external modules and xblocks that use inline CSS
-        text-transform: initial;
-    }
+    font-weight: $headings-font-weight-normal;
+    // override external modules and xblocks that use inline CSS
+    text-transform: initial;
+  }
 }
diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss
index 538110dac5..6ba500c339 100644
--- a/common/static/sass/_mixins-inherited.scss
+++ b/common/static/sass/_mixins-inherited.scss
@@ -122,7 +122,7 @@
   @include transition(background-color 0.15s, box-shadow 0.15s);
   @extend %t-action3;
   @extend %t-strong;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 $transparent;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 $transparent;
   display: inline-block;
   padding: ($baseline/5) $baseline ($baseline/4);
 
@@ -139,14 +139,14 @@
   }
 
   &:hover, &:focus, &:active {
-    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.15);
   }
 }
 
 @mixin green-button {
   @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $uxpl-green-base;
   border-radius: 3px;
   background-color: $uxpl-green-base;
@@ -167,7 +167,7 @@
 
 @mixin blue-button {
   @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+  @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
   border: 1px solid $uxpl-blue-base;
   border-radius: 3px;
   background-color: $uxpl-blue-base;
@@ -188,7 +188,7 @@
 
 @mixin red-button {
   @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+  @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
   border: 1px solid $red-d1;
   border-radius: 3px;
   background-color: $red;
@@ -209,7 +209,7 @@
 
 @mixin pink-button {
   @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+  @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
   border: 1px solid $pink-d1;
   border-radius: 3px;
   background-color: $pink;
@@ -231,7 +231,7 @@
 @mixin orange-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $orange-d1;
   border-radius: 3px;
   background-color: $orange;
@@ -253,12 +253,12 @@
 @mixin white-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $mediumGrey;
   border-radius: 3px;
   background-color: #dfe5eb;
   color: rgb(92, 103, 122);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 
   &:hover, &:focus {
     background-color: rgb(222, 236, 247);
@@ -268,8 +268,8 @@
 
 @mixin grey-button {
   @include button;
-  @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+  @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   border: 1px solid $gray-d2;
   border-radius: 3px;
   background-color: #d1dae3;
@@ -298,7 +298,7 @@
 
 // only needed for course updates
 @mixin edit-box {
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
   padding: 15px 20px;
   border-radius: 3px;
   background-color: $lightBluishGrey2;
@@ -344,8 +344,8 @@
 
 // sunsetted mixins
 @mixin active {
-  @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+  @include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
   box-shadow: 0 -1px 0 $shadow inset, 0 1px 0 $white inset;
-  background-color: rgba(255, 255, 255, .3);
+  background-color: rgba(255, 255, 255, 0.3);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 89dca29d3f..351ce97fc0 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -59,11 +59,13 @@
   :-moz-placeholder {
     color: $color;
   }
+
   ::-webkit-input-placeholder {
     color: $color;
   }
+
   :-ms-input-placeholder {
-     color: $color;
+    color: $color;
   }
 }
 
@@ -113,18 +115,21 @@
 %ui-wrapper {
   @include clearfix();
   @include box-sizing(border-box);
+
   width: 100%;
 }
 
 // layout placeholders
 .ui-col-wide  {
   width: flex-grid(9, 12);
+
   @include margin-right(flex-gutter());
   @include float(left);
 }
 
 .ui-col-narrow  {
   width: flex-grid(3, 12);
+
   @include float(left);
 }
 
@@ -132,6 +137,7 @@
 // ====================
 %ui-window {
   @include clearfix();
+
   border-radius: ($baseline/10);
   box-shadow: 0 1px 1px $shadow-l2;
   margin-bottom: $baseline;
@@ -172,7 +178,6 @@
 // ====================
 // extends - UI - utility - first child clearing
 %wipe-first-child {
-
   &:first-child {
     margin-top: 0;
     border-top: none;
@@ -182,7 +187,6 @@
 
 // extends - UI - utility - last child clearing
 %wipe-last-child {
-
   &:last-child {
     margin-bottom: 0;
     border-bottom: none;
@@ -195,6 +199,7 @@
 %ui-btn {
   @include box-sizing(border-box);
   @include transition(color $tmg-f2 ease-in-out 0s, border-color $tmg-f2 ease-in-out 0s, background $tmg-f2 ease-in-out 0s, box-shadow $tmg-f2 ease-in-out 0s);
+
   display: inline-block;
   cursor: pointer;
 
@@ -231,6 +236,7 @@
   @extend %ui-btn;
   @extend %ui-btn-pill;
   @extend %t-strong;
+
   padding:($baseline/2) $baseline;
   border-width: 1px;
   border-style: solid;
@@ -255,6 +261,7 @@
 %ui-btn-secondary {
   @extend %ui-btn;
   @extend %ui-btn-pill;
+
   border-width: 1px;
   border-style: solid;
   padding:($baseline/2) $baseline;
@@ -265,8 +272,10 @@
 
 %ui-btn-flat-outline {
   @include transition(all .15s);
+
   @extend %t-strong;
   @extend %t-action4;
+
   text-align: center;
   border-radius: ($baseline/4);
   border: 1px solid $uxpl-blue-base;
@@ -282,18 +291,21 @@
 
   &.is-disabled,
   &[disabled="disabled"]{
-   border: 1px solid $gray-l2;
-   background-color: $gray-l4;
-   color: $gray-l2;
-   pointer-events: none;
+    border: 1px solid $gray-l2;
+    background-color: $gray-l4;
+    color: $gray-l2;
+    pointer-events: none;
   }
 }
 
 // button with no button shell until hover for understated actions
 %ui-btn-non {
   @include transition(all .15s);
+
   @extend %ui-btn-pill;
+
   @include transition(all $tmg-f2 linear 0s);
+
   display: inline-block;
   vertical-align: middle;
   border: none;
@@ -326,6 +338,7 @@
 
 %no-content {
   @extend %ui-well;
+
   padding: ($baseline*2);
   background-color: $gray-l4;
   text-align: center;
@@ -335,6 +348,7 @@
   .action {
     @extend %btn-primary-green;
     @extend %t-action3;
+
     margin-left: $baseline;
 
     .icon {
@@ -345,8 +359,10 @@
 
 .ui-loading {
   @include animation(fadeIn $tmg-f2 linear 1);
+
   @extend %ui-well;
   @extend %t-copy-base;
+
   opacity: .6;
   background-color: $white;
   padding: ($baseline*1.5) $baseline;
@@ -354,6 +370,7 @@
 
   .spin {
     @extend %anim-rotateCW;
+
     display: inline-block;
   }
 
@@ -393,18 +410,18 @@
 // +Content - Screenreader Text - Extend
 // ====================
 %cont-text-sr {
-    // clip has been deprecated but is still supported
-    clip: rect(1px 1px 1px 1px);
-    clip: rect(1px, 1px, 1px, 1px);
-    position: absolute;
-    margin: -1px;
-    height: 1px;
-    width: 1px;
-    border: 0;
-    padding: 0;
-    overflow: hidden;
-    // ensure there are spaces in sr text
-    word-wrap: normal;
+  // clip has been deprecated but is still supported
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute;
+  margin: -1px;
+  height: 1px;
+  width: 1px;
+  border: 0;
+  padding: 0;
+  overflow: hidden;
+  // ensure there are spaces in sr text
+  word-wrap: normal;
 }
 
 // +Content - Text Wrap - Extend
@@ -417,6 +434,7 @@
 // ====================
 %cont-truncated {
   @include box-sizing(border-box);
+
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss b/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss
index bca74c2381..b1ec6504ab 100644
--- a/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss
+++ b/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss
@@ -9,9 +9,11 @@
 
   .nav-item {
     @include margin-left($baseline/4);
+
     display: inline-block;
 
-    a, a:visited {
+    a,
+    a:visited {
       color: $uxpl-blue-base;
     }
 
@@ -22,6 +24,7 @@
 
   .fa-angle-right {
     @include margin-left($baseline/4);
+
     display: inline-block;
     color: $base-font-color;
 
diff --git a/common/static/sass/edx-pattern-library-shims/_buttons.scss b/common/static/sass/edx-pattern-library-shims/_buttons.scss
index 19bcdea1e9..cb5e5d85dc 100644
--- a/common/static/sass/edx-pattern-library-shims/_buttons.scss
+++ b/common/static/sass/edx-pattern-library-shims/_buttons.scss
@@ -43,6 +43,7 @@
       @include margin-right(0);
     }
   }
+
   &.btn-small {
     @extend %btn-small;
   }
@@ -53,6 +54,7 @@
 // ----------------------------
 .btn-default {
   @extend %btn-shims;
+
   border-color: $btn-default-border-color;
   background: $btn-default-background;
   color: $btn-default-color;
@@ -88,6 +90,7 @@
 // ----------------------------
 .btn-brand {
   @extend %btn-shims;
+
   border-color: $btn-brand-border-color;
   background: $btn-brand-background;
   color: $btn-brand-color;
@@ -118,4 +121,3 @@
     color: $btn-brand-disabled-color;
   }
 }
-
diff --git a/common/static/sass/edx-pattern-library-shims/_form.scss b/common/static/sass/edx-pattern-library-shims/_form.scss
index 12891fa241..3cc79c2181 100644
--- a/common/static/sass/edx-pattern-library-shims/_form.scss
+++ b/common/static/sass/edx-pattern-library-shims/_form.scss
@@ -6,12 +6,12 @@
 
 .post-type-label {
   @include margin-right($baseline);
+
   display: inline-block;
   line-height: 100%;
 }
 
 .field-label {
-
   .post-options & {
     display: inline-block;
   }
diff --git a/scripts/all-tests.sh b/scripts/all-tests.sh
index eb9f23d8bf..43d83d93bd 100755
--- a/scripts/all-tests.sh
+++ b/scripts/all-tests.sh
@@ -13,7 +13,7 @@ set -e
 # Violations thresholds for failing the build
 export PYLINT_THRESHOLD=3600
 export ESLINT_THRESHOLD=9134
-export STYLELINT_THRESHOLD=18416
+export STYLELINT_THRESHOLD=15579
 
 XSSLINT_THRESHOLDS=`cat scripts/xsslint_thresholds.json`
 export XSSLINT_THRESHOLDS=${XSSLINT_THRESHOLDS//[[:space:]]/}