Use each for the pattern color system

src/styles/scss/_gjs_variables.scss

@@ -14,7 +14,11 @@ $cv-prefix:         $app-prefix + 'cv-' !default;
 $clm-prefix:        $app-prefix + 'clm-' !default;
 $trt-prefix:        $app-prefix + 'trt-' !default;
 
-/* New Pattern Color System - */
+/*
+  New Pattern Color System
+  With this should be easier to overwrite colors
+  not only in SCSS but even CSS
+*/
 $primaryColor:      #444 !default;
 $secondaryColor:    #ddd !default;
 $tertiaryColor:     #804f7b !default;

src/styles/scss/main.scss

@@ -51,50 +51,18 @@
 $prefix: $app-prefix;
 
 .#{$prefix} {
-  &one {
-    &-bg {
-      background-color: $primaryColor;
-    }
-
-    &-color {
-      color: $primaryColor;
-    }
-  }
-
-  &two {
-    &-bg {
-      background-color: $secondaryColor;
-    }
-
-    &-color {
-      color: $secondaryColor;
-    }
-  }
-
-  &three {
-    &-bg {
-      background-color: $tertiaryColor;
-    }
-
-    &-color {
-      color: $tertiaryColor;
-
-      &-h:hover {
-        color: $tertiaryColor;
+  @each $cnum, $ccol in (one, $primaryColor), (two, $secondaryColor), (three, $tertiaryColor), (four, $quaternaryColor) {
+    &#{$cnum} {
+      &-bg {
+        background-color: $ccol;
       }
-    }
-  }
-
-  &four {
-    &-bg {
-      background-color: $quaternaryColor;
-    }
 
-    &-color {
-      color: $quaternaryColor;
+      &-color {
+        color: $ccol;
 
-      &-h:hover {
-        color: $quaternaryColor;
+        &-h:hover {
+          color: $ccol;
+        }
       }
     }
   }