Fix base-level &.

Fix is according to sass/sass#1873.

Signed-off-by: JP-Ellis <josh@jpellis.me>

scss/mixins/_buttons.scss

@@ -10,16 +10,16 @@
     border-color: $focus-border;
   }
 
-  &:focus,
-  &.focus {
+  #{if(&, "&", "*")}:focus,
+  #{if(&, "&", "*")}.focus {
     color: $color;
     background-color: $focus-background;
     border-color: $focus-border;
   }
 
-  &:active,
-  &.active,
-  .open > &.dropdown-toggle {
+  #{if(&, "&", "*")}:active,
+  #{if(&, "&", "*")}.active,
+  .open > #{if(&, "&", "*")}.dropdown-toggle {
     color: $color;
     background-color: $focus-background;
     border-color: $focus-border;
@@ -34,7 +34,7 @@
   }
 
   // when it is an icon, kill the active bg on open dropdown, but stabilize on hover
-  .open > &.dropdown-toggle.bmd-btn-icon {
+  .open > #{if(&, "&", "*")}.dropdown-toggle.bmd-btn-icon {
     color: inherit;
     background-color: $background;
 
@@ -44,8 +44,8 @@
     }
   }
 
-  &.disabled,
-  &:disabled {
+  #{if(&, "&", "*")}.disabled,
+  #{if(&, "&", "*")}:disabled {
     &:focus,
     &.focus {
       background-color: $background;
@@ -78,7 +78,7 @@
     $active-border);
 
   // inverse color scheme
-  .bg-inverse & {
+  .bg-inverse #{if(&, "&", "*")} {
     $focus-background: $mdb-inverse-btn-focus-bg;
     $focus-border: $mdb-inverse-btn-focus-bg;
 
@@ -95,7 +95,7 @@
   }
 
   // reverse the above for links
-  &.btn-link {
+  #{if(&, "&", "*")}.btn-link {
     background-color: transparent;
   }
 }
@@ -105,22 +105,22 @@
   @include bmd-flat-button-variant($mdb-btn-color);
 
   // flat bg with text color variations
-  &.btn-primary {
+  #{if(&, "&", "*")}.btn-primary {
     @include bmd-flat-button-variant($btn-primary-bg);
   }
-  &.btn-secondary {
+  #{if(&, "&", "*")}.btn-secondary {
     @include bmd-flat-button-variant($btn-secondary-color);
   }
-  &.btn-info {
+  #{if(&, "&", "*")}.btn-info {
     @include bmd-flat-button-variant($btn-info-bg);
   }
-  &.btn-success {
+  #{if(&, "&", "*")}.btn-success {
     @include bmd-flat-button-variant($btn-success-bg);
   }
-  &.btn-warning {
+  #{if(&, "&", "*")}.btn-warning {
     @include bmd-flat-button-variant($btn-warning-bg);
   }
-  &.btn-danger {
+  #{if(&, "&", "*")}.btn-danger {
     @include bmd-flat-button-variant($btn-danger-bg);
   }
 }
