Style years, use SCSS variables

css/countdown.scss

@@ -21,39 +21,46 @@
   text-align: center;
 }
 
-.days {
-	font-size: 8vw;
-	color: mediumpurple;
-	stroke: mediumpurple;
-}
-
-.hours {
-	font-size: 6vw;
-	color: lawngreen;
-	stroke: lawngreen;
-}
-
-.minutes {
-	font-size: 4vw;
-	color: gold;
-	stroke: gold;
-}
-
-.seconds {
-	color: silver;
-	stroke: silver;
-}
-
-#days {
-	font-size: 8vw;
-}
-
-#hours {
-	font-size: 6vw;
-}
-
-#minutes {
-	font-size: 4vw;
+$fields: (
+  years: (
+    color: chocolate,
+    size: 8vw,
+  stroke-width 1.6%:
+  ),
+  days: (
+    color: mediumpurple,
+    size: 6vw,
+  stroke-width 1.2%:
+  ),
+  hours: (
+    color: lawngreen,
+    size: 4vw,
+  stroke-width 0.8%:
+  ),
+  minutes: (
+    color: gold,
+    size: 2vw,
+  stroke-width 0.6%:
+  ),
+  seconds: (
+    color: silver,
+    size: initial,
+  stroke-width 0.4%:
+  ),
+);
+
+@each $field, $value in $fields {
+  .#{$field} {
+    font-size: map-get($value, "size");
+    color: map-get($value, "color");
+    stroke: map-get($value, "color");
+  }
+  ##{$field} {
+    font-size: map-get($value, "size");
+  }
+  svg circle.#{$field} {
+    stroke-width: map-get($value, "stroke-width");
+  }
 }
 
 svg {
@@ -70,26 +77,6 @@ svg circle {
   fill: none;
 }
 
-svg circle.years {
-	stroke-width: 1.6%;
-}
-
-svg circle.days {
-	stroke-width: 1.2%;
-}
-
-svg circle.hours {
-	stroke-width: 0.8%;
-}
-
-svg circle.minutes {
-	stroke-width: 0.6%;
-}
-
-svg circle.seconds {
-	stroke-width: 0.4%;
-}
-
 @media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
   #main section {
     width: auto;