diff --git a/app/package-lock.json b/app/package-lock.json
index 0b3b80146a..9eef3fe360 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -16,8 +16,8 @@
         "@testing-library/react": "^12.1.5",
         "array-move": "^4.0.0",
         "axios": "^1.4.0",
-        "bourbon": "^4.3.4",
-        "bourbon-neat": "1.7.1",
+        "bourbon": "^7.3.0",
+        "bourbon-neat": "4.0.0",
         "classnames": "^2.3.2",
         "date-fns": "^2.30.0",
         "font-awesome": "^4.7.0",
@@ -6406,14 +6406,14 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
     "node_modules/bourbon": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/bourbon/-/bourbon-4.3.4.tgz",
-      "integrity": "sha512-XY2nuWcgS5ODGVFHgE/SsjFb18ke1dPtxu32vDm2tue8v4RflmU0mp0jpdIvvyjEtYEv6oiSpQL2PRUsEqde4w=="
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/bourbon/-/bourbon-7.3.0.tgz",
+      "integrity": "sha512-u9ZUqmaX7K7nkarKODlFT4/XYfWafLRoadlv2Lye8hytrIA4Urg/50rav1eFdbdbO6o9GnK9a6qf7zwq808atA=="
     },
     "node_modules/bourbon-neat": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/bourbon-neat/-/bourbon-neat-1.7.1.tgz",
-      "integrity": "sha512-xl/TUDeqt8RDvq6A1r2AKnDVgc0dFgL4dbQ8mUZZPYoBodJu0/XlWqqjYPrPQh4WeXWpO9c/ki5TF565NlMD4A=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/bourbon-neat/-/bourbon-neat-4.0.0.tgz",
+      "integrity": "sha512-Ql1JdvjNvK9NbGvcBpsDkfuRRMK8fZ/mx1gRyZEy3PM/kqQ8QX0PcmKEqnZMl18YLfKaDwC0qa+e36TlDmT49g=="
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
@@ -25069,14 +25069,14 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
     "bourbon": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/bourbon/-/bourbon-4.3.4.tgz",
-      "integrity": "sha512-XY2nuWcgS5ODGVFHgE/SsjFb18ke1dPtxu32vDm2tue8v4RflmU0mp0jpdIvvyjEtYEv6oiSpQL2PRUsEqde4w=="
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/bourbon/-/bourbon-7.3.0.tgz",
+      "integrity": "sha512-u9ZUqmaX7K7nkarKODlFT4/XYfWafLRoadlv2Lye8hytrIA4Urg/50rav1eFdbdbO6o9GnK9a6qf7zwq808atA=="
     },
     "bourbon-neat": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/bourbon-neat/-/bourbon-neat-1.7.1.tgz",
-      "integrity": "sha512-xl/TUDeqt8RDvq6A1r2AKnDVgc0dFgL4dbQ8mUZZPYoBodJu0/XlWqqjYPrPQh4WeXWpO9c/ki5TF565NlMD4A=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/bourbon-neat/-/bourbon-neat-4.0.0.tgz",
+      "integrity": "sha512-Ql1JdvjNvK9NbGvcBpsDkfuRRMK8fZ/mx1gRyZEy3PM/kqQ8QX0PcmKEqnZMl18YLfKaDwC0qa+e36TlDmT49g=="
     },
     "brace-expansion": {
       "version": "1.1.11",
diff --git a/app/package.json b/app/package.json
index 9a43c3e777..3b8f0446bb 100644
--- a/app/package.json
+++ b/app/package.json
@@ -12,8 +12,8 @@
     "@testing-library/react": "^12.1.5",
     "array-move": "^4.0.0",
     "axios": "^1.4.0",
-    "bourbon": "^4.3.4",
-    "bourbon-neat": "1.7.1",
+    "bourbon": "^7.3.0",
+    "bourbon-neat": "4.0.0",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "font-awesome": "^4.7.0",
diff --git a/app/src/styles/components/_alerts.scss b/app/src/styles/components/_alerts.scss
index cf813e480c..db9a2739b0 100644
--- a/app/src/styles/components/_alerts.scss
+++ b/app/src/styles/components/_alerts.scss
@@ -146,7 +146,7 @@
         right: 10px;
         font-size: 20px;
         margin-top: 9px;
-        @include transition($alert-transition);
+        transition: $alert-transition;
         text-decoration: none;
         color: inherit;
     }
diff --git a/app/src/styles/components/_cal.scss b/app/src/styles/components/_cal.scss
index 4264cccd0b..853d4906da 100644
--- a/app/src/styles/components/_cal.scss
+++ b/app/src/styles/components/_cal.scss
@@ -60,7 +60,7 @@
         text-align: center;
         margin: -1px -1px 0px -1px;
         border: $thin-border-stroke darken($l-blue, 10%);
