fix sass differences

Author: mansona

app/styles/base/_forms.scss

@@ -1,7 +1,7 @@
 fieldset {
   background-color: lighten($base-border-color, 10%);
   border: $base-border;
-  margin: 0 0 $small-spacing;
+  margin: 0 0 var(--small-spacing);
   padding: $base-spacing;
 }
 
@@ -28,7 +28,7 @@ select {
 
 label {
   font-weight: 600;
-  margin-bottom: calc($small-spacing / 2);
+  margin-bottom: calc(--sass-small-spacing / 2);
 
   &.required::after {
     content: "*";
@@ -72,10 +72,10 @@ textarea {
 input[type="checkbox"],
 input[type="radio"] {
   display: inline;
-  margin-right: calc($small-spacing / 2);
+  margin-right: calc(--small-spacing / 2);
 }
 
 input[type="file"] {
-  padding-bottom: $small-spacing;
+  padding-bottom: var(--small-spacing);
   width: 100%;
 }

app/styles/base/_lists.scss

@@ -6,7 +6,7 @@ ol {
 
   &%default-ul {
     list-style-type: disc;
-    margin-bottom: $small-spacing;
+    margin-bottom: var(--small-spacing);
     padding-left: $base-spacing;
 
     @media (max-width: $mobile-portrait-screen){
@@ -21,12 +21,12 @@ ol {
     > li {
       counter-increment: customlistcounter;
       clear: both;
-      padding: $small-spacing 0 $small-spacing 2em;
+      padding: var(--small-spacing) 0 var(--small-spacing) 2em;
       position: relative;
       z-index: 1;
 
       &::before {
-        @include position(absolute, ($small-spacing + 0.5em) null null 0);
+        @include position(absolute, (var(--small-spacing) + 0.5em) null null 0);
         @include size(2em);
         content: counter(customlistcounter) " ";
         border: 2px solid $base-border-color;
@@ -47,11 +47,11 @@ ol {
 }
 
 dl {
-  margin-bottom: $small-spacing;
+  margin-bottom: var(--small-spacing);
 
   dt {
     font-weight: bold;
-    margin-top: $small-spacing;
+    margin-top: var(--small-spacing);
   }
 
   dd {

app/styles/base/_tables.scss

@@ -1,7 +1,7 @@
 table {
   font-feature-settings: "kern", "liga", "tnum";
   border-collapse: collapse;
-  margin: $small-spacing 0;
+  margin: var(--small-spacing) 0;
   table-layout: fixed;
   width: 100%;
   position: relative;
@@ -23,7 +23,7 @@ td {
 }
 
 th, td {
-  padding: $small-spacing;
+  padding: var(--small-spacing);
 }
 
 tr,

app/styles/base/_typography.scss

@@ -20,7 +20,7 @@ h6 {
   font-family: $heading-font-family;
   font-size: $base-font-size;
   line-height: $heading-line-height;
-  margin: 0 0 $small-spacing;
+  margin: 0 0 var(--small-spacing);
   font-weight: bold;
 
   code {
@@ -43,7 +43,7 @@ h2 {
 }
 
 p {
-  margin: 1.5em 0 $small-spacing;
+  margin: 1.5em 0 var(--small-spacing);
   line-height: 1.5em;
 }
 

app/styles/base/_variables.scss

@@ -13,9 +13,14 @@ $large-font-size: 1.5rem;
 $base-line-height: 1.5;
 $heading-line-height: 1.2;
 
+:root {
+  --base-line-height: 1.5;
+  --base-spacing: calc(var(--base-line-height) * 1em);
+  --small-spacing: calc(var(--base-spacing) / 2);
+}
+
 // Spacing
 $base-spacing: $base-line-height * 1em;
-$small-spacing: calc($base-spacing / 2);
 $large-spacing: $base-spacing * 2;
 $top-spacing: $base-spacing * 3.333; // 80px
 

app/styles/components/_article.scss

@@ -1,8 +1,8 @@
 article {
-  padding: $large-spacing $small-spacing;
+  padding: $large-spacing var(--small-spacing);
 
   @media (min-width: $medium-screen){
-    padding: $small-spacing;
+    padding: var(--small-spacing);
   }
 
   .edit-page {

app/styles/components/_class-field-desc.scss

@@ -1,5 +1,5 @@
 .chapter li {
-  margin: $small-spacing 0;
+  margin: var(--small-spacing) 0;
 
   @media (max-width: $mobile-portrait-screen) {
     margin: 0;

app/styles/components/_highlight.scss

@@ -5,7 +5,7 @@
   font-family: $monospace-font-family;
   font-size: 0.8em;
   line-height: 1.5em;
-  margin: $small-spacing 0 $large-spacing;
+  margin: var(--small-spacing) 0 $large-spacing;
   overflow: hidden;
   position: relative;
   font-variant-ligatures: none;
@@ -28,7 +28,7 @@
       }
     }
   }
-  
+
   .scroller {
     overflow: auto;
   }

app/styles/components/_sidebar.scss

@@ -3,7 +3,7 @@
   border-bottom: $base-border;
   position: relative;
   z-index: 1;
-  padding: $small-spacing 0;
+  padding: var(--small-spacing) 0;
 
   @include media($large-screen-up) {
     // fixed sidebar, full height
@@ -12,7 +12,7 @@
     width: 19em;
     border-bottom: 0;
     border-right: $base-border;
-    padding: $small-spacing $base-spacing $base-spacing * 1.5;
+    padding: var(--small-spacing) $base-spacing $base-spacing * 1.5;
 
     &::before {
       @include position(absolute, 0 0 0 -100vw);
@@ -123,14 +123,14 @@ ol.toc-level-1 {
   font-size: $base-font-size * 0.9;
   transition: max-height 0.5s ease;
 
-  &.selected{ 
+  &.selected{
     max-height: 3000px;
   }
 
   &:not(.selected) {
     overflow: hidden;
     max-height: 0;
-  } 
+  }
 
   li {
     border-left: 3px solid transparent;
@@ -148,6 +148,6 @@ ol.toc-level-1 {
   }
 
   a {
-    padding-left: $small-spacing;
+    padding-left: var(--small-spacing);
   }
 }