Deprecate sass spacing mixin, use css variables --spacing-x instead.

assets/sass/_sass_variables.scss

@@ -1,4 +1,5 @@
 // Variables
+// These need to be sass variables since they are used in sass functions and mixins.
 // Override sass variables in "assets/sass/_extra.scss"
 
 // Base line height, unitless.
@@ -70,7 +71,7 @@ $max-content-width: 1111px;
 // The max page width. Defaults to max-content-width.
 // Setting this to a larger value than max-content-width allows
 // content with class "stretch" to stretch out to the page edge.
-// $max-page-width: 1111px;
+$max-page-width: $max-content-width;
 
 // Show horizontal grid to help with debugging typography.
 $debug: false;

assets/sass/_variables.scss

@@ -1,8 +1,5 @@
-$max-page-width: $max-content-width !default;
-
 :root {
   // Convert sass variables to css variables.
-  // These need to be sass variables sincethey are used in sass functions and mixins.
 
   @each $name, $size in $font-size {
     --fs-#{$name}: #{$size};
@@ -72,13 +69,22 @@ $max-page-width: $max-content-width !default;
   --ff-monospace: var(--ui-monospace);
 
   // Font weights.
-  --fw-headings:   700;
+  --fw-headings: 700;
-  --fw-bolder:     900;
+  --fw-bolder: 900;
-  --fw-bold:       700;
+  --fw-bold: 700;
-  --fw-medium:     500;
+  --fw-medium: 500;
-  --fw-normal:     400;
+  --fw-normal: 400;
-  --fw-light:      300;
+  --fw-light: 300;
-  --fw-lighter:    200;
+  --fw-lighter: 200;
+
+  // Spacing.
+  --spacing-xxl: calc(3rem * var(--base-line-height));
+  --spacing-xl: calc(2rem * var(--base-line-height));
+  --spacing-l: calc(1.5rem * var(--base-line-height));
+  --spacing-m: calc(1rem * var(--base-line-height));
+  --spacing-s: calc(0.75rem * var(--base-line-height));
+  --spacing-xs: calc(0.5rem * var(--base-line-height));
+  --spacing-xxs: calc(0.3rem * var(--base-line-height));
 
   // Border radius.
   --radius-xl: 1rem;

assets/sass/base/forms/_forms.scss

@@ -2,13 +2,13 @@
 
 form {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
 }
 
 input,
 textarea,
 select {
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
 }
 
 label {

assets/sass/base/grouping/_grouping.scss

@@ -12,7 +12,7 @@
 
 blockquote {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
   // Nicer text wrap, e.g. no lone word on last line.
   text-wrap: pretty;
   // Also indent the quote on both sides.
@@ -28,7 +28,7 @@ ol,
 ul,
 menu {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
 }
 
 dt {
@@ -76,7 +76,7 @@ hr {
 
 p {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
   // Nicer text wrap, e.g. no lone word on last line.
   text-wrap: pretty;
 
@@ -90,7 +90,7 @@ p {
 
 pre {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
   font-family: var(--ff-monospace);
 }
 

assets/sass/base/headings/_headings.scss

@@ -15,7 +15,7 @@ h5,
 %h5,
 h6,
 %h6 {
-  @include margin-block(1 .33, 'em');
+  margin-block: 1.5em .5em;
   color: var(--color-headings);
   font-family: var(--ff-headings);
   font-weight: var(--fw-headings);
@@ -24,7 +24,7 @@ h6,
 
   // Smaller margin when a headeing is right after another heading.
   & + & {
-    @include margin-block-start(.5, 'em');
+    margin-block-start: .75em
   }
 
   // Set max text line width in main for readability.
@@ -36,7 +36,8 @@ h6,
 h1,
 %h1 {
   // h1 only on top of page so different margins.
-  @include margin-block(1 .5, 'rem');
+  margin-block-start: var(--spacing-m);
+  margin-block-end: var(--spacing-xs);
   font-size: var(--fs-xxl);
   letter-spacing: -.01em;
 }

assets/sass/base/images/_images.scss

@@ -31,7 +31,7 @@ img {
 
 figure {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
 
   &.image {
     figcaption {
@@ -81,6 +81,6 @@ figure {
 img {
   &.image {
     // Add vertical rhythm margins.
-    @include margin-block(0 1);
+    margin-block: 0 var(--spacing-m);
   }
 }

assets/sass/base/tables/_tables.scss

@@ -4,7 +4,7 @@
 
 table {
   // Add vertical rhythm margins.
-  @include margin-block(0 1);
+  margin-block: 0 var(--spacing-m);
   // Remove default spacing between table cells.
   border-collapse: collapse;
   // Prevent cramped-looking tables

assets/sass/components/box/_box.scss

@@ -20,8 +20,8 @@
 .box,
 %box {
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  margin-block: var(--spacing-m);
-  @include padding(.5);
+  padding: var(--spacing-xs);
   border: 5px solid var(--color-border);
 
   // Sass compiles this to the selector: .box__title, %box__title {}

assets/sass/components/cards/_cards.scss

@@ -6,12 +6,12 @@
 %cards {
   @extend %grid-group;
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  margin-block: var(--spacing-m);
 }
 
 .card,
 %card {
-  @include padding(.5);
+  padding: var(--spacing-xs);
   border: 1px solid var(--color-border);
 
   &--highlight {

assets/sass/components/divider/_divider.scss

@@ -5,12 +5,12 @@
 .divider,
 %divider {
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  margin-block: var(--spacing-m);
   border: 0;
   border-block-start: 1px solid var(--color-border);
 
   // If used as a container, add a top margin to the first child.
   > :first-child {
-    @include margin-top(1);
+    margin-block-start: var(--spacing-m);
   }
 }

assets/sass/components/language-selector/_language-selector.scss

@@ -5,6 +5,6 @@
 }
 
 .language-icon {
-  @include margin-inline-end(.5);
+  margin-inline-end: var(--spacing-xs);
   fill: var(--color-text);
 }

assets/sass/components/list-straight-left/_list-straight-left.scss

@@ -10,7 +10,7 @@
     display: table-row;
 
     &::before {
-      @include padding-inline-end(.5);
+      padding-inline-end: var(--spacing-xs);
       display: table-cell;
       content: '\2981';
       font-size: var(--fs-s);
@@ -29,7 +29,7 @@
     counter-increment: table-ol;
 
     &::before {
-      @include padding-inline-end(.5);
+      padding-inline-end: var(--spacing-xs);
       display: table-cell;
       content: counter(table-ol) '.';
       font-size: var(--fs-s);

assets/sass/components/pager/_pager.scss

@@ -9,7 +9,7 @@
   @extend %flex-inline;
   @extend %link-nav;
   // Add vertical rhythm margins.
-  @include margin-block(1);
+  margin-block: var(--spacing-m);
   justify-content: center;
 
   .page-item {