Put some SCSS magic numbers into constants

Author: mcecode

src/components/about/hero.astro

@@ -15,7 +15,7 @@ import avatarPng from "@assets/avatar.png";
     display: grid;
     grid-template-areas: "avatar" "title" "subtitle";
     gap: v-size(2);
-    margin-bottom: v-size(16);
+    margin-bottom: v-const("section_spacing.medium");
     text-align: center;
   }
   picture {
@@ -35,7 +35,7 @@ import avatarPng from "@assets/avatar.png";
     section {
       grid-template-areas: "avatar title" "avatar subtitle";
       column-gap: v-size(10);
-      margin-bottom: v-size(20);
+      margin-bottom: v-const("section_spacing.large");
       text-align: left;
     }
     h1 {

src/components/about/section.astro

@@ -10,14 +10,14 @@ const { title, description } = Astro.props;
 
 <style lang="scss">
   section {
-    margin-bottom: v-size(16);
+    margin-bottom: v-const("section_spacing.medium");
   }
 
   @include m-large {
     section {
       display: flex;
       gap: v-size(5);
-      margin-bottom: v-size(20);
+      margin-bottom: v-const("section_spacing.large");
     }
     h2 {
       flex: 1 0 40%;

src/components/post-item.astro

@@ -21,18 +21,18 @@ const { title, link, dateCreated, dateUpdated } = Astro.props;
 
 <style lang="scss">
   li {
-    margin-bottom: v-size(5);
+    margin-bottom: v-const("section_spacing.xsmall");
   }
   li:last-child {
-    margin-bottom: v-size(15);
+    margin-bottom: v-const("section_spacing.medium");
   }
   p:last-child {
     font-style: italic;
   }
 
   @include m-medium {
     li:last-child {
-      margin-bottom: v-size(20);
+      margin-bottom: v-const("section_spacing.large");
     }
   }
 </style>

src/components/projects/item-card.astro

@@ -27,11 +27,11 @@ if ((image.width / image.height).toFixed(2) !== "1.78") {
   li {
     display: grid;
     row-gap: v-size(2);
-    margin-bottom: v-size(10);
+    margin-bottom: v-const("section_spacing.small");
     text-align: center;
   }
   li:where(:last-child) {
-    margin-bottom: v-size(16);
+    margin-bottom: v-const("section_spacing.medium");
   }
   li:not(:last-child)::after {
     content: "";
@@ -51,7 +51,7 @@ if ((image.width / image.height).toFixed(2) !== "1.78") {
       grid-template-columns: 1fr 1fr;
       grid-template-rows: auto auto 1fr;
       column-gap: v-size(5);
-      margin-bottom: v-size(20);
+      margin-bottom: v-const("section_spacing.large");
       text-align: left;
     }
     li::after {

src/styles/header.scss

@@ -1,3 +1,7 @@
+// Variables
+
+$initialLogoMenuWidth: v-size(14);
+
 // No JS layout
 
 @include no-js {
@@ -6,7 +10,7 @@
     gap: v-size(2);
     justify-items: center;
     width: 100%;
-    margin: v-size(2) auto v-size(10);
+    margin: v-size(2) auto v-const("section_spacing.small");
   }
   .nav-list {
     display: flex;
@@ -47,8 +51,8 @@
     display: grid;
     gap: v-size(5);
     justify-items: center;
-    height: v-size(14);
-    margin-bottom: v-size(10);
+    height: $initialLogoMenuWidth;
+    margin-bottom: v-const("section_spacing.small");
     overflow: hidden;
   }
   .logo {
@@ -132,7 +136,7 @@
 
 .logo-svg,
 .menu-svg {
-  width: v-size(14);
+  width: $initialLogoMenuWidth;
 }
 .logo-svg {
   --svg-stroke-width: 6;
@@ -164,7 +168,7 @@
   }
 }
 
-// Mode groups
+// Mode groups opacity
 
 .mode-moon {
   opacity: 1;

src/styles/partials/_lib.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+@use "sass:string";
+
+@function deep-get($map, $key) {
+  $value: $map;
+
+  @each $part in string.split($key, ".") {
+    $value: map.get($value, $part);
+
+    @if $value == null {
+      @error "Unknown key '#{$part}'";
+    }
+  }
+
+  @return $value;
+}

src/styles/partials/_variables.scss

@@ -1,6 +1,8 @@
 @use "sass:list";
 @use "sass:map";
 
+@use "lib";
+
 // Colors
 
 @use "json:colors" as *;
@@ -46,3 +48,18 @@ $_units: (
 @function size($size, $unit: "rem") {
   @return list.nth($_sizes, $size) + map.get($_units, $unit);
 }
+
+// Constants
+
+$_consts: (
+  "section_spacing": (
+    "xsmall": size(5),
+    "small": size(10),
+    "medium": size(15),
+    "large": size(20)
+  )
+);
+
+@function const($const) {
+  @return lib.deep-get($_consts, $const);
+}