[!!!][TASK] Refactor Scss, add Sass-lint and adjust styling

Add variables to allow easy modifications to color, font and also extending Style

assets/icons/_icon-mixin.scss

@@ -0,0 +1,7 @@
+@mixin icon($name, $code, $prefix: 'ion-') {
+  .#{$prefix}#{$name} {
+    &:before {
+      content: '#{$code}';
+    }
+  }
+}

assets/icons/hopglass-icons.css

@@ -1,96 +0,0 @@
-@font-face {
-    font-family: "Ionicons";
-    src: url("fonts/icon.woff2") format("woff2"),
-    url("fonts/icon.woff") format("woff"),
-    url("fonts/icon.ttf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
-
-}
-
-[class^="ion-"]:before,
-[class*=" ion-"]:before, .ion-inside {
-    display: inline-block;
-    font-family: "ionicons" !important;
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    text-rendering: auto;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.ion-android-add:before {
-    content: "\f2c7";
-}
-
-.ion-chevron-left:before {
-    content: "\f124";
-}
-
-.ion-chevron-right:before {
-    content: "\f125";
-}
-
-.ion-pin:before {
-    content: "\f3a3";
-}
-
-.ion-wifi:before {
-    content: "\f25c";
-}
-
-.ion-eye:before {
-    content: "\f133";
-}
-
-.ion-ios-arrow-thin-left:before {
-    content: "\f3d5";
-}
-
-.ion-ios-arrow-thin-right:before {
-    content: "\f3d6";
-}
-
-.ion-arrow-up-b:before {
-    content: "\f10d";
-}
-
-.ion-arrow-down-b:before {
-    content: "\f104";
-}
-
-.ion-android-locate:before {
-    content: "\f2e9";
-}
-
-.ion-android-close:before {
-    content: "\f2d7";
-}
-
-.ion-android-lock:before {
-    content: "\f392";
-}
-
-.ion-ios-copy:before {
-    content: "\f41c";
-}
-
-.ion-location:before {
-    content: "\f456";
-}
-
-.ion-android-remove:before {
-    content: "\f2f4";
-}
-
-.ion-ios-person:before {
-    content: "\f47e";
-}
-
-.ion-layer:before {
-    content: "\f229";
-}

assets/icons/icon.scss

@@ -0,0 +1,45 @@
+// Needed for standalone scss
+// @import 'icon-mixin';
+
+@font-face {
+  font-family: 'ionicons';
+  font-style: normal;
+  font-weight: normal;
+  src: url('fonts/icon.woff2') format('woff2'),
+  url('fonts/icon.woff') format('woff'),
+  url('fonts/icon.ttf') format('truetype');
+}
+
+[class^='ion-'], [class*=' ion-'] {
+  &:before {
+    display: inline-block;
+    font-family: $font-family-icons;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    line-height: 1;
+    speak: none;
+    text-rendering: auto;
+    text-transform: none;
+    vertical-align: 0;
+  }
+}
+
+@include icon('android-add', '\f2c7');
+@include icon('chevron-left', '\f124');
+@include icon('chevron-right', '\f125');
+@include icon('pin', '\f3a3');
+@include icon('wifi', '\f25c');
+@include icon('eye', '\f133');
+@include icon('ios-arrow-thin-left', '\f3d5');
+@include icon('ios-arrow-thin-right', '\f3d6');
+@include icon('arrow-up-b', '\f10d');
+@include icon('arrow-down-b', '\f104');
+@include icon('android-locate', '\f2e9');
+@include icon('android-close', '\f2d7');
+@include icon('android-lock', '\f392');
+@include icon('ios-copy', '\f41c');
+@include icon('location', '\f456');
+@include icon('android-remove', '\f2f4');
+@include icon('ios-person', '\f47e');
+@include icon('layer', '\f229');