From 841792726447bcc19fabc710314cfb81e31d5028 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 22 Sep 2023 03:27:20 +0800
Subject: [PATCH] refactor(scss): replace `#{$var}` with `$var`

This change stops forward compatibility with `jekyll-sass-converter-2.x`
---
 _sass/addon/commons.scss   | 23 ++++++++++-------------
 _sass/addon/variables.scss |  2 ++
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index d405d6c..7439330 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -693,7 +693,6 @@ mjx-container {
 /* --- sidebar layout --- */
 
 $sidebar-display: 'sidebar-display';
-$btn-gap: 0.8rem; // for the bottom icons
 $btn-border-width: 3px;
 $btn-mb: 0.5rem;
 
@@ -862,7 +861,7 @@ $btn-mb: 0.5rem;
       @extend %clickable-transition;
 
       &:not(:last-child) {
-        margin-right: $btn-gap;
+        margin-right: $sb-btn-gap;
       }
     }
 
@@ -881,7 +880,7 @@ $btn-mb: 0.5rem;
 
     .icon-border {
       @extend %no-cursor;
-      @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
+      @include ml-mr(calc(($sb-btn-gap - $btn-border-width) / 2));
 
       background-color: var(--sidebar-btn-color);
       content: '';
@@ -1301,7 +1300,7 @@ search {
     }
 
     #main-wrapper {
-      transform: translateX(#{$sidebar-width});
+      transform: translateX($sidebar-width);
     }
 
     #back-to-top {
@@ -1312,8 +1311,8 @@ search {
   #sidebar {
     @include slide;
 
-    transform: translateX(-#{$sidebar-width}); /* hide */
-    -webkit-transform: translateX(-#{$sidebar-width});
+    transform: translateX(-$sidebar-width); /* hide */
+    -webkit-transform: translateX(-$sidebar-width);
   }
 
   #main-wrapper {
@@ -1488,7 +1487,7 @@ search {
 
 @media all and (min-width: 1400px) {
   #back-to-top {
-    right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
+    right: calc((100vw - $sidebar-width - 1140px) / 2 + 3rem);
   }
 }
 
@@ -1505,7 +1504,7 @@ search {
 
   search {
     margin-right: calc(
-      #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
+      $main-content-max-width / 4 - $search-max-width - 0.75rem
     );
   }
 
@@ -1522,15 +1521,13 @@ search {
 
   #back-to-top {
     right: calc(
-      (100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem
+      (100vw - $sidebar-width-large - $main-content-max-width) / 2 + 2rem
     );
   }
 
   #sidebar {
     width: $sidebar-width-large;
 
-    $icon-gap: 1rem; // for the bottom icons
-
     .profile-wrapper {
       margin-top: 3.5rem;
       margin-bottom: 2.5rem;
@@ -1548,11 +1545,11 @@ search {
       margin-bottom: 1.75rem;
 
       a:not(:last-child) {
-        margin-right: $icon-gap;
+        margin-right: $sb-btn-gap-lg;
       }
 
       .icon-border {
-        @include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
+        @include ml-mr(calc(($sb-btn-gap-lg - $btn-border-width) / 2));
       }
     }
   }
diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss
index 011976c..6bc4c6a 100644
--- a/_sass/addon/variables.scss
+++ b/_sass/addon/variables.scss
@@ -6,6 +6,8 @@
 
 $sidebar-width: 260px !default; /* the basic width */
 $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
+$sb-btn-gap: 0.8rem !default;
+$sb-btn-gap-lg: 1rem !default;
 
 /* other framework sizes */