add $use-hover-media-query to control @media (hover:hover) usage

scss/_variables.scss

@@ -50,6 +50,8 @@ $enable-transitions:         true !default;
 $spacer:                     1rem !default;
 $border-width:               .075rem !default;
 
+$use-hover-media-query:      false !default;
+
 //== Typography
 //
 //## Font, line-height, and color for body text, headings, and more.

scss/mixins/_hover.scss

 @mixin hover {
+  @if $use-hover-media-query {
     // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
     // Currently shimmed by https://github.com/cvrebert/mq4-hover-hover-shim
     @media (hover: hover) {
       &:hover { @content }
     }
+  }
+  @else {
+    &:hover { @content }
+  }
 }
 
 @mixin hover-focus {
+  @if $use-hover-media-query {
     &:focus { @content }
     @include hover { @content }
+  }
+  @else {
+    &:focus,
+    &:hover {
+      @content
+    }
+  }
 }
 
 @mixin plain-hover-focus {
+  @if $use-hover-media-query {
     &,
     &:focus {
       @content
     }
     @include hover { @content }
+  }
+  @else {
+    &,
+    &:focus,
+    &:hover {
+      @content
+    }
+  }
 }
 
 @mixin hover-focus-active {
+  @if $use-hover-media-query {
     &:focus,
     &:active {
       @content
     }
     @include hover { @content }
+  }
+  @else {
+    &:focus,
+    &:active,
+    &:hover {
+      @content
+    }
+  }
 }