Switched to scss

source/_assets/sass/global-colors.sass

@@ -1,6 +0,0 @@
-//Some Basic colors
-$g_white: #FFFFFF
-$g_black: #000000
-$g_blue: #0000ff
-$g_green: #00ff00
-$g_red: #ff0000

source/_assets/sass/global-colors.scss

@@ -0,0 +1,6 @@
+//Some Basic colors
+$g_white: #FFFFFF;
+$g_black: #000000;
+$g_blue: #0000ff;
+$g_green: #00ff00;
+$g_red: #ff0000;

source/_assets/sass/main.sass

@@ -1,64 +0,0 @@
-// Colors
-@import "global-colors"
-$gradient1: #c7a25c
-$gradient2: #ff9601
-$gradient3: #980d0d
-
-body
-  margin: 0
-  padding: 0
-  display: flex
-  justify-content: center
-  background-image: linear-gradient(165deg, $gradient1 0%, $gradient2 43%, $gradient3 100%)
-  min-height: 100vh
-  font-family: monospace
-
-.mainContainer
-  margin-top: 3rem
-  width: 95%
-  display: flex
-  flex-direction: column
-  align-items: center
-
-  h1
-    text-align: center
-    font-weight: 800
-    font-size: 1.5rem
-    color: $g_white
-
-  img
-    height: 8rem
-    width: 8rem
-    border-radius: 50%
-    object-fit: cover
-
-
-.linkBox
-  display: flex
-  flex-direction: column
-  width: 750px
-  max-width: 90%
-  align-items: center
-
-  a
-    $height: 3rem
-    $transitionDuration: 0.25s
-    margin-top: 0.5rem
-    margin-bottom: 0.5rem
-    width: 100%
-    height: $height
-    line-height: $height
-    text-align: center
-    border-style: solid
-    border-color: $g_white
-    border-width: 4px
-    color: $g_white
-    text-decoration: none
-    font-size: 1rem
-    font-weight: 600
-    transition: background-color $transitionDuration ease-in-out, color $transitionDuration ease-in-out
-    &:hover
-      background-color: $g_white
-      color: $gradient2
-
-//@TODO Add colors for different Platforms

source/_assets/sass/main.scss

@@ -0,0 +1,69 @@
+// Colors
+@import "global-colors";
+$gradient1: #c7a25c;
+$gradient2: #ff9601;
+$gradient3: #980d0d;
+
+body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  background-image: linear-gradient(165deg, $gradient1 0%, $gradient2 43%, $gradient3 100%);
+  min-height: 100vh;
+  font-family: monospace;
+}
+
+.mainContainer {
+  margin-top: 3rem;
+  width: 95%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+  h1 {
+    text-align: center;
+    font-weight: 800;
+    font-size: 1.5rem;
+    color: $g_white;
+  }
+
+  img {
+    height: 8rem;
+    width: 8rem;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+.linkBox {
+  display: flex;
+  flex-direction: column;
+  width: 750px;
+  max-width: 90%;
+  align-items: center;
+}
+  a {
+    $height: 3rem;
+    $transitionDuration: 0.25s;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    width: 100%;
+    height: $height;
+    line-height: $height;
+    text-align: center;
+    border-style: solid;
+    border-color: $g_white;
+    border-width: 4px;
+    color: $g_white;
+    text-decoration: none;
+    font-size: 1rem;
+    font-weight: 600;
+    transition: background-color $transitionDuration ease-in-out, color $transitionDuration ease-in-out;
+
+    &:hover {
+      background-color: $g_white;
+      color: $gradient2;
+    }
+  }
+//@TODO Add colors for different Platforms

webpack.mix.js

@@ -5,7 +5,7 @@ mix.disableSuccessNotifications();
 mix.setPublicPath('source/assets/build');
 
 mix.jigsaw()
-    .sass('source/_assets/sass/main.sass', 'css')
+    .sass('source/_assets/sass/main.scss', 'css')
     .options({
         processCssUrls: false,
     })