-        @include linear-gradient(top, #388ed6, #2b77b9);
+        background: linear-gradient(to bottom, #388ed6, #2b77b9);
 
         a {
             display: block;
diff --git a/app/src/styles/components/_dropdowns.scss b/app/src/styles/components/_dropdowns.scss
index 979b71438a..368bc97017 100644
--- a/app/src/styles/components/_dropdowns.scss
+++ b/app/src/styles/components/_dropdowns.scss
@@ -32,10 +32,10 @@
     cursor: pointer;
     position: relative;
     vertical-align: middle;
-    @include user-select(none);
+    user-select: none;
 
     // Pulled from Button Mixin (keep in sync with those styles)
-    @include linear-gradient(#fff, #f7f7f7);
+    background: linear-gradient(#fff, #f7f7f7);
     border: $thin-border-stroke $main-border-color;
     box-shadow: inset 0px 1px 0px 0px #fff, 0px 1px 2px rgba(0,0,0,.05);
     outline: none;
@@ -44,7 +44,7 @@
 
     &:hover {
         border: $thin-border-stroke darken($main-border-color, 2%);
-        @include linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%));
+        background: linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%));
         color: $medium-prim-color;
     }
 
@@ -86,7 +86,7 @@
 
     > ul {
         position: absolute;
-        @include transition(all 200ms);
+        transition: all 200ms;
         background: $off-white;
         list-style: none;
         @include border-bottom-radius($main-border-radius);
@@ -103,7 +103,7 @@
             text-shadow: 0 1px 0 $white;
             display: block;
             position: relative;
-            @include transition(all 200ms);
+            transition: all 200ms;
 
             button {
                 display: block;
@@ -154,7 +154,7 @@
         cursor: pointer;
         position: relative;
         vertical-align: middle;
-        @include user-select(none);
+        user-select: none;
         background-repeat: repeat-x;
 
         &:focus {
@@ -169,7 +169,7 @@
 
         > ul {
             position: absolute;
-            @include transition(all 200ms);
+            transition: all 200ms;
             background: $off-white;
             list-style: none;
             @include border-bottom-radius($main-border-radius);
@@ -188,7 +188,7 @@
                 cursor: default;
                 display: block;
                 position: relative;
-                @include transition(all 200ms);
+                transition: all 200ms;
 
                 span {
                     padding: 3px 15px 3px 45px;
@@ -245,7 +245,7 @@
         @include border-bottom-radius(0);
 
         &:after {
-            @include transform(rotate(180deg));
+            transform: rotate(180deg);
         }
 
         > ul {
diff --git a/app/src/styles/components/_footer.scss b/app/src/styles/components/_footer.scss
index ff012b60bf..49a0a24998 100644
--- a/app/src/styles/components/_footer.scss
+++ b/app/src/styles/components/_footer.scss
@@ -58,7 +58,7 @@ $footer-background-color: darken($body-background, 5%);
         right: 0;
 
         a {
-            @include transition(all .2s);
+            transition: all .2s;
             @include footer-component-padding();
             border-left: 1px solid $footer-border-color;
             text-align: center;
diff --git a/app/src/styles/components/_header.scss b/app/src/styles/components/_header.scss
index c0cca3a167..508325578c 100644
--- a/app/src/styles/components/_header.scss
+++ b/app/src/styles/components/_header.scss
@@ -30,7 +30,7 @@
     box-shadow: 0 1px 3px 1px rgba($black, 0.3);
     position: relative;
     border-bottom: 1px solid #1d3041;
-    @include linear-gradient(top, #388ed6, #2075b1);
+    background: linear-gradient(to bottom, #388ed6, #2075b1);
 
     .header-branding {
         float: left;
@@ -413,11 +413,11 @@
                 text-shadow: 0 1px 0 rgba($black, 0.2);
                 border: 1px solid $l-blue;
 
-                @include linear-gradient(top, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
+                background: linear-gradient(to bottom, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
                 box-shadow: inset 0 1px 0 0 rgba($white, 0.2), 0 2px 3px 1px rgba($black, 0.05);
 
                 &:hover {
-                    @include linear-gradient(top, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
+                    background: linear-gradient(to bottom, lighten($mid-blue, 20%), lighten($mid-blue, 10%));
                 }
 
                 &:active {
diff --git a/app/src/styles/components/_inputs.scss b/app/src/styles/components/_inputs.scss
index 5b1b71c897..9e83ccae0d 100644
--- a/app/src/styles/components/_inputs.scss
+++ b/app/src/styles/components/_inputs.scss
@@ -49,7 +49,7 @@ textarea {
     font-weight: 600;
     color: $medium-prim-color;
 
-    @include placeholder {
+    &::placeholder {
         color: $light-prim-color;
     }
 
@@ -71,21 +71,24 @@ textarea {
     // ----------------------------------------
 
     &#email {
-       @include retina-image("#{$img-path}user-input-icon", 23px 20px);
+       background-image: url("#{$img-path}user-input-icon.png");
+       background-size: 23px 20px;
        background-repeat: no-repeat;
        background-position: 14px center;
     }
 
     &#password {
-        @include retina-image("#{$img-path}key-icon", 16px 20px);
+        background-image: url("#{$img-path}key-icon.png");
+        background-size: 16px 20px;
         background-repeat: no-repeat;
         background-position: 19px center;
     }
 
     &.search,
     &#search {
-        @include appearance(none);
-        @include retina-image("#{$img-path}search", 13px 13px);
+        appearance: none;
+        background-image: url("#{$img-path}search.png");
+        background-size: 13px 13px;
         background-repeat: no-repeat;
         background-position: 14px center;
         vertical-align: top;
@@ -93,7 +96,7 @@ textarea {
         height: 40px;
 
         &.expand {
-            @include transition(width 0.2s ease-in);
+            transition: width 0.2s ease-in;
 
             &:focus {
                 width: 200px;
@@ -142,7 +145,7 @@ input[type="radio"].ios {
     cursor: pointer;
     height: 28px;
     position: relative;
-    @include transition(border $transition-duration 150ms, box-shadow $transition-duration 300ms, padding $transition-duration);
+    transition: border $transition-duration 150ms, box-shadow $transition-duration 300ms, padding $transition-duration;
     width: 44px;
     vertical-align: top;
 
@@ -158,20 +161,20 @@ input[type="radio"].ios {
         position: absolute;
         right: 16px;
         top: 0;
-        @include transition(border 250ms 150ms, left 250ms 100ms, right 150ms 175ms);
+        transition: border 250ms 150ms, left 250ms 100ms, right 150ms 175ms;
     }
 
     &:checked {
         border-color: $green;
         box-shadow: inset 0 0 0 13px $green;
         padding-left: 18px;
-        @include transition(border 250ms, box-shadow 250ms, padding 250ms 150ms);
+        transition: border 250ms, box-shadow 250ms, padding 250ms 150ms;
 
         &:after {
             border-color: $green;
             left: 16px;
             right: 0;
-            @include transition(border 250ms, left 150ms 250ms, right 250ms 175ms);
+            transition: border 250ms, left 150ms 250ms, right 250ms 175ms;
         }
     }
 }
diff --git a/app/src/styles/components/_menu-dropdown.scss b/app/src/styles/components/_menu-dropdown.scss
index f8fc8aeba8..1cb7c18b79 100644
--- a/app/src/styles/components/_menu-dropdown.scss
+++ b/app/src/styles/components/_menu-dropdown.scss
@@ -54,9 +54,9 @@
         overflow: visible;
         display: block;
         padding: $link-padding;
-        @include transition-property($link-transition-property);
-        @include transition-duration(250ms);
-        @include transition-timing-function(ease-in);
+        transition-property: $link-transition-property;
+        transition-duration: 250ms;
+        transition-timing-function: ease-in;
         text-overflow: ellipsis;
         white-space: nowrap;
         font-weight: $weight-semibold;
diff --git a/app/src/styles/components/_menu.scss b/app/src/styles/components/_menu.scss
index abdab5cf0a..5fc011c653 100644
--- a/app/src/styles/components/_menu.scss
+++ b/app/src/styles/components/_menu.scss
@@ -62,7 +62,7 @@
             vertical-align: middle;
             position: relative;
             line-height: 50px;
-            @include transition(all .2s);
+            transition: all .2s;
             color: #c6c6c6;
         }
 
diff --git a/app/src/styles/components/_progress-bar.scss b/app/src/styles/components/_progress-bar.scss
index 66bee87a20..63b17cfe89 100644
--- a/app/src/styles/components/_progress-bar.scss
+++ b/app/src/styles/components/_progress-bar.scss
@@ -44,9 +44,9 @@
     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
     text-align: center;
     background-color: $progress-bar-color;
-    @include linear-gradient(top, #388ed6, #2b77b9);
+    background: linear-gradient(to bottom, #388ed6, #2b77b9);
     border-right: 1px solid darken(#388ed6, 15%);
-    @include transition(width 600ms ease);
+    transition: width 600ms ease;
 
     &[aria-valuenow="1"],
     &[aria-valuenow="2"] {
diff --git a/app/src/styles/components/_statistics-graph.scss b/app/src/styles/components/_statistics-graph.scss
index bc3da6791b..4e29018b1d 100644
--- a/app/src/styles/components/_statistics-graph.scss
+++ b/app/src/styles/components/_statistics-graph.scss
@@ -49,7 +49,7 @@
     > input[type="radio"]:checked + label {
       cursor: pointer;
       border: $thin-border-stroke darken($main-border-color, 2%);
-      @include linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%));
+      background: linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%));
       color: $medium-prim-color;
       box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.1);
     }
diff --git a/app/src/styles/components/_steps.scss b/app/src/styles/components/_steps.scss
index 6c0ba34fb0..f4d34402b3 100644
--- a/app/src/styles/components/_steps.scss
+++ b/app/src/styles/components/_steps.scss
@@ -45,7 +45,7 @@
         width: 100%;
         height: 1px;
         background: $main-border-color;
-        @include linear-gradient(
+        background: linear-gradient(
             left,
             rgba($modal-nav-border-color, 0) 5%,
             rgba($modal-nav-border-color, 1) 25%,
@@ -59,7 +59,7 @@
         margin: 0 10px;
         position: relative;
         line-height: $height + 30;
-        @include user-select(none);
+        user-select: none;
 
         // Dot
         &:after {
@@ -76,12 +76,12 @@
 
         // First line
         &:first-child:before {
-            @include linear-gradient(left, $modal-nav-bg-color, $modal-nav-border-color);
+            background: linear-gradient(to right, $modal-nav-bg-color, $modal-nav-border-color);
         }
 
         // Last line
         &:last-child:before {
-            @include linear-gradient(left, $modal-nav-border-color, $modal-nav-bg-color);
+            background: linear-gradient(to right, $modal-nav-border-color, $modal-nav-bg-color);
         }
 
         // Active step
diff --git a/app/src/styles/components/_tables.scss b/app/src/styles/components/_tables.scss
index 8ea3ee7b3d..ea866eef41 100644
--- a/app/src/styles/components/_tables.scss
+++ b/app/src/styles/components/_tables.scss
@@ -54,7 +54,7 @@
         &.sortable {
             cursor: pointer;
             &:hover {
-                @include linear-gradient(top, $off-white, darken(#f1f3f5, 3%));
+                background: linear-gradient(to bottom, $off-white, darken(#f1f3f5, 3%));
             }
             &:active {
                 box-shadow: inset 0 3px 10px 2px rgba($black, 0.05);
@@ -82,8 +82,8 @@
         border-right: 1px solid #c9d0d6;
         border-left: 1px solid #fff;
         border-bottom: 1px solid $border-color;
-        @include user-select(none);
-        @include linear-gradient(top, darken($off-white, 1%), darken(#f1f3f5, 3%));
+        user-select: none;
+        background: linear-gradient(to bottom, darken($off-white, 1%), darken(#f1f3f5, 3%));
 
         // Typography
         line-height: 35px;
@@ -415,7 +415,7 @@
                 opacity: 0;
                 visibility: hidden;
                 float: right;
-                @include transition(all .2s);
+                transition: all .2s;
             }
 
             &.js-active:after {
@@ -456,7 +456,7 @@
             padding-left: 3px;
 
             &.open {
-                @include transform(rotate(90deg));
+                transform: rotate(90deg);
             }
         }
     }
diff --git a/app/src/styles/components/_toggle-buttons.scss b/app/src/styles/components/_toggle-buttons.scss
index c605545fda..70f83a37f7 100644
--- a/app/src/styles/components/_toggle-buttons.scss
+++ b/app/src/styles/components/_toggle-buttons.scss
@@ -44,7 +44,7 @@
                 text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
                 border: 1px solid $l-blue;
                 border-right: 1px solid darken($l-blue, 10%);
-                @include linear-gradient(top, lighten(#2b77b9, 5%), #388ed6);
+                background: linear-gradient(to bottom, lighten(#2b77b9, 5%), #388ed6);
                 box-shadow: 0px 2px 3px 1px rgba(0,0,0,.05);
             }
         }
diff --git a/app/src/styles/components/data-filter/_add-button.scss b/app/src/styles/components/data-filter/_add-button.scss
index 3cbb0e47c1..4734f8eec2 100644
--- a/app/src/styles/components/data-filter/_add-button.scss
+++ b/app/src/styles/components/data-filter/_add-button.scss
@@ -24,9 +24,9 @@
     @include btn(white);
     @include fa-icon($fa-var-plus, before, inline-block, 0 8px 0 0, 0, inherit, 11px);
 
-    @include transition-property(width, padding, border-radius);
-    @include transition-duration(200ms);
-    @include transition-timing-function(ease-in);
+    transition-property: width, padding, border-radius;
+    transition-duration: 200ms;
+    transition-timing-function: ease-in;
 
     float: left;
     padding: 12px 10px;
@@ -42,7 +42,7 @@
 
     // Transition Properties for @include fa-icon(...); mixin
     &:before {
-        @include transition(color 200ms ease-in);
+        transition: color 200ms ease-in;
     }
 
     .js-df-state-new-filter & {
diff --git a/app/src/styles/components/data-filter/_base.scss b/app/src/styles/components/data-filter/_base.scss
index 1c5c4f1e11..318a96f295 100644
--- a/app/src/styles/components/data-filter/_base.scss
+++ b/app/src/styles/components/data-filter/_base.scss
@@ -24,7 +24,7 @@
     box-sizing: border-box;
     display: inline-block;
     vertical-align: top;
-    @include user-select(none);
+    user-select: none;
 }
 
 $df-height: 42px;
diff --git a/app/src/styles/components/data-filter/_clear-filters.scss b/app/src/styles/components/data-filter/_clear-filters.scss
index 04896cbc64..e5800ede07 100644
--- a/app/src/styles/components/data-filter/_clear-filters.scss
+++ b/app/src/styles/components/data-filter/_clear-filters.scss
@@ -29,7 +29,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    @include background-image(linear-gradient(right, #F7F7F7 50%, rgba(#F7F7F7, 0)));
+    background-image: linear-gradient(to left, #F7F7F7 50%, rgba(#F7F7F7, 0));
 
     .df-clear-button {
         display: block;
@@ -42,13 +42,13 @@
         font-family: "Open Sans", sans-serif;
         color: #555;
 
-        @include transition-property(visibility, opacity);
-        @include transition-duration(300ms);
-        @include transition-timing-function(ease-in-out);
-        @include transition-delay(160ms);
+        transition-property: visibility, opacity;
+        transition-duration: 300ms;
+        transition-timing-function: ease-in-out;
+        transition-delay: 160ms;
 
         &:before {
-            @include transition(color 250ms ease-in-out);
+            transition: color 250ms ease-in-out;
         }
 
         &:hover {
diff --git a/app/src/styles/components/data-filter/_filter-profiles.scss b/app/src/styles/components/data-filter/_filter-profiles.scss
index 15eabf1115..aa15707285 100644
--- a/app/src/styles/components/data-filter/_filter-profiles.scss
+++ b/app/src/styles/components/data-filter/_filter-profiles.scss
@@ -40,7 +40,7 @@
 
     // Common Elements
     header {
-        @include linear-gradient(#fff, #f7f7f7);
+        background: linear-gradient(#fff, #f7f7f7);
         border-top-left-radius: $main-border-radius;
         border-top-right-radius: $main-border-radius;
         border-bottom: 1px solid $main-border-color;
@@ -57,7 +57,7 @@
         }
     } // header
     .footer-btn {
-        @include linear-gradient(#fafafa, #f0f2f5);
+        background: linear-gradient(#fafafa, #f0f2f5);
         border-top: 1px solid darken(#f0f2f5, 10%);
         border-bottom-left-radius: $main-border-radius;
         border-bottom-right-radius: $main-border-radius;
@@ -90,13 +90,13 @@
         font-family: "Open Sans", sans-serif;
         color: #555;
 
-        @include transition-property(visibility, opacity);
-        @include transition-duration(300ms);
-        @include transition-timing-function(ease-in-out);
-        @include transition-delay(160ms);
+        transition-property: visibility, opacity;
+        transition-duration: 300ms;
+        transition-timing-function: ease-in-out;
+        transition-delay: 160ms;
 
         &:before {
-            @include transition(color 250ms ease-in-out);
+            transition: color 250ms ease-in-out;
         }
 
         &:hover {
diff --git a/app/src/styles/components/data-filter/_input-base.scss b/app/src/styles/components/data-filter/_input-base.scss
index 8926b668df..50b8bc96d0 100644
--- a/app/src/styles/components/data-filter/_input-base.scss
+++ b/app/src/styles/components/data-filter/_input-base.scss
@@ -24,10 +24,10 @@
     position: relative;
     box-sizing: border-box;
 
-    @include transition-property(width, padding, visibility, opacity);
-    @include transition-duration(300ms);
-    @include transition-timing-function(ease-in-out);
-    @include transition-delay(80ms);
+    transition-property: width, padding, visibility, opacity;
+    transition-duration: 300ms;
+    transition-timing-function: ease-in-out;
+    transition-delay: 80ms;
 
     float: left;
     width: 0px;
diff --git a/app/src/styles/components/data-filter/_input-button.scss b/app/src/styles/components/data-filter/_input-button.scss
index 8d29e817e3..6d93c30a87 100644
--- a/app/src/styles/components/data-filter/_input-button.scss
+++ b/app/src/styles/components/data-filter/_input-button.scss
@@ -23,15 +23,15 @@
 .df-popout-button {
     box-sizing: border-box;
     @include btn(white);
-    @include user-select(none);
+    user-select: none;
 
     $icon-pseudo-position: before;
     @include fa-icon($fa-var-ellipsis-v, $icon-pseudo-position, inline-block, 0 8px 0 0, 0, inherit, 14px);
 
-    @include transition-property(padding, visibility, opacity);
-    @include transition-duration(300ms);
-    @include transition-timing-function(ease-in-out);
-    @include transition-delay(80ms);
+    transition-property: padding, visibility, opacity;
+    transition-duration: 300ms;
+    transition-timing-function: ease-in-out;
+    transition-delay: 80ms;
 
     float: left;
     width: 15px;
diff --git a/app/src/styles/components/data-filter/_label.scss b/app/src/styles/components/data-filter/_label.scss
index bc47cedd20..52c0fb4770 100644
--- a/app/src/styles/components/data-filter/_label.scss
+++ b/app/src/styles/components/data-filter/_label.scss
@@ -31,12 +31,12 @@
     // Hide Behind Parent
     position: relative;
     z-index: -1;
-    @include transform(translateY(15px));
+    transform: translateY(15px);
 
-    @include transition-property(visibility, opacity, transform);
-    @include transition-duration(300ms);
-    @include transition-timing-function(ease-in-out);
-    @include transition-delay(80ms);
+    transition-property: visibility, opacity, transform;
+    transition-duration: 300ms;
+    transition-timing-function: ease-in-out;
+    transition-delay: 80ms;
 
     .js-df-state-new-filter & {
         visibility: visible;
@@ -44,6 +44,6 @@
 
         // Reveal from origin
         z-index: 1;
-        @include transform(translateY(0px));
+        transform: translateY(0px);
     }
 }
\ No newline at end of file
diff --git a/app/src/styles/components/data-filter/_popout.scss b/app/src/styles/components/data-filter/_popout.scss
index 6889172e0d..0e14acfd94 100644
--- a/app/src/styles/components/data-filter/_popout.scss
+++ b/app/src/styles/components/data-filter/_popout.scss
@@ -54,7 +54,7 @@
 }
 
 .df-popout-header {
-    @include linear-gradient($white, #f7f7f7);
+    background: linear-gradient($white, #f7f7f7);
     border-top-left-radius: $main-border-radius;
     border-top-right-radius: $main-border-radius;
     border-bottom: $thin-border-stroke $main-border-color;
@@ -65,30 +65,47 @@
 }
 
 .df-table {
-    @include outer-container(100%);
+    // @include outer-container(100%);
+    @include grid-container;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+
     padding: 5px 10px;
     max-height: 150px;
     overflow: auto;
 
     // Row
     .row {
-        @include fill-parent();
-        @include row(table);
+        // @include fill-parent();
+        width: 100%;
+        box-sizing: border-box;
+        // @include row(table);
+        *zoom: 1;
+        display: block;
+    }
+    .row:before, .element:after {
+      content: " ";
+      display: table;
+    }
+    .row:after {
+      clear: both;
     }
 
     // Columns
     .df-saved-name {
-        @include span-columns(9);
-        @include pad(5px 0);
+        @include grid-column(9);
+        padding: 5px 0;
 
         font-size: 12px;
         font-weight: $weight-semibold;
     }
 
     .df-saved-actions {
-        @include span-columns(3);
-        @include reset-display;
-        @include pad(5px 0);
+        @include grid-column(3);
+        // @include reset-display;
+        display: block;
+        padding: 5px 0;
     }
 }
 
@@ -135,7 +152,12 @@ $df-saved-actions-font-size: 11px;
 
 // Filter Set Form
 .df-save-set-container {
-    @include outer-container(100%);
+    // @include outer-container(100%);
+    @include grid-container;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+
     padding: 10px;
 
     .row {
@@ -168,7 +190,7 @@ $df-saved-actions-font-size: 11px;
     }
 
     %df-save-set-button {
-        @include span-columns(6);
+        @include grid-column(6);
         text-shadow: none;
         text-align: center;
     }
diff --git a/app/src/styles/components/data-filter/_select-dropdown.scss b/app/src/styles/components/data-filter/_select-dropdown.scss
index 5e6b1d7f9c..1184e2fd04 100644
--- a/app/src/styles/components/data-filter/_select-dropdown.scss
+++ b/app/src/styles/components/data-filter/_select-dropdown.scss
@@ -42,7 +42,7 @@ $df-select-dropdown-horizontal-padding: 6px;
 .df-select-dropdown {
     box-sizing: border-box;
     @include btn(white);
-    @include appearance(none);
+    appearance: none;
     display: inline-block;
     float: left;
     width: auto;
@@ -63,7 +63,7 @@ $df-select-dropdown-horizontal-padding: 6px;
         &:not(.df-paired-dropdown) {
             @extend .animated !optional;
             @extend .flipInX !optional;
-            @include animation-delay(400ms);
+            animation-delay: 400ms;
         }
 
         &.df-paired-dropdown {
@@ -99,7 +99,7 @@ $df-select-dropdown-horizontal-padding: 6px;
         text-align: left;
 
         &:hover {
-            @include background(linear-gradient(#fff, #f7f7f7));
+            background: linear-gradient(#fff, #f7f7f7);
             border: $thin-border-stroke $main-border-color;
             color: $medium-prim-color;
         }
@@ -145,13 +145,13 @@ $df-select-dropdown-horizontal-padding: 6px;
         @include fa-icon-color(before, $light-prim-color);
     }
 
-    @include transition-property(visibility, opacity);
-    @include transition-duration(300ms);
-    @include transition-timing-function(ease-in-out);
-    @include transition-delay(160ms);
+    transition-property: visibility, opacity;
+    transition-duration: 300ms;
+    transition-timing-function: ease-in-out;
+    transition-delay: 160ms;
 
     &:before {
-        @include transition(color 250ms ease-in-out);
+        transition: color 250ms ease-in-out;
     }
 
     &:hover:not(.disabled) {
diff --git a/app/src/styles/components/data-filter/_select-options.scss b/app/src/styles/components/data-filter/_select-options.scss
index 624d056d8e..33b5ea1bdc 100644
--- a/app/src/styles/components/data-filter/_select-options.scss
+++ b/app/src/styles/components/data-filter/_select-options.scss
@@ -42,9 +42,9 @@
     background: rgba($white, 0.98);
     box-shadow: 0 1px 3px rgba($black, 0.06);
 
-    @include transition-property(visibility, opacity);
-    @include transition-duration(100ms);
-    @include transition-timing-function(ease-in);
+    transition-property: visibility, opacity;
+    transition-duration: 100ms;
+    transition-timing-function: ease-in;
 
     a {
         display: block;
@@ -56,9 +56,9 @@
         text-shadow: none;
         cursor: pointer;
 
-        @include transition-property(color, background);
-        @include transition-duration(50ms);
-        @include transition-timing-function(ease-in);
+        transition-property: color, background;
+        transition-duration: 50ms;
+        transition-timing-function: ease-in;
 
         // ----------------------------------------
 
diff --git a/app/src/styles/components/modals/_header.scss b/app/src/styles/components/modals/_header.scss
index db7af7d1fd..72bb60acf8 100644
--- a/app/src/styles/components/modals/_header.scss
+++ b/app/src/styles/components/modals/_header.scss
@@ -27,7 +27,7 @@
     width: 100%;
     height: 40px;
     line-height: 40px;
-    @include linear-gradient(top, #fbfbfb, #e8e8e8);
+    background: linear-gradient(to bottom, #fbfbfb, #e8e8e8);
     border-bottom: 1px solid $main-border-color;
     @include border-top-radius($main-border-radius);
     padding: 0 20px;
@@ -63,7 +63,7 @@
         border-radius: $main-border-radius !important;
 
         &:after {
-            @include transform(rotate(180deg));
+            transform: rotate(180deg);
         }
     }
 
diff --git a/app/src/styles/components/modals/_important-messages.scss b/app/src/styles/components/modals/_important-messages.scss
index 509c7bd83a..af8025c064 100644
--- a/app/src/styles/components/modals/_important-messages.scss
+++ b/app/src/styles/components/modals/_important-messages.scss
@@ -78,7 +78,8 @@
                 z-index: $max-z;
                 width: $w;
                 height: $h;
-                @include retina-image("#{$img-path}#{$image-name}", $w $h);
+                background-image: url("#{$img-path}#{$image-name}.png");
+                background-size: $w $h;
             }
         }
     }
diff --git a/app/src/styles/components/modals/_modal-base.scss b/app/src/styles/components/modals/_modal-base.scss
index 395c6b136f..94815dec1d 100644
--- a/app/src/styles/components/modals/_modal-base.scss
+++ b/app/src/styles/components/modals/_modal-base.scss
@@ -53,7 +53,7 @@
     visibility: hidden;
     opacity: 0;
     display: none;
-    @include transition(all .2s);
+    transition: all .2s;
     z-index: ($max-z + 2);
     width: $modal-width;
     height: auto;
@@ -81,7 +81,7 @@
         font-size: 50px;
         color: rgba($white, 0.7);
         text-shadow: 0 0 10px rgba($black, 0.4);
-        @include transition(all 0.2s);
+        transition: all 0.2s;
 
         &.fa-chevron-left  {
             left: $spacing;
@@ -106,7 +106,7 @@
     // Hide overlay
     visibility: hidden;
     opacity: 0;
-    @include transition(all .15s);
+    transition: all .15s;
 
     &.active {
         opacity: 1;
@@ -118,7 +118,8 @@
     width: 100%;
     height: 100%;
     z-index: $max-z + 1;
-    @include radial-gradient(rgba($black, 0.2), rgba($black, 0.4));
+    background-color: rgba($black, 0.2);
+    background-image: radial-gradient(rgba($black, 0.2), rgba($black, 0.4));
 
 }
 
@@ -175,7 +176,7 @@
         header {
             $height: 35px;
             @include accordion-header($height);
-            @include user-select(none);
+            user-select: none;
             position: static;
 
             &.expand {
diff --git a/app/src/styles/components/modals/_modal-components.scss b/app/src/styles/components/modals/_modal-components.scss
index d34689c42a..f50c7ebf0f 100644
--- a/app/src/styles/components/modals/_modal-components.scss
+++ b/app/src/styles/components/modals/_modal-components.scss
@@ -359,7 +359,7 @@
         .remove-file-button {
 
             // Reset
-            @include appearance(none);
+            appearance: none;
             background: none;
             outline: none;
             border: none;
@@ -394,7 +394,7 @@
     }
 
     .progress-bar {
-        @include linear-gradient(top, lighten($bright-blue, 5%), $bright-blue);
+        background: linear-gradient(to bottom, lighten($bright-blue, 5%), $bright-blue);
     }
 
     button {
@@ -513,9 +513,9 @@
             z-index: $z-60;
             width: 500px;
             height: 100%;
-            @include calc(max-width, "100% - 10px");
-            @include calc(max-height, "100% - 12px");
-            @include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+            max-width: calc(100% - 10px);
+            max-height: calc(100% - 12px);
+            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
             overflow: hidden;
         }
 
@@ -528,7 +528,7 @@
 
         .watermark-preview,
         .watermark-config {
-            @include span-columns(6);
+            @include grid-column(6);
         }
 
         .watermark-preview {
@@ -628,7 +628,7 @@
             line-height: 22px;
             font-weight: $weight-semibold;
             text-align: center;
-            @include calc(max-height, "100% - 0px");
+            max-height: calc(100% - 0px);
 
             &.left-aligned {
                 text-align: left;
@@ -685,7 +685,7 @@
 
             // for legal or other small print
             &.paragraph-meta {
-                @include linear-gradient(top, rgba($black, 0.8), rgba($black, 0.2));
+                background: linear-gradient(to bottom, rgba($black, 0.8), rgba($black, 0.2));
                 height: 100%;
                 font-size: 12px;
                 line-height: 18px;
diff --git a/app/src/styles/components/video/_video-controls.scss b/app/src/styles/components/video/_video-controls.scss
index 521eff14f4..6b4781efb5 100644
--- a/app/src/styles/components/video/_video-controls.scss
+++ b/app/src/styles/components/video/_video-controls.scss
@@ -23,7 +23,7 @@
 .video-controls {
     @include clearfix();
     box-sizing: border-box;
-    @include linear-gradient(top, #fff, #f7f7f7);
+    background: linear-gradient(to bottom, #fff, #f7f7f7);
     border: $thin-border-stroke $main-border-color;
     height: 50px;
     padding: 0 15px;
@@ -80,7 +80,7 @@
     }
 
     input {
-        @include appearance(none);
+        appearance: none;
         border-radius: 4px;
         height: 2px;
     }
@@ -222,7 +222,7 @@ $playback-icon-font-size: 16px;
 
     input[type="number"] {
         box-sizing: border-box;
-        @include appearance(none);
+        appearance: none;
         @include font-smoothing(on);
         background: none;
         border: 0;
diff --git a/app/src/styles/components/video/_video-editor.scss b/app/src/styles/components/video/_video-editor.scss
index 41664d7c5f..7722e4cbba 100644
--- a/app/src/styles/components/video/_video-editor.scss
+++ b/app/src/styles/components/video/_video-editor.scss
@@ -484,7 +484,7 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%);
               position: absolute;
 
               display: none;
-              @include transition(all 800ms);
+              transition: all 800ms;
             }
 
             .arrow_box:after, .arrow_box:before {
diff --git a/app/src/styles/components/video/_video-event-area.scss b/app/src/styles/components/video/_video-event-area.scss
index 06d51b04e0..f5ea128ca4 100644
--- a/app/src/styles/components/video/_video-event-area.scss
+++ b/app/src/styles/components/video/_video-event-area.scss
@@ -215,7 +215,7 @@
     header {
         $height: 35px;
         @include accordion-header($height);
-        @include user-select(none);
+        user-select: none;
         position: static;
 
         &.expand {
diff --git a/app/src/styles/components/video/popover/_animation.scss b/app/src/styles/components/video/popover/_animation.scss
index 3fb5821942..5e33ea2c6b 100644
--- a/app/src/styles/components/video/popover/_animation.scss
+++ b/app/src/styles/components/video/popover/_animation.scss
@@ -52,6 +52,6 @@
     .shortcuts-popover {
         visibility: visible;
         opacity: 1;
-        @include transition-delay(0ms);
+        transition-delay: 0ms;
     }
 }
diff --git a/app/src/styles/components/video/popover/_base.scss b/app/src/styles/components/video/popover/_base.scss
index 1dd4f0c373..ed38817c67 100644
--- a/app/src/styles/components/video/popover/_base.scss
+++ b/app/src/styles/components/video/popover/_base.scss
@@ -46,7 +46,7 @@
     content: "";
     display: block;
     margin: 0;
-    @include transition(margin 350ms ease-in-out);
+    transition: margin 350ms ease-in-out;
 }
 
 .keyboard-shortcuts.active .shortcuts-popover::after {
@@ -74,7 +74,7 @@ $parent-border-stroke: 1px;
 .popover-header {
     @extend .popover-container;
 
-    @include linear-gradient(top, #fff, #f7f7f7);
+    background: linear-gradient(to bottom, #fff, #f7f7f7);
     border: $thin-border-stroke $main-border-color;
     @include border-top-radius($main-border-radius);
     box-shadow: inset 0 1px 0px 0px #fff, 0 0 2px rgba(0,0,0,.05);
diff --git a/app/src/styles/extensions/components/_drag-and-drop.scss b/app/src/styles/extensions/components/_drag-and-drop.scss
index 34e4615ac5..712a4ee2cf 100644
--- a/app/src/styles/extensions/components/_drag-and-drop.scss
+++ b/app/src/styles/extensions/components/_drag-and-drop.scss
@@ -25,13 +25,13 @@
     padding: 15px 10px;
 
     .drag-item {
-        @include user-select(none);
+        user-select: none;
         height: 35px;
         width: 100%;
         border-radius: $main-border-radius;
         cursor: move;
         border: $thin-border-stroke $main-border-color;
-        @include linear-gradient(top, #fff, #f3f5f6);
+        background: linear-gradient(to bottom, #fff, #f3f5f6);
         color: darken(#8c939b, 10%);
         font-weight: 600;
         text-shadow: 0px 1px 0px #fff;
@@ -39,7 +39,7 @@
         position: relative;
         margin: 10px 0;
         box-shadow: 0 0 0 rgba(0,0,0,0);
-        @include transition(box-shadow .3s ease-in-out);
+        transition: box-shadow .3s ease-in-out;
 
         .title {
             padding: 10px;
@@ -47,12 +47,12 @@
         }
 
         &:hover {
-            @include linear-gradient(top, #fff, darken(#f3f5f6, 2%));
+            background: linear-gradient(to bottom, #fff, darken(#f3f5f6, 2%));
         }
 
         &:active,
         &.being-dragged {
-            @include linear-gradient(top, darken(#fff, 2%), darken(#f3f5f6, 3%));
+            background: linear-gradient(to bottom, darken(#fff, 2%), darken(#f3f5f6, 3%));
             cursor: move;
             border: $thin-border-stroke darken($main-border-color, 5%);
             box-shadow: 0 0 4px rgba(0,0,0,0.1);
@@ -75,7 +75,8 @@
             position: absolute;
             top: 12px;
             left: 10px;
-            @include retina-image("#{$img-path}grip", 13px 14px);
+            background-image: url("#{$img-path}grip.png");
+            background-size: 13px 14px;
         }
 
         // Item Move Buttons
@@ -88,11 +89,13 @@
             right: 10px;
 
             &.add {
-                @include retina-image("#{$img-path}plus-icon", 17px 17px);
+                background-image: url("#{$img-path}plus-icon.png");
+                background-size: 17px 17px;
             }
 
             &.remove {
-                @include retina-image("#{$img-path}remove-icon", 17px 17px);
+                background-image: url("#{$img-path}remove-icon.png");
+                background-size: 17px 17px;
             }
         }
     }
diff --git a/app/src/styles/extensions/components/_tables.scss b/app/src/styles/extensions/components/_tables.scss
index 7e860f51c1..302f4c622e 100644
--- a/app/src/styles/extensions/components/_tables.scss
+++ b/app/src/styles/extensions/components/_tables.scss
@@ -42,7 +42,7 @@
     border-bottom: none;
     border-top-left-radius: $main-border-radius;
     border-top-right-radius: $main-border-radius;
-    @include linear-gradient(top, #fff, #f7f7f7);
+    background: linear-gradient(to bottom, #fff, #f7f7f7);
 
     $action-icon-margin: 0 4px 0 0;
 
@@ -92,7 +92,7 @@
     vertical-align: middle;
     position: relative;
     cursor: pointer;
-    @include user-select(none);
+    user-select: none;
     width: 25px;
     height: 22px;
     @include btn(white);
@@ -123,7 +123,7 @@
         background: $body-background;
         border: $thin-border-stroke $main-border-color;
         border-radius: $main-border-radius;
-        @include transition(visibility 200ms, opacity 200ms);
+        transition: visibility 200ms, opacity 200ms;
 
         &:before,
         &:after {
diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss
index 623ed274c3..589b754c97 100644
--- a/app/src/styles/main.scss
+++ b/app/src/styles/main.scss
@@ -26,8 +26,8 @@
 $disable-warnings: true !default; // disables deprecation warnings
 
 // Imports
-@import "../../node_modules/bourbon/app/assets/stylesheets/bourbon";
-@import "../../node_modules/bourbon-neat/app/assets/stylesheets/neat";
+@import "../../node_modules/bourbon/core/bourbon";
+@import "../../node_modules/bourbon-neat/core/neat";
 
 // Foundation
 // ----------------------------------------
@@ -99,6 +99,15 @@ $disable-warnings: true !default; // disables deprecation warnings
   }
 }
 
+// We rely on border-box to center elements and cut down padding
+// This had to be added during the bourbon upgrade from 4 to 7
+html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 // All anchors should behave clickable (even without href attributes)
 a {
   cursor: pointer;
@@ -536,7 +545,7 @@ table.main-tbl {
       font-size: 18px;
       opacity: 0;
       visibility: hidden;
-      @include transition(all .2s);
+      transition: all .2s;
 
       &.active {
         opacity: 1;
diff --git a/app/src/styles/mixins/_button.scss b/app/src/styles/mixins/_button.scss
index cac652bc2d..7f00338107 100644
--- a/app/src/styles/mixins/_button.scss
+++ b/app/src/styles/mixins/_button.scss
@@ -31,18 +31,18 @@
     @if $color == green-dark-bg {
         box-shadow: inset 0px 1px 0px 0px $primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05);
 
-        @include linear-gradient($primary-color-green, $primary-color-green-dark-1);
+        background: linear-gradient($primary-color-green, $primary-color-green-dark-1);
 
         border: $thin-border-stroke $dark-bg-border-color;
 
         &:hover {
             cursor: pointer;
-            @include linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 5%));
+            background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 5%));
         }
 
         &:focus {
             cursor: pointer;
-            @include linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 5%));
+            background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 5%));
         }
 
         &:active {
@@ -55,18 +55,18 @@
     @else if $color == blue-dark-bg {
         box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05);
 
-        @include linear-gradient(#3a5e7e, #2c9966);
+        background: linear-gradient(#3a5e7e, #2c9966);
 
         border: $thin-border-stroke $dark-bg-border-color;
 
         &:hover {
             cursor: pointer;
-            @include linear-gradient(lighten(#3a5e7e, 5%), darken(#2c9966, 10%));
+            background: linear-gradient(lighten(#3a5e7e, 5%), darken(#2c9966, 10%));
         }
 
         &:focus {
             cursor: pointer;
-            @include linear-gradient(lighten(#3a5e7e, 5%), darken(#2c9966, 10%));
+            background: linear-gradient(lighten(#3a5e7e, 5%), darken(#2c9966, 10%));
         }
 
         &:active {
@@ -78,18 +78,18 @@
     @else if $color == green {
         box-shadow: inset 0px 1px 0px 0px $primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05);
 
-        @include linear-gradient($primary-color-green, $primary-color-green-dark-1);
+        background: linear-gradient($primary-color-green, $primary-color-green-dark-1);
 
         border: $thin-border-stroke $primary-color-green-dark-3;
 
         &:hover {
             cursor: pointer;
-            @include linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 10%));
+            background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 10%));
         }
 
         &:focus {
             cursor: pointer;
-            @include linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 10%));
+            background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 10%));
         }
 
         &:active {
@@ -102,18 +102,18 @@
     @else if $color == blue {
         box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05);
 
-        @include linear-gradient(#3a5e7e, #2c9966);
+        background: linear-gradient(#3a5e7e, #2c9966);
 
         border: $thin-border-stroke $dark-bg-border-color;
 
         &:hover {
             cursor: pointer;
-            @include linear-gradient(darken(#3a5e7e, 1%), darken(#2c9966, 10%));
+            background: linear-gradient(darken(#3a5e7e, 1%), darken(#2c9966, 10%));
         }
 
         &:focus {
             cursor: pointer;
-            @include linear-gradient(darken(#3a5e7e, 1%), darken(#2c9966, 10%));
+            background: linear-gradient(darken(#3a5e7e, 1%), darken(#2c9966, 10%));
         }
 
         &:active {
@@ -126,18 +126,18 @@
 
         box-shadow: inset 0px 1px 0px 0px lighten(#388ed6, 10%), 0px 2px 3px 1px rgba(0,0,0,.05);
 
-        @include linear-gradient(#388ed6, #2b77b9);
+        background: linear-gradient(#388ed6, #2b77b9);
 
         border: $thin-border-stroke darken(#2b77b9, 5%);
 
         &:hover {
             cursor: pointer;
-            @include linear-gradient(lighten(#388ed6, 10%), darken(#2b77b9, 10%));
+            background: linear-gradient(lighten(#388ed6, 10%), darken(#2b77b9, 10%));
         }
 
         &:focus {
             cursor: pointer;
-            @include linear-gradient(lighten(#388ed6, 10%), darken(#2b77b9, 10%));
+            background: linear-gradient(lighten(#388ed6, 10%), darken(#2b77b9, 10%));
         }
 
         &:active {
@@ -150,18 +150,18 @@
 
         box-shadow: inset 0px 1px 0px 0px lighten(#55cef2, 10%), 0px 2px 3px 1px rgba(0,0,0,.05);
 
-        @include linear-gradient(#55cef2, #4da1f7);
+        background: linear-gradient(#55cef2, #4da1f7);
 
         border: $thin-border-stroke darken(#4da1f7, 10%);
 
         &:hover {
             cursor: pointer;
-            @include linear-gradient(lighten(#55cef2, 5%), darken(#4da1f7, 10%));
+            background: linear-gradient(lighten(#55cef2, 5%), darken(#4da1f7, 10%));
         }
 
         &:focus {
             cursor: pointer;
-            @include linear-gradient(lighten(#55cef2, 5%), darken(#4da1f7, 10%));
+            background: linear-gradient(lighten(#55cef2, 5%), darken(#4da1f7, 10%));
         }
 
         &:active {
@@ -173,20 +173,20 @@
     @else if $color == red {
         box-shadow: inset 0px 1px 0px 0px lighten($alt-red, 10%), 0px 2px 3px 1px rgba(0,0,0,.05);
 
-        @include linear-gradient(lighten($alt-red, 5%), darken($alt-red, 5%));
+        background: linear-gradient(lighten($alt-red, 5%), darken($alt-red, 5%));
 
         border: $thin-border-stroke darken($alt-red, 20%);
 
         &:hover {
             cursor: pointer;
             border: $thin-border-stroke darken($alt-red, 30%);
-            @include linear-gradient(lighten($alt-red, 10%), darken($alt-red, 10%));
+            background: linear-gradient(lighten($alt-red, 10%), darken($alt-red, 10%));
         }
 
         &:focus {
             cursor: pointer;
             border: $thin-border-stroke darken($alt-red, 30%);
-            @include linear-gradient(lighten($alt-red, 10%), darken($alt-red, 10%));
+            background: linear-gradient(lighten($alt-red, 10%), darken($alt-red, 10%));
         }
 
         &:active {
@@ -197,7 +197,7 @@
 
     @else if $color == white {
 
-        @include linear-gradient(#fff, #f7f7f7);
+        background: linear-gradient(#fff, #f7f7f7);
         border: $thin-border-stroke $main-border-color;
         box-shadow: inset 0px 1px 0px 0px #fff, 0px 1px 2px rgba(0,0,0,.05);
         outline: none;
@@ -207,14 +207,14 @@
         &:hover {
             cursor: pointer;
             border: $thin-border-stroke darken($main-border-color, 2%);
-            @include linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%));
+            background: linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%));
             color: $medium-prim-color;
         }
 
         &:focus {
             cursor: pointer;
             border: $thin-border-stroke darken($main-border-color, 2%);
-            @include linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%));
+            background: linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%));
             color: $medium-prim-color;
         }
 
diff --git a/app/src/styles/mixins/_mixins-config.scss b/app/src/styles/mixins/_mixins-config.scss
index d6f703fac8..c1490874d1 100644
--- a/app/src/styles/mixins/_mixins-config.scss
+++ b/app/src/styles/mixins/_mixins-config.scss
@@ -45,7 +45,8 @@
     left: $left;
     width: $width;
     height: $height;
-    @include retina-image("#{$img-path}#{$image}", $width $height);
+    background-image: url("#{$img-path}#{$image}.png");
+    background-size: $width $height;
 }
 
 
@@ -63,7 +64,7 @@
     box-sizing: border-box;
     height: $height;
     line-height: $height;
-    @include linear-gradient(top, #fff, #f3f5f6);
+    background: linear-gradient(to bottom, #fff, #f3f5f6);
     border-bottom: 1px solid $main-border-color;
     @include border-top-radius($main-border-radius);
     margin: 0;
@@ -80,11 +81,11 @@
         @include fa-icon($fa-var-chevron-down, after, inline-block, 10px 0);
 
         &:hover {
-            @include linear-gradient(top, #fff, darken(#f3f5f6, 2%));
+            background: linear-gradient(to bottom, #fff, darken(#f3f5f6, 2%));
         }
 
         &:active {
-            @include linear-gradient(top, darken(#fff, 2%), darken(#f3f5f6, 3%));
+            background: linear-gradient(to bottom, darken(#fff, 2%), darken(#f3f5f6, 3%));
         }
 
         &:after {
@@ -102,14 +103,14 @@
     z-index: $max-z - 9;
     visibility: hidden;
     opacity: 0;
-    @include transition(all 200ms);
+    transition: all 200ms;
     background: $white;
     border: $thin-border-stroke $main-border-color;
     border-radius: $main-border-radius;
     width: $width;
 
     header {
-        @include linear-gradient($white, #f7f7f7);
+        background: linear-gradient($white, #f7f7f7);
         @include border-top-radius($main-border-radius);
         border-bottom: $thin-border-stroke $main-border-color;
         height: 30px;
@@ -121,7 +122,7 @@
     }
 
     .footer-btn {
-        @include linear-gradient($off-white, #f0f2f5);
+        background: linear-gradient($off-white, #f0f2f5);
         border-top: $thin-border-stroke darken(#f0f2f5, 10%);
         @include border-bottom-radius($main-border-radius);
         display: block;
diff --git a/app/src/styles/views/_core.scss b/app/src/styles/views/_core.scss
index e4df3a2436..a02594dc0d 100644
--- a/app/src/styles/views/_core.scss
+++ b/app/src/styles/views/_core.scss
@@ -152,10 +152,10 @@ body {
                 color: #717171;
                 text-shadow: 0 1px 0 rgba($white, 1);
                 border: $thin-border-stroke $main-border-color;
-                @include linear-gradient(top, #f8f8f8, #e9e9e9);
+                background: linear-gradient(to bottom, #f8f8f8, #e9e9e9);
 
                 // Pulled from Button Mixin (keep in sync with those styles)
-                @include linear-gradient(#fff, #f7f7f7);
+                background: linear-gradient(#fff, #f7f7f7);
                 border: $thin-border-stroke $main-border-color;
                 box-shadow: inset 0px 1px 0px 0px #fff, 0px 1px 2px rgba(0,0,0,.05);
                 outline: none;
@@ -164,7 +164,7 @@ body {
 
                 &:hover:not(.active) {
                     border: $thin-border-stroke darken($main-border-color, 2%);
-                    @include linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%));
+                    background: linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%));
                     color: $medium-prim-color;
                 }
 
diff --git a/app/src/styles/views/_login.scss b/app/src/styles/views/_login.scss
index af4946d113..fd71cab489 100644
--- a/app/src/styles/views/_login.scss
+++ b/app/src/styles/views/_login.scss
@@ -31,7 +31,8 @@
     position: relative;
     height: inherit;
     color: $global-text-color;
-    @include radial-gradient($off-white, #d8dfe4);
+    background-color: $off-white;
+    background-image: radial-gradient($off-white, #d8dfe4);
 }
 
 .login-container {
@@ -131,7 +132,7 @@
             text-align: center;
             border-radius: 4px;
             border: none;
-            @include transition(all .2s);
+            transition: all .2s;
 
             &:hover {
                 background: lighten($l-blue, 5%);
diff --git a/app/src/styles/views/_statistics.scss b/app/src/styles/views/_statistics.scss
index 4c172b7daf..fdd773ac1b 100644
--- a/app/src/styles/views/_statistics.scss
+++ b/app/src/styles/views/_statistics.scss
@@ -3,7 +3,7 @@
     width: 100%;
     height: 40px;
     line-height: 40px;
-    @include linear-gradient(top, #fbfbfb, #e8e8e8);
+    background: linear-gradient(to bottom, #fbfbfb, #e8e8e8);
     border-bottom: 1px solid $main-border-color;
     @include border-top-radius($main-border-radius);
     padding: 0 20px;