diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss
index 52da224092422c..980d626639da91 100644
--- a/src/components/Breadcrumb/Breadcrumb.scss
+++ b/src/components/Breadcrumb/Breadcrumb.scss
@@ -16,119 +16,115 @@ $Breadcrumb-itemMaxWidth-sm: 116px;
 .ms-Breadcrumb {
   @include ms-baseFont;
   margin: 23px 0 1px;
+}
 
-  .ms-Breadcrumb-list {
-    white-space: nowrap;
-    padding: 0;
-    margin: 0;
-  }
-
-  .ms-Breadcrumb-chevron {
-    font-size: $ms-font-size-s;
-    color: $ms-color-neutralSecondary;
-    vertical-align: top;
-    margin: 11px 7px;
-  }
+.ms-Breadcrumb-list {
+  white-space: nowrap;
+  padding: 0;
+  margin: 0;
+}
 
-  .ms-Breadcrumb-listItem {
-    list-style-type: none;
-    vertical-align: top;
-    margin: 0;
-    padding: 0;
-    display: inline-block;
-    position: relative;
+.ms-Breadcrumb-chevron {
+  font-size: $ms-font-size-s;
+  color: $ms-color-neutralSecondary;
+  vertical-align: top;
+  margin: 11px 7px;
+}
 
-    &:last-of-type {
-      .ms-Breadcrumb-chevron {
-        display: none;
-      }
-    }
+.ms-Breadcrumb-listItem {
+  list-style-type: none;
+  vertical-align: top;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  position: relative;
 
-    .ms-Breadcrumb-itemLink {
-      @include focus-border;
-      @include ms-font-xl;
-      color: $ms-color-neutralPrimary;
-      display: inline-block;
-      padding: 0 4px;
-      max-width: $Breadcrumb-itemMaxWidth;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      vertical-align: top;
+  &:last-of-type {
+    .ms-Breadcrumb-chevron {
+      display: none;
     }
   }
 
-  .ms-Breadcrumb-overflow {
+  .ms-Breadcrumb-itemLink {
+    @include focus-border;
+    @include ms-font-xl;
+    color: $ms-color-neutralPrimary;
     display: inline-block;
-    position: relative;
-
-    .ms-Breadcrumb-overflowButton {
-      font-size: $Breadcrumb-overflowButtonSize;
-      display: inline-block;
-      color: $Breadcrumb-overflowButtonColor;
-      padding: 8px;
-      cursor: pointer;
-      vertical-align: top;
-    }
+    padding: 0 4px;
+    max-width: $Breadcrumb-itemMaxWidth;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    vertical-align: top;
   }
+}
 
-  .ms-Breadcrumb-itemLink,
-  .ms-Breadcrumb-overflowButton {
-    text-decoration: none;
-    outline: transparent;
+.ms-Breadcrumb-overflow {
+  display: inline-block;
+  position: relative;
+}
 
-    &:hover {
-      background-color: $selectedHoverBackgroundColor;
-      color: $Breadcrumb-buttonHoverColor;
-      cursor: pointer;
-    }
+.ms-Breadcrumb-overflowButton {
+  font-size: $Breadcrumb-overflowButtonSize;
+  display: inline-block;
+  color: $Breadcrumb-overflowButtonColor;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: top;
+}
 
-    &:focus {
-      outline: $ms-color-neutralSecondaryAlt solid 1px;
-      color: $ms-color-neutralDark;
-    }
+.ms-Breadcrumb-itemLink,
+.ms-Breadcrumb-overflowButton {
+  text-decoration: none;
+  outline: transparent;
 
-    &:active {
-      outline: transparent;
-      background-color: $selectedActiveBackgroundColor;
-      color: $selectedActiveForegroundColor;
-    }
+  &:hover {
+    background-color: $selectedHoverBackgroundColor;
+    color: $Breadcrumb-buttonHoverColor;
+    cursor: pointer;
   }
 
-  @media screen and (max-width: $ms-screen-md-max) {
-    margin: 11px 0 1px;
+  &:focus {
+    outline: $ms-color-neutralSecondaryAlt solid 1px;
+    color: $ms-color-neutralDark;
+  }
 
-    .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink {
-      font-size: $ms-font-size-l;
-    }
+  &:active {
+    outline: transparent;
+    background-color: $selectedActiveBackgroundColor;
+    color: $selectedActiveForegroundColor;
+  }
+}
 
-    .ms-Breadcrumb-chevron {
-      font-size: $ms-font-size-mi;
-      margin: 8px 5px;
-    }
+@media screen and (max-width: $ms-screen-md-max) {
+  margin: 11px 0 1px;
 
-    .ms-Breadcrumb-overflow {
-      .ms-Breadcrumb-overflowButton {
-        font-size: $ms-font-size-m-plus;
-        padding: 5px 4px;
-      }
-    }
+  .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink {
+    font-size: $ms-font-size-l;
   }
 
-  @media screen and (max-width: $ms-screen-sm-max) {
-    .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink {
-      font-size: $ms-font-size-m;
-      max-width: $Breadcrumb-itemMaxWidth-sm;
-    }
+  .ms-Breadcrumb-chevron {
+    font-size: $ms-font-size-mi;
+    margin: 8px 5px;
+  }
 
-    .ms-Breadcrumb-chevron {
-      margin: 5px 4px;
-    }
+  .ms-Breadcrumb-overflowButton {
+    font-size: $ms-font-size-m-plus;
+    padding: 5px 4px;
+  }
+}
 
-    .ms-Breadcrumb-overflow {
-      .ms-Breadcrumb-overflowButton {
-        padding: 2px 4px;
-      }
-    }
+@media screen and (max-width: $ms-screen-sm-max) {
+  .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink {
+    font-size: $ms-font-size-m;
+    max-width: $Breadcrumb-itemMaxWidth-sm;
+  }
+
+  .ms-Breadcrumb-chevron {
+    margin: 5px 4px;
+  }
+
+  .ms-Breadcrumb-overflowButton {
+    padding: 2px 4px;
   }
 }
diff --git a/src/components/Callout/Callout.scss b/src/components/Callout/Callout.scss
index 91fee50c3f89fa..a97fe707774b8d 100644
--- a/src/components/Callout/Callout.scss
+++ b/src/components/Callout/Callout.scss
@@ -75,15 +75,15 @@ $Callout-beak-slant-width: 28px;
 
   .ms-Link.ms-Link--hero {
     position: relative;
-    left: -8px; // Move link inline with body text
+    @include left(-8px); // Move link inline with body text
   }
 }
 
 .ms-Callout-action {
   position: relative;
   top: 4px;
-  left: -8px;
-  margin-left: 0 !important;
+  @include left(-8px);
+  @include margin-left(0);
 
   &:hover .ms-Callout-actionIcon,
   &:focus .ms-Callout-actionIcon {
@@ -92,18 +92,17 @@ $Callout-beak-slant-width: 28px;
 }
 
 .ms-Callout-button {
-  margin-right: 12px;
+  @include margin-right(12px);
 }
 
 //= Modifier: Close button callout
 //
 .ms-Callout.ms-Callout--close {
   .ms-Callout-title {
-    margin-right: 20px; // Avoid overlap with close button
+    @include margin-right(20px); // Avoid overlap with close button
   }
 }
 
-
 //= Modifier: OOBE (Out of box experience) callout
 //
 .ms-Callout.ms-Callout--OOBE {
@@ -152,8 +151,8 @@ $Callout-beak-slant-width: 28px;
   &.ms-Callout--arrowBottom {
     &:before,
     &:after {
-      left: 40px;
-      right: auto;
+      @include left(40px);
+      @include right(auto);
     }
   }
 
@@ -161,7 +160,7 @@ $Callout-beak-slant-width: 28px;
   &.ms-Callout--arrowLeft {
     &:before,
     &:after {
-      top: calc('50% - 10px');
+      top: calc(50% - 10px);
     }
   }
 
diff --git a/src/components/Check/Check.scss b/src/components/Check/Check.scss
index bf4c39cd179ff9..b84c48583025e3 100644
--- a/src/components/Check/Check.scss
+++ b/src/components/Check/Check.scss
@@ -17,25 +17,6 @@ $checkBoxHeight: 20px;
   height: $checkBoxHeight;
   text-align: center;
 
-  .ms-Check-background {
-    &:before {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      display: inline-block;
-      margin: auto;
-      height: $checkBoxHeight - 2px;
-      width: $checkBoxHeight - 2px;
-      background: $ms-color-white;
-      border: 1px solid $ms-color-neutralTertiaryAlt;
-      border-radius: 50%;
-      content: ' ';
-    }
-
-  }
-
   &.is-checked {
     .ms-Check-background {
       &:before {
@@ -55,13 +36,31 @@ $checkBoxHeight: 20px;
       opacity: 1;
     }
   }
+}
 
-  .ms-Check-check {
+.ms-Check-check {
+  left: 0;
+  right: 0;
+  position: absolute;
+  line-height: $checkBoxHeight;
+  color: $ms-color-neutralTertiaryAlt;
+  opacity: 0;
+}
+
+.ms-Check-background {
+  &:before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
     left: 0;
     right: 0;
-    position: absolute;
-    line-height: $checkBoxHeight;
-    color: $ms-color-neutralTertiaryAlt;
-    opacity: 0;
+    display: inline-block;
+    margin: auto;
+    height: $checkBoxHeight - 2px;
+    width: $checkBoxHeight - 2px;
+    background: $ms-color-white;
+    border: 1px solid $ms-color-neutralTertiaryAlt;
+    border-radius: 50%;
+    content: ' ';
   }
 }
\ No newline at end of file
diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
index d4b32dda095551..6287487b922a25 100644
--- a/src/components/Dropdown/Dropdown.scss
+++ b/src/components/Dropdown/Dropdown.scss
@@ -9,6 +9,8 @@
 
 $Dropdown-selectedItem-bg: $ms-color-neutralQuaternaryAlt;
 $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter;
+$DropDown-height: 32px;
+$DropDown-item-height: 36px;
 
 // Mixin for high contrast mode link states
 @mixin highContrastListItemState {
@@ -150,10 +152,10 @@ $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter;
   color: $ms-color-neutralDark;
   font-size: $ms-icon-size-s;
   position: absolute;
-  right: 13px;
-  bottom: 9px;
-  z-index: 1;
+  top: 0px;
+  @include right(12px);
   pointer-events: none;
+  line-height: $DropDown-height;
 }
 
 // Style the new, replacement component
@@ -163,8 +165,9 @@ $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter;
   border: 1px solid $ms-color-neutralTertiaryAlt;
   cursor: pointer;
   display: block;
-  height: 32px;
-  padding: 5px 32px 0 10px;
+  height: $DropDown-height;
+  line-height: $DropDown-height - 2px; // height minus the border
+  @include padding(0, $DropDown-height, 0, 12px);
   position: relative;
   overflow: hidden;
 }
@@ -215,8 +218,9 @@ $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter;
   box-sizing: border-box;
   cursor: pointer;
   display: block;
-  height: 36px;
-  padding: 7px 10px;
+  height: $DropDown-item-height;
+  line-height: $DropDown-item-height - 2px; // height minus the border
+  padding: 0px 12px;
   position: relative;
   border: 1px solid transparent;
   white-space: nowrap;
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 12c3415759ee60..a336776059ddb4 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -101,8 +101,8 @@ export class Dropdown extends React.Component<IDropdownProps, any> {
           aria-activedescendant={ selectedIndex >= 0 ? (id + '-list' + selectedIndex) : (id + '-list') }
           aria-controls={ id + '-list' }
           >
-          <i className='ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown'></i>
           <span className='ms-Dropdown-title'>{ selectedOption ? selectedOption.text : '' }</span>
+          <i className='ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown'></i>
           <ul ref={ (c: HTMLElement) => this._optionList = c }
             id={ id + '-list' }
             className='ms-Dropdown-items'
diff --git a/src/components/GroupedList/GroupHeader.scss b/src/components/GroupedList/GroupHeader.scss
index d954028a019af7..20df3e21fde7f7 100644
--- a/src/components/GroupedList/GroupHeader.scss
+++ b/src/components/GroupedList/GroupHeader.scss
@@ -91,7 +91,7 @@ $groupHeader-ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
   display: inline-block;
   position: relative;
   top: -16px;
-  left: -26px;
+  @include left(-26px);
   font-size: $ms-icon-size-l;
   color: $ms-color-neutralSecondaryAlt;
   transition: transform $ms-duration2 $groupHeader-ease-in-back, opacity $ms-duration4 $groupHeader-ease-out-sine;
diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss
index d5ae74cfdb2d87..78fd52305ef24f 100644
--- a/src/components/Persona/Persona.scss
+++ b/src/components/Persona/Persona.scss
@@ -171,10 +171,10 @@ $ms-Persona-presenceSizeXl: 28px;
 
 .ms-Persona-image {
   display: table-cell;
-  margin-right: 10px;
+  @include margin-right(10px);
   position: absolute;
   top: 0;
-  left: 0;
+  @include left(0);
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -582,7 +582,7 @@ $ms-Persona-presenceSizeXl: 28px;
       height: 100%;
       position: absolute;
       top: 0;
-      left: 0;
+      @include left(0);
       box-shadow: 0 0 0 2px $ms-color-presence-busy-average inset;
       border-radius: 50%;
     }
@@ -595,7 +595,7 @@ $ms-Persona-presenceSizeXl: 28px;
       transform: rotate(-45deg);
       position: absolute;
       top: 5px;
-      left: 0;
+      @include left(0);
     }
   }
 
diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss
index a0b407e8b55d79..2855457404ab15 100644
--- a/src/components/Pivot/Pivot.scss
+++ b/src/components/Pivot/Pivot.scss
@@ -32,7 +32,7 @@
   font-size: $ms-font-size-m;
   font-weight: $ms-font-weight-regular;
   line-height: 40px;
-  margin-right: 8px;
+  @include margin-right(8px);
   padding: 0 8px;
   text-align: center;
   position: relative;
diff --git a/src/components/SearchBox/SearchBox.scss b/src/components/SearchBox/SearchBox.scss
index 0bf875d64f9f62..41057fafc1fcdf 100644
--- a/src/components/SearchBox/SearchBox.scss
+++ b/src/components/SearchBox/SearchBox.scss
@@ -85,7 +85,7 @@ $SearchBox-height: 36px;
   transition: padding-left $ms-duration1;
 
   &:focus {
-    padding: 6px 32px 7px 10px;
+    @include padding-right(32px);
     border-color: $ms-color-themeDarker;
   }
 
diff --git a/src/components/Spinner/Spinner.scss b/src/components/Spinner/Spinner.scss
index adcd9f1ed8b7f2..9ca9e53ebf05f3 100644
--- a/src/components/Spinner/Spinner.scss
+++ b/src/components/Spinner/Spinner.scss
@@ -17,7 +17,7 @@
     height: 28px;
 
     .ms-Spinner-label {
-      left: 34px;
+      @include left(34px);
       top: 6px;
     }
   }
@@ -42,25 +42,8 @@
   @include ms-font-s;
   position: relative;
   color: $ms-color-themePrimary;
-  left: 28px;
-  top: 2px;
-}
-
-// TODO: Remove overrides below.
-
-/**
-  Change from Fabric - RTL support
-*/
-.ms-Spinner {
-  &.ms-Spinner--large {
-    .ms-Spinner-label {
-      @include left(34px);
-    }
-  }
-}
-
-.ms-Spinner-label {
   @include left(28px);
+  top: 2px;
 }
 
 /**
diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss
index cc2f27c84657b3..e406cb031ee851 100644
--- a/src/components/TextField/TextField.scss
+++ b/src/components/TextField/TextField.scss
@@ -62,7 +62,7 @@
   font-size: $ms-font-size-m;
   color: $ms-color-neutralPrimary;
   height: 32px;
-  padding: 6px 12px 7px;
+  @include padding(6px, 12px, 7px, 12px);
   width: 100%;
   min-width: 180px;
   outline: 0;
@@ -132,10 +132,10 @@
 
   .ms-Label {
     font-size: $ms-font-size-m;
-    margin-right: 8px;
+    @include margin-right(8px);
     display: table-cell;
     vertical-align: top;
-    padding-left: 12px;
+    @include padding-left(12px);
     padding-top: 9px;
     height: 32px;
     width: 1%;
@@ -144,9 +144,9 @@
 
   .ms-TextField-field {
     border: 0;
-    float: left;
+    @include float(left);
     display: table-cell;
-    text-align: left;
+    @include text-align(left);
     padding-top: 8px;
     padding-bottom: 3px;