diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 265f35776dab..c30ce2185c0d 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -37,16 +37,15 @@
     outline: 0;
     @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
   }
+}
 
-  &.disabled,
-  &:disabled,
-  fieldset[disabled] & {
-    cursor: $cursor-disabled;
-    opacity: .65;
-    @include box-shadow(none);
-  }
+@include form-state-disabled('.btn') {
+  cursor: $cursor-disabled;
+  opacity: .65;
+  @include box-shadow(none);
 }
 
+
 // Future-proof disabling of clicks on `<a>` elements
 a.btn.disabled,
 fieldset[disabled] a.btn {
@@ -58,44 +57,20 @@ fieldset[disabled] a.btn {
 // Alternate buttons
 //
 
-.btn-primary {
-  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
-}
-.btn-secondary {
-  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
-}
-.btn-info {
-  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
-}
-.btn-success {
-  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
-}
-.btn-warning {
-  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
-}
-.btn-danger {
-  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
-}
+@include button-variant('.btn-primary', $btn-primary-color, $btn-primary-bg, $btn-primary-border);
+@include button-variant('.btn-secondary', $btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
+@include button-variant('.btn-info', $btn-info-color, $btn-info-bg, $btn-info-border);
+@include button-variant('.btn-success', $btn-success-color, $btn-success-bg, $btn-success-border);
+@include button-variant('.btn-warning', $btn-warning-color, $btn-warning-bg, $btn-warning-border);
+@include button-variant('.btn-danger', $btn-danger-color, $btn-danger-bg, $btn-danger-border);
 
 // Remove all backgrounds
-.btn-primary-outline {
-  @include button-outline-variant($btn-primary-bg);
-}
-.btn-secondary-outline {
-  @include button-outline-variant($btn-secondary-border);
-}
-.btn-info-outline {
-  @include button-outline-variant($btn-info-bg);
-}
-.btn-success-outline {
-  @include button-outline-variant($btn-success-bg);
-}
-.btn-warning-outline {
-  @include button-outline-variant($btn-warning-bg);
-}
-.btn-danger-outline {
-  @include button-outline-variant($btn-danger-bg);
-}
+@include button-outline-variant('.btn-primary-outline', $btn-primary-bg);
+@include button-outline-variant('.btn-secondary-outline', $btn-secondary-border);
+@include button-outline-variant('.btn-info-outline', $btn-info-bg);
+@include button-outline-variant('.btn-success-outline', $btn-success-bg);
+@include button-outline-variant('.btn-warning-outline', $btn-warning-bg);
+@include button-outline-variant('.btn-danger-outline', $btn-danger-bg);
 
 
 //
@@ -110,9 +85,7 @@ fieldset[disabled] a.btn {
 
   &,
   &:active,
-  &.active,
-  &:disabled,
-  fieldset[disabled] & {
+  &.active {
     background-color: transparent;
     @include box-shadow(none);
   }
@@ -129,16 +102,14 @@ fieldset[disabled] a.btn {
     text-decoration: $link-hover-decoration;
     background-color: transparent;
   }
-  &:disabled,
-  fieldset[disabled] & {
-    @include hover-focus {
-      color: $btn-link-disabled-color;
-      text-decoration: none;
-    }
+}
+@include form-state-disabled('.btn-link') {
+  @include hover-focus {
+    color: $btn-link-disabled-color;
+    text-decoration: none;
   }
 }
 
-
 //
 // Button Sizes
 //
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 72ec9b03f998..7922bf59097e 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -44,25 +44,22 @@
     opacity: 1;
   }
 
-  // Disabled and read-only inputs
-  //
-  // HTML5 says that controls under a fieldset > legend:first-child won't be
-  // disabled if the fieldset is disabled. Due to implementation difficulty, we
-  // don't honor that edge case; we style them as disabled anyway.
-  &:disabled,
-  &[readonly],
-  fieldset[disabled] & {
-    background-color: $input-bg-disabled;
-    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-    opacity: 1;
-  }
+}
 
-  &[disabled],
-  fieldset[disabled] & {
-    cursor: $cursor-disabled;
-  }
+// Disabled and read-only inputs
+//
+// HTML5 says that controls under a fieldset > legend:first-child won't be
+// disabled if the fieldset is disabled. Due to implementation difficulty, we
+// don't honor that edge case; we style them as disabled anyway.
+@include form-state-disabled('.form-control', $modifiers: ':disabled, [readonly]') {
+  background-color: $input-bg-disabled;
+  // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+  opacity: 1;
 }
 
+@include form-state-disabled('.form-control') {
+  cursor: $cursor-disabled;
+}
 
 // Make file inputs better match text inputs by forcing them to new lines.
 .form-control-file,
@@ -230,30 +227,17 @@
 // Some special care is needed because <label>s don't inherit their parent's `cursor`.
 //
 // Note: Neither radios nor checkboxes can be readonly.
-input[type="radio"],
-input[type="checkbox"] {
-  &:disabled,
-  &.disabled,
-  fieldset[disabled] & {
-    cursor: $cursor-disabled;
-  }
+@include form-state-disabled('input[type="radio"], input[type="checkbox"]') {
+  cursor: $cursor-disabled;
 }
 // These classes are used directly on <label>s
-.radio-inline,
-.checkbox-inline {
-  &.disabled,
-  fieldset[disabled] & {
-    cursor: $cursor-disabled;
-  }
+@include form-state-disabled('.radio-inline, .checkbox-inline') {
+  cursor: $cursor-disabled;
 }
 // These classes are used on elements with <label> descendants
-.radio,
-.checkbox {
-  &.disabled,
-  fieldset[disabled] & {
-    label {
-      cursor: $cursor-disabled;
-    }
+@include form-state-disabled('.radio, .checkbox') {
+  label {
+    cursor: $cursor-disabled;
   }
 }
 
diff --git a/scss/_labels.scss b/scss/_labels.scss
index 403504b864f1..400b8b2a6c66 100644
--- a/scss/_labels.scss
+++ b/scss/_labels.scss
@@ -19,12 +19,12 @@
   &:empty {
     display: none;
   }
+}
 
-  // Quick fix for labels in buttons
-  .btn & {
-    position: relative;
-    top: -1px;
-  }
+// Quick fix for labels in buttons
+.btn .label {
+  position: relative;
+  top: -1px;
 }
 
 // Add hover effects, but only for links
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index c64f0e8f787b..37bc8c0f7544 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -3,86 +3,84 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant($color, $background, $border) {
-  $active-background: darken($background, 10%);
-  $active-border: darken($border, 12%);
+@mixin button-variant($selector, $color, $background, $border) {
+  #{$selector} {
+    $active-background: darken($background, 10%);
+    $active-border: darken($border, 12%);
 
-  color: $color;
-  background-color: $background;
-  border-color: $border;
-  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
-
-  @include hover {
-    color: $color;
-    background-color: $active-background;
-        border-color: $active-border;
-  }
-
-  &:focus,
-  &.focus {
     color: $color;
-    background-color: $active-background;
-        border-color: $active-border;
-  }
+    background-color: $background;
+    border-color: $border;
+    @include box-shadow(inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075));
 
-  &:active,
-  &.active,
-  .open > &.dropdown-toggle {
-    color: $color;
-    background-color: $active-background;
-        border-color: $active-border;
-    // Remove the gradient for the pressed/active state
-    background-image: none;
-    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+    @include hover {
+      color: $color;
+      background-color: $active-background;
+      border-color: $active-border;
+    }
 
-    &:hover,
     &:focus,
     &.focus {
       color: $color;
-      background-color: darken($background, 17%);
-          border-color: darken($border, 25%);
+      background-color: $active-background;
+      border-color: $active-border;
     }
-  }
 
-  &.disabled,
-  &:disabled,
-  fieldset[disabled] & {
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+      color: $color;
+      background-color: $active-background;
+      border-color: $active-border;
+      // Remove the gradient for the pressed/active state
+      background-image: none;
+      @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
+
+      &:hover,
+      &:focus,
+      &.focus {
+        color: $color;
+        background-color: darken($background, 17%);
+        border-color: darken($border, 25%);
+      }
+    }
+  }
+  @include form-state-disabled($selector) {
     &:focus,
     &.focus {
       background-color: $background;
-          border-color: $border;
+      border-color: $border;
     }
     @include hover {
       background-color: $background;
-          border-color: $border;
+      border-color: $border;
     }
   }
 }
 
-@mixin button-outline-variant($color) {
-  color: $color;
-  background-image: none;
-  background-color: transparent;
-  border-color: $color;
+@mixin button-outline-variant($selector, $color) {
+  #{$selector} {
+    color: $color;
+    background-image: none;
+    background-color: transparent;
+    border-color: $color;
 
-  &:focus,
-  &.focus,
-  &:active,
-  &.active,
-  .open > &.dropdown-toggle {
-    color: #fff;
-    background-color: $color;
-        border-color: $color;
-  }
-  @include hover {
-    color: #fff;
-    background-color: $color;
-        border-color: $color;
+    &:focus,
+    &.focus,
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+      color: #fff;
+      background-color: $color;
+      border-color: $color;
+    }
+    @include hover {
+      color: #fff;
+      background-color: $color;
+      border-color: $color;
+    }
   }
-
-  &.disabled,
-  &:disabled,
-  fieldset[disabled] & {
+  @include form-state-disabled($selector) {
     &:focus,
     &.focus {
       border-color: lighten($color, 20%);
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 764c5e08350d..3aace2f352ee 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -87,3 +87,31 @@
     height: auto;
   }
 }
+
+// Applies the content to the disabled state of the selector.
+//
+// For example:
+//
+//   @include form-state-disabled('.btn') {
+//     color: #111
+//   }
+//
+// Compiles to:
+//
+//   .btn.disabled,
+//   .btn:disabled,
+//   fieldset[disabled] .btn {
+//     color: #111;
+//   }
+//
+// This avoids issues with using the parent selector suffix, as in `fieldset[disabled] &`.
+// See https://github.com/sass/sass/issues/1817.
+@mixin form-state-disabled($selector, $modifiers: ':disabled, .disabled') {
+  #{selector-unify($selector, $modifiers), selector-nest('fieldset[disabled]', $selector)} {
+    @content;
+  }
+}
+
+@include form-state-disabled('button') {
+  color: red;
+}