Refactor SCSS to use variables for color and responsive styles

Author: marcusoftnet

assets/style.scss

@@ -6,9 +6,9 @@
 //
 
 @use "../_sass/_reset";
-@use "../_sass/_variables" as *;
 @use "../_sass/_darcula";
 @use "../_sass/_svg-icons";
+@use "../_sass/_variables" as variables;
 // Syntax highlighting partial is still commented out
 //@use "../_sass/_highlights";
 
@@ -42,15 +42,15 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
   font-family: -system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: $darkerGray;
+  color: variables.$darkerGray;
   font-weight: bold;
 
   line-height: 1.7;
   margin: 1em 0 15px;
   padding: 0;
   text-align: center;
 
-  @include mobile {
+  @include variables.mobile {
     line-height: 1.4;
   }
 }
@@ -162,7 +162,7 @@ table tr td :last-child {
 span[data-pullquote] {
   display: block;
 
-  @include mobile {
+  @include variables.mobile {
     display: none;
   }
 }
@@ -180,11 +180,11 @@ span[data-pullquote]:before {
 }
 
 a {
-  color: $blue;
+  color: variables.$blue;
   text-decoration: none;
 	cursor: pointer;
   &:hover, &:active {
-    color: $blue;
+    color: variables.$blue;
   }
 }
 
@@ -266,17 +266,17 @@ p > img {
 
 .date {
   font-style: italic;
-  color: $gray;
+  color: variables.$gray;
 }
 
 // Specify the color of the selection
 ::-moz-selection {
-  color: $black;
-  background: $lightGray;
+  color: variables.$black;
+    background: variables.$lightGray;
 }
 ::selection {
-  color: $black;
-  background: $lightGray;
+  color: variables.$black;
+    background: variables.$lightGray;
 }
 
 // Nicolas Gallagher's micro clearfix hack
@@ -305,9 +305,9 @@ p > img {
 
 .masthead {
   padding: 20px 0;
-  border-bottom: 1px solid $lightGray;
+  border-bottom: 1px solid variables.$lightGray;
 
-  @include mobile {
+  @include variables.mobile {
     text-align: center;
   }
 }
@@ -318,7 +318,7 @@ p > img {
   height: 100px;
   margin-right: 15px;
 
-  @include mobile {
+  @include variables.mobile {
     float: none;
     display: block;
     margin: 0 auto;
@@ -335,7 +335,7 @@ p > img {
   float: left;
   margin-left: 38px;
 
-  @include mobile {
+  @include variables.mobile {
     float: none;
     display: block;
     margin: 0 auto;
@@ -344,36 +344,36 @@ p > img {
 
 .site-name {
   margin: 0;
-  color: $darkGray;
+  color: variables.$darkGray;
   cursor: pointer;
-  font-family: $helveticaNeue;
+  font-family: variables.$helveticaNeue;
   font-weight: 300;
   font-size: 28px;
   letter-spacing: 1px;
   text-align: left;
 
-  @include mobile {
+  @include variables.mobile {
     text-align: center;
   }
 }
 
 .site-description {
   margin: -5px 0 0 0;
-  color: $gray;
+  color: variables.$gray;
   font-size: 16px;
 
-  @include mobile {
+  @include variables.mobile {
     margin: 3px 0;
   }
 }
 
 nav {
   float: right;
   margin-top: 23px; // @TODO: Vertically middle align
-  font-family: $helveticaNeue;
+  font-family: variables.$helveticaNeue;
   font-size: 18px;
 
-  @include mobile {
+  @include variables.mobile {
     float: none;
     margin-top: 9px;
     display: block;
@@ -382,14 +382,14 @@ nav {
 
   a {
     margin-left: 20px;
-    color: $darkGray;
+    color: variables.$darkGray;
     text-align: right;
     font-weight: 300;
     letter-spacing: 1px;
 
-    @include mobile {
+    @include variables.mobile {
       margin: 0 10px;
-      color: $blue;
+      color: variables.$blue;
     }
   }
 }
@@ -400,7 +400,7 @@ nav {
 
 .posts > .post {
   padding-bottom: 2em;
-  border-bottom: 1px solid $lightGray;
+  border-bottom: 1px solid variables.$lightGray;
 }
 
 .posts > .post:last-child {
@@ -411,19 +411,19 @@ nav {
 .post {
   blockquote {
     margin: 1.8em .8em;
-    /*border-left: 2px solid $gray;*/
+    /*border-left: 2px solid variables.$gray;*/
     padding: 0.1em 1em;
-    color: $gray;
+    color: variables.$gray;
     font-size: 22px;
     font-style: italic;
     background-color: #ede1ff;
   }
 
   .you-may-like{
     margin: 1.8em .8em;
-    /*border-left: 2px solid $gray;*/
+    /*border-left: 2px solid variables.$gray;*/
     padding: 0.1em 1em;
-    color: $gray;
+    color: variables.$gray;
     font-size: 22px;
     font-style: italic;
     background-color: #ddffb5;;
@@ -453,7 +453,7 @@ nav {
   bottom: 0;
   width: 100%;
   height: 89px;
-  background-color: $lightGray;
+  background-color: variables.$lightGray;
 }
 
 footer {