Replace sass misc variables with css custom variables

JoelCDL · JoelCDL · commit 92c9fc5eae5f · 2023-01-03T15:04:49.000-08:00
diff --git a/scss/_body.scss b/scss/_body.scss
@@ -5,7 +5,7 @@ body {
   padding-inline: var(--space3);
   font-family: 'Source Sans', Arial, sans-serif;
   font-weight: 400;
-  line-height: $line-height0;
+  line-height: var(--line-height0);
 
   @include screen1 {
     max-width: 1400px;
diff --git a/scss/_button.scss b/scss/_button.scss
@@ -59,7 +59,7 @@
   @extend %o-button;
   gap: var(--space2);
   border: 2px solid rgb(var(--color-white));
-  border-radius: $round-corner;
+  border-radius: 3px;
   background-color: rgb(var(--color-blue));
   color: rgb(var(--color-white));
 
diff --git a/scss/_categories.scss b/scss/_categories.scss
@@ -1,5 +1,7 @@
 // ***** Categories Component ***** //
 
+// The --details-summary-left-space variable used below is defined in _variables.scss and also used in _details.scss to align the disclosure widget arrows and list items.
+
 .c-categories {
   @include u-reset-list-styles;
 
@@ -26,12 +28,12 @@
   }
 
   li li {
-    padding-inline-start: $details-summary-left-space * 2;
+    padding-inline-start: calc(var(--details-summary-left-space) * 2);
   }
 
   > li > a {
     display: block;
-    margin-inline-start: $details-summary-left-space;
+    margin-inline-start: var(--details-summary-left-space);
   }
 
   details {
diff --git a/scss/_details.scss b/scss/_details.scss
@@ -1,6 +1,6 @@
 // ***** Details Object ***** //
 
-// $details-summary-left-space variable is defined in _variables and used in categories component to align the disclosure widget arrows and list items.
+// The --details-summary-left-space variable used below is defined in _variables.scss and also used in _categories.scss to align the disclosure widget arrows and list items.
 
 details {
   margin-bottom: var(--space2);
@@ -13,9 +13,9 @@ details {
     &::before {
       content: '';
       flex: none;
-      block-size: calc($details-summary-left-space / 1.5);
-      inline-size: calc($details-summary-left-space / 1.5);
-      margin-inline: calc($details-summary-left-space / 6);
+      block-size: calc(var(--details-summary-left-space) / 1.5);
+      inline-size: calc(var(--details-summary-left-space) / 1.5);
+      margin-inline: calc(var(--details-summary-left-space) / 6);
       background-color: rgb(var(--color-blue));
       mask-repeat: no-repeat;
       mask-size: 0.9rem;
@@ -34,7 +34,7 @@ details {
     summary {
 
       &::before {
-        margin-inline: 0 calc($details-summary-left-space / 3);
+        margin-inline: 0 calc(var(--details-summary-left-space) / 3);
         mask-size: 1.4rem;
         mask-image: url('data-url:../icons/caret-down.svg');
       }
diff --git a/scss/_figure.scss b/scss/_figure.scss
@@ -17,7 +17,7 @@ figure {
     padding-left: 0.5em;
     font-size: 0.9em;
     font-style: italic;
-    line-height: $line-height1;
+    line-height: var(--line-height1);
   }
 
 }
diff --git a/scss/_headernav.scss b/scss/_headernav.scss
@@ -73,7 +73,7 @@
     border-bottom: 1px solid rgb(var(--color-gray));
     border-left: 1px solid rgb(var(--color-gray));
     background-color: rgb(var(--color-light-gray));
-    box-shadow: $box-shadow;
+    box-shadow: 3px 3px 3px rgb(var(--color-gray));
   }
 
   // Panel columns (no columns, by default). These are set via 'columns-[#]' classes defined in the top-level menu items within WP Menus:
diff --git a/scss/_home.scss b/scss/_home.scss
@@ -39,7 +39,7 @@
     'servicebox meet'
     'newsreel social'
     'footer footer'
-    / 1fr $sidebar-width;
+    / 1fr var(--sidebar-width);
   }
 
   // This class used only to highlight the grid in layout4.hbs:
diff --git a/scss/_layout2.scss b/scss/_layout2.scss
@@ -21,7 +21,7 @@
       'layout2c layout2d' 1fr
       '........ layout2e'
       'layout2f layout2f'
-      / $sidebar-width 1fr;
+      / var(--sidebar-width) 1fr;
   }
 
   @media print {
diff --git a/scss/_layout3.scss b/scss/_layout3.scss
@@ -24,7 +24,7 @@
     'layout3c layout3e'
     '........ layout3f'
     'layout3g layout3g'
-    / $sidebar-width 1fr;
+    / var(--sidebar-width) 1fr;
   }
 
   @include screen3 {
@@ -34,7 +34,7 @@
     'layout3c layout3d layout3e' 1fr
     '........ layout3f ........'
     'layout3g layout3g layout3g'
-    / $sidebar-width 1fr $sidebar-width;
+    / var(--sidebar-width) 1fr var(--sidebar-width);
   }
 
   @media print {
diff --git a/scss/_layout4.scss b/scss/_layout4.scss
@@ -21,7 +21,7 @@
       'layout4c layout4d'
       'layout4c layout4e' 1fr
       'layout4f layout4f'
-      / 1fr $sidebar-width;
+      / 1fr var(--sidebar-width);
   }
 
   @media print {
diff --git a/scss/_list.scss b/scss/_list.scss
@@ -1,11 +1,9 @@
 // ***** List Objects ***** //
 
-$list-indentation: 30px;
-
 %o-list {
   margin-top: var(--space2);
   margin-bottom: var(--space2);
-  line-height: $line-height1;
+  line-height: var(--line-height1);
 }
 
 // List items:
@@ -16,7 +14,7 @@ li {
 
   // nested lists:
   li {
-    padding-left: $list-indentation;
+    padding-left: var(--list-indentation);
   }
 
 }
@@ -32,7 +30,7 @@ ul {
 
   // WP inline style 'list-style-type' equal to circle, disc, or square (read notes in list.config.js):
   &[style^='list-style-type:'] {
-    padding-left: $list-indentation;
+    padding-left: var(--list-indentation);
 
     li {
       padding-left: 0;
@@ -46,7 +44,7 @@ ul {
 
 ol {
   @extend %o-list;
-  padding-left: $list-indentation;
+  padding-left: var(--list-indentation);
 }
 
 // Description lists:
@@ -63,5 +61,5 @@ dt {
 
 dd {
   margin-bottom: var(--space2);
-  margin-left: $list-indentation;
+  margin-left: var(--list-indentation);
 }
diff --git a/scss/_meet.scss b/scss/_meet.scss
@@ -17,7 +17,7 @@
     justify-content: space-between;
     padding: var(--space2);
     color: rgb(var(--color-white));
-    line-height: $line-height1;
+    line-height: var(--line-height1);
     text-align: left;
 
     a {
diff --git a/scss/_paragraph.scss b/scss/_paragraph.scss
@@ -3,5 +3,5 @@
 p {
   margin-top: var(--space2);
   margin-bottom: var(--space2);
-  line-height: $line-height1;
+  line-height: var(--line-height1);
 }
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -63,7 +63,7 @@ $test3: #080 solid 1px; // green
   padding-right: 0;
   padding-left: 0;
   list-style-type: none;
-  line-height: $line-height0;
+  line-height: var(--line-height0);
 
   li {
     margin-top: 0;
@@ -126,7 +126,7 @@ $test3: #080 solid 1px; // green
   figcaption {
     padding: 0;
     font-style: normal;
-    line-height: $line-height0;
+    line-height: var(--line-height0);
   }
 
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -27,14 +27,12 @@
   --space2: calc(var(--space1) * 2);
   --space3: calc(var(--space2) * 2);
   --space4: calc(var(--space2) + var(--space3));
-}
 
-// General
+  // Misc:
 
-$box-shadow: 3px 3px 3px rgb(var(--color-gray));
-$details-summary-left-space: 1.5rem;
-$line-height0: 1.1;
-$line-height1: 1.3;
-$link-icon-padding: 1.3rem;
-$round-corner: 3px;
-$sidebar-width: 20%;
+  --details-summary-left-space: 1.5rem;
+  --line-height0: 1.1;
+  --line-height1: 1.3;
+  --list-indentation: 30px;
+  --sidebar-width: 20%;
+}
diff --git a/scss/_well.scss b/scss/_well.scss
@@ -74,7 +74,7 @@
   a {
     display: block;
     color: rgb(var(--color-light-blue));
-    line-height: $line-height0;
+    line-height: var(--line-height0);
     text-decoration: none;
 
     &:focus,

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`// *** Categories Component *** //`
`2`	`2`
	`3`	`+// The --details-summary-left-space variable used below is defined in _variables.scss and also used in _details.scss to align the disclosure widget arrows and list items.`
	`4`	`+`
`3`	`5`	`.c-categories {`
`4`	`6`	`@include u-reset-list-styles;`
`5`	`7`
`@@ -26,12 +28,12 @@`
`26`	`28`	`}`
`27`	`29`
`28`	`30`	`li li {`
`29`		`- padding-inline-start: $details-summary-left-space * 2;`
	`31`	`+ padding-inline-start: calc(var(--details-summary-left-space) * 2);`
`30`	`32`	`}`
`31`	`33`
`32`	`34`	`> li > a {`
`33`	`35`	`display: block;`
`34`		`- margin-inline-start: $details-summary-left-space;`
	`36`	`+ margin-inline-start: var(--details-summary-left-space);`
`35`	`37`	`}`
`36`	`38`
`37`	`39`	`details {`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ figure {`
`17`	`17`	`padding-left: 0.5em;`
`18`	`18`	`font-size: 0.9em;`
`19`	`19`	`font-style: italic;`
`20`		`- line-height: $line-height1;`
	`20`	`+ line-height: var(--line-height1);`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@`
`73`	`73`	`border-bottom: 1px solid rgb(var(--color-gray));`
`74`	`74`	`border-left: 1px solid rgb(var(--color-gray));`
`75`	`75`	`background-color: rgb(var(--color-light-gray));`
`76`		`- box-shadow: $box-shadow;`
	`76`	`+ box-shadow: 3px 3px 3px rgb(var(--color-gray));`
`77`	`77`	`}`
`78`	`78`
`79`	`79`	`// Panel columns (no columns, by default). These are set via 'columns-[#]' classes defined in the top-level menu items within WP Menus:`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@`
`39`	`39`	`'servicebox meet'`
`40`	`40`	`'newsreel social'`
`41`	`41`	`'footer footer'`
`42`		`- / 1fr $sidebar-width;`
	`42`	`+ / 1fr var(--sidebar-width);`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`// This class used only to highlight the grid in layout4.hbs:`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`'layout2c layout2d' 1fr`
`22`	`22`	`'........ layout2e'`
`23`	`23`	`'layout2f layout2f'`
`24`		`- / $sidebar-width 1fr;`
	`24`	`+ / var(--sidebar-width) 1fr;`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`@media print {`