@@ -147,31 +147,31 @@
 
 @mixin bmd-raised-button-color() {
 
-  &.btn-primary {
+  #{if(&, "&", "*")}.btn-primary {
     @include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
   }
-  &.btn-secondary {
+  #{if(&, "&", "*")}.btn-secondary {
     @include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
   }
-  &.btn-info {
+  #{if(&, "&", "*")}.btn-info {
     @include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
   }
-  &.btn-success {
+  #{if(&, "&", "*")}.btn-success {
     @include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
   }
-  &.btn-warning {
+  #{if(&, "&", "*")}.btn-warning {
     @include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
   }
-  &.btn-danger {
+  #{if(&, "&", "*")}.btn-danger {
     @include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
   }
 }
 
 @mixin undo-bs-tab-focus() {
   // clear out the tab-focus() from BS
-  &,
-  &:active,
-  &.active {
+  #{if(&, "&", "*")},
+  #{if(&, "&", "*")}:active,
+  #{if(&, "&", "*")}.active {
     &:focus,
     &.focus {
       //@include tab-focus();

scss/mixins/_drawer.scss

@@ -2,7 +2,7 @@
 
 @mixin bmd-drawer-x-out($size) {
   @each $side, $abbrev in (left: l, right: r) {
-    &.bmd-drawer-f-#{$abbrev} {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
       > .bmd-layout-drawer {
         // position
         top: 0;
@@ -28,7 +28,7 @@
 
 @mixin bmd-drawer-y-out($size) {
   @each $side, $abbrev in (top: t, bottom: b) {
-    &.bmd-drawer-f-#{$abbrev} {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
       > .bmd-layout-drawer {
         // position
         #{$side}: 0;
@@ -62,7 +62,7 @@
 
 @mixin bmd-drawer-x-in($size) {
   @each $side, $abbrev in (left: l, right: r) {
-    &.bmd-drawer-f-#{$abbrev} {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
       // Push - drawer will push the header and content (default behavior)
       > .bmd-layout-header {
         width: calc(100% - #{$size});
@@ -82,7 +82,7 @@
 
 @mixin bmd-drawer-y-in($size) {
   @each $side, $abbrev in (top: t, bottom: b) {
-    &.bmd-drawer-f-#{$abbrev} {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
 
       // 1. Push - drawer will push the header or content
       > .bmd-layout-header {
@@ -109,7 +109,7 @@
   // e.g. &, &-sm, &-md, &-lg
   $name: bmd-drawer-breakpoint-name($breakpoint, "-up");
 
-  &.bmd-drawer-in {
+  #{if(&, "&", "*")}.bmd-drawer-in {
     #{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
 
       @if $breakpoint == xs {
@@ -132,7 +132,7 @@
   // e.g. &, &-sm, &-md, &-lg
   $name: bmd-drawer-breakpoint-name($breakpoint, "-up");
 
-  &.bmd-drawer-in {
+  #{if(&, "&", "*")}.bmd-drawer-in {
     #{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
 
       @if $breakpoint == xs {
@@ -154,7 +154,7 @@
   @include bmd-layout-backdrop-in();
 
   @each $side, $abbrev in (left: l, right: r) {
-    &.bmd-drawer-f-#{$abbrev} {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
       > .bmd-layout-header,
       > .bmd-layout-content {
         width: 100%;
@@ -168,7 +168,7 @@
   @include bmd-layout-backdrop-in();
 
   @each $side, $abbrev in (top: t, bottom: b) {
-    &.bmd-drawer-f-#{$abbrev} {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
       > .bmd-layout-header {
         @if $side == top { // only add margin-top on a header when the drawer is at the top
           margin-#{$side}: 0;
@@ -189,7 +189,7 @@
   // e.g. &, &-sm, &-md, &-lg
   $name: bmd-drawer-breakpoint-name($breakpoint, "-down");
 
-  &.bmd-drawer-overlay {
+  #{if(&, "&", "*")}.bmd-drawer-overlay {
     #{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
 
       // x - left/right
@@ -215,7 +215,7 @@
   // e.g. &, &-sm, &-md, &-lg
   $name: bmd-drawer-breakpoint-name($breakpoint, "-down");
 
-  &.bmd-drawer-overlay {
+  #{if(&, "&", "*")}.bmd-drawer-overlay {
     #{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
       //// y - top/bottom
 

scss/mixins/_forms.scss

@@ -1,8 +1,8 @@
 @mixin bmd-disabled() {
-  fieldset[disabled][disabled] &,
-  &.disabled,
-  &:disabled,
-  &[disabled] {
+  fieldset[disabled][disabled] #{if(&, "&", "*")},
+  #{if(&, "&", "*")}.disabled,
+  #{if(&, "&", "*")}:disabled,
+  #{if(&, "&", "*")}[disabled] {
     @content
   }
 }
@@ -104,7 +104,7 @@
   }
 
   .is-focused, // may or may not be a form-group or bmd-form-group
-  &.is-focused {
+  #{if(&, "&", "*")}.is-focused {
     // on focus set borders and labels to the validation color
 
     // Use the BS provided mixin for the bulk of the color
@@ -218,9 +218,9 @@
   }
 
   // floating focused/filled will look like static
-  &.is-focused,
+  #{if(&, "&", "*")}.is-focused,
   .is-focused,
-  &.is-filled,
+  #{if(&, "&", "*")}.is-filled,
   .is-filled {
     .bmd-label-floating {
       @include bmd-label-static($label-static-top, $static-font-size);

scss/mixins/_hover.scss

@@ -1,6 +1,6 @@
 @mixin bmd-hover-focus-active {
   // add the .active to the whole mix of hover-focus-active
-  &.active {
+  #{if(&, "&", "*")}.active {
     @content
   }
   @include hover-focus-active() {