fix shadow extensions

Gruntfile.js

@@ -14,7 +14,22 @@ module.exports = function(grunt) {
           src: ['*.less', '!_mixins.less', '!_mixins-fullpalette.less'],
           ext: '.scss',
           dest: 'sass'
-        }]
+        }],
+        options: {
+          replacements: [
+            { // bad conversions to @include instead of @extend
+            pattern: /@include shadow-z-(\d+)\(\);/gi,
+            replacement: '@extend .shadow-z-$1;',
+            order: 2
+            },
+            { // bad conversions to @include instead of @extend
+              pattern: /@include (foo1|foo2)\(\);/gi,
+              replacement: '@extend .$1;',
+              order: 2
+            }
+
+          ]
+        }
       }
     },
 

sass/_buttons.scss

@@ -10,7 +10,7 @@
   color: $darkbg-text;
 
   &:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) {
-    @include shadow-z-1();
+    @extend .shadow-z-1;
   }
   &:active:not(.btn-link):not(.btn-flat):not(.btn-fab) {
     @include shadow-z-1-hover();
@@ -75,7 +75,7 @@
       @include variations(unquote(""), background-color, transparent);
     }
     &, &:hover {
-      @include shadow-z-1();
+      @extend .shadow-z-1;
     }
     &:active {
       @include shadow-z-1-hover();
@@ -137,7 +137,7 @@
 }
 
 @mixin btn-shadow(){
-  @include shadow-z-1();
+  @extend .shadow-z-1;
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   &:active:not(.btn-link) {
     @include shadow-z-1-hover();

sass/_cards.scss

@@ -23,7 +23,7 @@
     color: $card-body-text;
     background: $card-body-background;
 
-    @include shadow-z-2();
+    @extend .shadow-z-2;
 
     .card-image {
         height: 60%;

sass/_dialogs.scss

@@ -3,7 +3,7 @@
 // Material Design element Dialogs
 // --------------------------------------------------
 .modal-content {
-  @include shadow-z-5();
+  @extend .shadow-z-5;
   border-radius: 2px;
   border: none;
   // Modal header

sass/_popups.scss

@@ -4,7 +4,7 @@
   background: $popover-background;
   border: none;
   border-radius: $material-border-radius;
-  @include shadow-z-1();
+  @extend .shadow-z-1;
 }
 
 .tooltip, .tooltip.in {

sass/_welljumbo.scss

@@ -11,7 +11,7 @@ body, .container, .container-fluid {
     background-color: #fff;
     padding: 19px;
     margin-bottom: 20px;
-    @include shadow-z-2();
+    @extend .shadow-z-2;
     border-radius: 2px;
     border: 0;
     p {