diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 5e8aceaa262..a817fe7f206 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -1,3 +1,8 @@
+@use '../colors/typography-dark';
+@use '../colors/typography-light';
+@use 'module';
+@use 'variables';
+
 /* The common styles */
 
 html {
@@ -6,22 +11,22 @@ html {
   @media (prefers-color-scheme: light) {
     &:not([data-mode]),
     &[data-mode='light'] {
-      @include light-scheme;
+      @include typography-light.light-scheme;
     }
 
     &[data-mode='dark'] {
-      @include dark-scheme;
+      @include typography-dark.dark-scheme;
     }
   }
 
   @media (prefers-color-scheme: dark) {
     &:not([data-mode]),
     &[data-mode='dark'] {
-      @include dark-scheme;
+      @include typography-dark.dark-scheme;
     }
 
     &[data-mode='light'] {
-      @include light-scheme;
+      @include typography-light.light-scheme;
     }
   }
 }
@@ -32,17 +37,17 @@ body {
     env(safe-area-inset-bottom) env(safe-area-inset-left);
   color: var(--text-color);
   -webkit-font-smoothing: antialiased;
-  font-family: $font-family-base;
+  font-family: variables.$font-family-base;
 }
 
 /* --- Typography --- */
 
 @for $i from 1 through 5 {
   h#{$i} {
-    @extend %heading;
+    @extend %heading !optional;
 
     @if $i > 1 {
-      @extend %anchor;
+      @extend %anchor !optional;
     }
 
     @if $i < 5 {
@@ -70,7 +75,7 @@ body {
 }
 
 a {
-  @extend %link-color;
+  @extend %link-color !optional;
 
   text-decoration: none;
 }
@@ -104,7 +109,7 @@ blockquote {
     padding: 1rem 1rem 1rem 3rem;
     color: var(--prompt-text-color);
 
-    @extend %rounded;
+    @extend %rounded !optional;
 
     &::before {
       text-align: center;
@@ -117,10 +122,10 @@ blockquote {
     }
   }
 
-  @include prompt('tip', '\f0eb', $fa-style: 'regular');
-  @include prompt('info', '\f06a', $rotate: 180);
-  @include prompt('warning', '\f06a');
-  @include prompt('danger', '\f071');
+  @include module.prompt('tip', '\f0eb', $fa-style: 'regular');
+  @include module.prompt('info', '\f06a', $rotate: 180);
+  @include module.prompt('warning', '\f06a');
+  @include module.prompt('danger', '\f071');
 }
 
 kbd {
@@ -134,7 +139,7 @@ kbd {
   padding-top: 0.1rem;
   color: var(--kbd-text-color);
   background-color: var(--kbd-bg-color);
-  border-radius: $radius-sm;
+  border-radius: variables.$radius-sm;
   border: solid 1px var(--kbd-wrap-color);
   box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
 }
@@ -146,21 +151,21 @@ hr {
 
 footer {
   background-color: var(--main-bg);
-  height: $footer-height;
+  height: variables.$footer-height;
   border-top: 1px solid var(--main-border-color);
 
-  @extend %text-xs;
+  @extend %text-xs !optional;
 
   a {
-    @extend %text-highlight;
+    @extend %text-highlight !optional;
 
     &:hover {
-      @extend %link-hover;
+      @extend %link-hover !optional;
     }
   }
 
   em {
-    @extend %text-highlight;
+    @extend %text-highlight !optional;
   }
 
   p {
@@ -173,7 +178,7 @@ footer {
 i {
   &.far,
   &.fas {
-    @extend %no-cursor;
+    @extend %no-cursor !optional;
   }
 }
 
@@ -210,7 +215,7 @@ i {
     font-family: inherit;
     line-height: inherit;
 
-    @include label(inherit);
+    @include module.label(inherit);
   }
 
   .post-tag {
@@ -231,10 +236,10 @@ i {
     color: inherit;
 
     &:hover {
-      @extend %link-hover;
+      @extend %link-hover !optional;
     }
 
-    @extend %no-bottom-border;
+    @extend %no-bottom-border !optional;
   }
 }
 
@@ -247,27 +252,27 @@ i {
       margin-bottom: 0.3rem;
     }
 
-    @extend %sup-fn-target;
+    @extend %sup-fn-target !optional;
 
     > p {
       margin-left: 0.25em;
 
-      @include mt-mb(0);
+      @include module.mt-mb(0);
     }
   }
 }
 
 .footnote {
   @at-root a#{&} {
-    @include ml-mr(1px);
-    @include pl-pr(2px);
+    @include module.ml-mr(1px);
+    @include module.pl-pr(2px);
 
     border-bottom-style: none !important;
   }
 }
 
 sup {
-  @extend %sup-fn-target;
+  @extend %sup-fn-target !optional;
 }
 
 .reversefootnote {
@@ -297,7 +302,7 @@ sup {
       border-bottom: solid 2px rgba(210, 215, 217, 0.75);
 
       th {
-        @extend %table-cell;
+        @extend %table-cell !optional;
       }
     }
 
@@ -314,7 +319,7 @@ sup {
         }
 
         td {
-          @extend %table-cell;
+          @extend %table-cell !optional;
         }
       }
     } /* tbody */
@@ -329,7 +334,7 @@ sup {
   height: 100%;
   overflow: hidden;
 
-  @extend %rounded;
+  @extend %rounded !optional;
 
   &:not(.no-bg) {
     background: var(--img-bg);
@@ -340,7 +345,7 @@ sup {
     -o-object-fit: cover;
     object-fit: cover;
 
-    @extend %rounded;
+    @extend %rounded !optional;
 
     @at-root #post-list & {
       width: 100%;
@@ -349,14 +354,14 @@ sup {
 }
 
 .post-preview {
-  @extend %rounded;
+  @extend %rounded !optional;
 
   border: 0;
   background: var(--card-bg);
   box-shadow: var(--card-shadow);
 
   &::before {
-    @extend %rounded;
+    @extend %rounded !optional;
 
     content: '';
     width: 100%;
@@ -384,7 +389,7 @@ main {
   p {
     > a.popup {
       &:not(.normal):not(.left):not(.right) {
-        @include align-center;
+        @include module.align-center;
       }
     }
   }
@@ -393,22 +398,22 @@ main {
   #tags,
   #archives {
     a:not(:hover) {
-      @extend %no-bottom-border;
+      @extend %no-bottom-border !optional;
     }
   }
 }
 
 .post-meta {
-  @extend %text-sm;
+  @extend %text-sm !optional;
 
   a {
     &:not([class]):hover {
-      @extend %link-hover;
+      @extend %link-hover !optional;
     }
   }
 
   em {
-    @extend %normal-font-style;
+    @extend %normal-font-style !optional;
   }
 }
 
@@ -419,18 +424,18 @@ main {
 
   a {
     &.popup {
-      @extend %no-cursor;
-      @extend %img-caption;
-      @include mt-mb(0.5rem);
+      @extend %no-cursor !optional;
+      @extend %img-caption !optional;
+      @include module.mt-mb(0.5rem);
 
       cursor: zoom-in;
     }
 
     &:not(.img-link) {
-      @extend %link-underline;
+      @extend %link-underline !optional;
 
       &:hover {
-        @extend %link-hover;
+        @extend %link-hover !optional;
       }
     }
   }
@@ -497,7 +502,7 @@ main {
 } /* .content */
 
 .tag:hover {
-  @extend %tag-hover;
+  @extend %tag-hover !optional;
 }
 
 .post-tag {
@@ -566,7 +571,7 @@ main {
   margin-bottom: 1rem;
   aspect-ratio: 16 / 9;
 
-  @extend %rounded;
+  @extend %rounded !optional;
 
   &.twitch {
     aspect-ratio: 310 / 189;
@@ -582,14 +587,14 @@ main {
     margin-bottom: 0;
   }
 
-  @extend %img-caption;
+  @extend %img-caption !optional;
 }
 
 .embed-audio {
   width: 100%;
   display: block;
 
-  @extend %img-caption;
+  @extend %img-caption !optional;
 }
 
 /* --- buttons --- */
@@ -680,14 +685,14 @@ $btn-border-width: 3px;
 $btn-mb: 0.5rem;
 
 #sidebar {
-  @include pl-pr(0);
+  @include module.pl-pr(0);
 
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   overflow-y: auto;
-  width: $sidebar-width;
+  width: variables.$sidebar-width;
   background: var(--sidebar-bg);
   border-right: 1px solid var(--sidebar-border-color);
 
@@ -707,7 +712,7 @@ $btn-mb: 0.5rem;
   }
 
   a {
-    @extend %sidebar-links;
+    @extend %sidebar-links !optional;
   }
 
   #avatar {
@@ -728,8 +733,8 @@ $btn-mb: 0.5rem;
   }
 
   .profile-wrapper {
-    @include mt-mb(2.5rem);
-    @extend %clickable-transition;
+    @include module.mt-mb(2.5rem);
+    @extend %clickable-transition !optional;
 
     padding-left: 2.5rem;
     padding-right: 1.25rem;
@@ -737,8 +742,8 @@ $btn-mb: 0.5rem;
   }
 
   .site-title {
-    @extend %clickable-transition;
-    @extend %sidebar-link-hover;
+    @extend %clickable-transition !optional;
+    @extend %sidebar-link-hover !optional;
 
     font-family: inherit;
     font-weight: 900;
@@ -769,10 +774,10 @@ $btn-mb: 0.5rem;
       opacity: 0.9;
       width: 100%;
 
-      @include pl-pr(1.5rem);
+      @include module.pl-pr(1.5rem);
 
       a.nav-link {
-        @include pt-pb(0.6rem);
+        @include module.pt-pb(0.6rem);
 
         display: flex;
         align-items: center;
@@ -841,12 +846,12 @@ $btn-mb: 0.5rem;
     }
 
     a {
-      @extend %button;
-      @extend %sidebar-link-hover;
-      @extend %clickable-transition;
+      @extend %button !optional;
+      @extend %sidebar-link-hover !optional;
+      @extend %clickable-transition !optional;
 
       &:not(:last-child) {
-        margin-right: $sb-btn-gap;
+        margin-right: variables.$sb-btn-gap;
       }
     }
 
@@ -855,14 +860,14 @@ $btn-mb: 0.5rem;
     }
 
     #mode-toggle {
-      @extend %button;
-      @extend %sidebar-links;
-      @extend %sidebar-link-hover;
+      @extend %button !optional;
+      @extend %sidebar-links !optional;
+      @extend %sidebar-link-hover !optional;
     }
 
     .icon-border {
-      @extend %no-cursor;
-      @include ml-mr(calc(($sb-btn-gap - $btn-border-width) / 2));
+      @extend %no-cursor !optional;
+      @include module.ml-mr(calc((variables.$sb-btn-gap - $btn-border-width) / 2));
 
       background-color: var(--sidebar-btn-color);
       content: '';
@@ -902,12 +907,12 @@ $btn-mb: 0.5rem;
 /* --- top-bar --- */
 
 #topbar-wrapper {
-  height: $topbar-height;
+  height: variables.$topbar-height;
   background-color: var(--topbar-bg);
 }
 
 #topbar {
-  @extend %btn-color;
+  @extend %btn-color !optional;
 
   #breadcrumb {
     font-size: 1rem;
@@ -915,7 +920,7 @@ $btn-mb: 0.5rem;
     padding-left: 0.5rem;
 
     a:hover {
-      @extend %link-hover;
+      @extend %link-hover !optional;
     }
 
     span {
@@ -930,43 +935,43 @@ $btn-mb: 0.5rem;
 } /* #topbar */
 
 ::-webkit-input-placeholder {
-  @include placeholder;
+  @include module.placeholder;
 }
 
 ::-moz-placeholder {
-  @include placeholder;
+  @include module.placeholder;
 }
 
 :-ms-input-placeholder {
-  @include placeholder;
+  @include module.placeholder;
 }
 
 ::-ms-input-placeholder {
-  @include placeholder;
+  @include module.placeholder;
 }
 
 ::placeholder {
-  @include placeholder;
+  @include module.placeholder;
 }
 
 :focus::-webkit-input-placeholder {
-  @include placeholder-focus;
+  @include module.placeholder-focus;
 }
 
 :focus::-moz-placeholder {
-  @include placeholder-focus;
+  @include module.placeholder-focus;
 }
 
 :focus:-ms-input-placeholder {
-  @include placeholder-focus;
+  @include module.placeholder-focus;
 }
 
 :focus::-ms-input-placeholder {
-  @include placeholder-focus;
+  @include module.placeholder-focus;
 }
 
 :focus::placeholder {
-  @include placeholder-focus;
+  @include module.placeholder-focus;
 }
 
 search {
@@ -995,7 +1000,7 @@ search {
   display: none;
   white-space: nowrap;
 
-  @extend %cursor-pointer;
+  @extend %cursor-pointer !optional;
 }
 
 #search-input {
@@ -1033,7 +1038,7 @@ search {
       padding-right: 0.2rem;
     }
 
-    @extend %link-color;
+    @extend %link-color !optional;
   }
 }
 
@@ -1045,12 +1050,12 @@ search {
     line-height: 1.5rem;
 
     &:hover {
-      @extend %link-hover;
+      @extend %link-hover !optional;
     }
 
-    @extend %link-color;
-    @extend %no-bottom-border;
-    @extend %heading;
+    @extend %link-color !optional;
+    @extend %no-bottom-border !optional;
+    @extend %heading !optional;
   }
 
   > article {
@@ -1068,7 +1073,7 @@ search {
     }
 
     > p {
-      @extend %text-ellipsis;
+      @extend %text-ellipsis !optional;
 
       white-space: break-spaces;
       display: -webkit-box;
@@ -1098,7 +1103,7 @@ search {
 #main-wrapper {
   position: relative;
 
-  @include pl-pr(0);
+  @include module.pl-pr(0);
 
   > .container {
     min-height: 100vh;
@@ -1108,7 +1113,7 @@ search {
 #topbar-wrapper.row,
 #main-wrapper > .container > .row,
 #search-result-wrapper > .row {
-  @include ml-mr(0);
+  @include module.ml-mr(0);
 }
 
 #tail-wrapper {
@@ -1126,12 +1131,12 @@ search {
   cursor: pointer;
   position: fixed;
   right: 1rem;
-  bottom: calc($footer-height-large - $back2top-size / 2);
+  bottom: calc(variables.$footer-height-large - variables.$back2top-size / 2);
   background: var(--button-bg);
   color: var(--btn-backtotop-color);
   padding: 0;
-  width: $back2top-size;
-  height: $back2top-size;
+  width: variables.$back2top-size;
+  height: variables.$back2top-size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
   transition: opacity 0.5s ease-in-out, transform 0.2s ease-out;
@@ -1142,7 +1147,7 @@ search {
   }
 
   i {
-    line-height: $back2top-size;
+    line-height: variables.$back2top-size;
     position: relative;
     bottom: 2px;
   }
@@ -1216,7 +1221,7 @@ search {
   main {
     .content {
       > blockquote[class^='prompt-'] {
-        @include ml-mr(-1rem);
+        @include module.ml-mr(-1rem);
 
         border-radius: 0;
         max-width: none;
@@ -1236,12 +1241,12 @@ search {
   }
 
   #topbar {
-    @extend %full-width;
+    @extend %full-width !optional;
   }
 
   #main-wrapper > .container {
-    @extend %full-width;
-    @include pl-pr(0);
+    @extend %full-width !optional;
+    @include module.pl-pr(0);
   }
 }
 
@@ -1260,7 +1265,7 @@ search {
   footer {
     @include slide;
 
-    height: $footer-height-large;
+    height: variables.$footer-height-large;
     padding: 1.5rem 0;
   }
 
@@ -1270,7 +1275,7 @@ search {
     }
 
     #main-wrapper {
-      transform: translateX($sidebar-width);
+      transform: translateX(variables.$sidebar-width);
     }
 
     #back-to-top {
@@ -1281,8 +1286,8 @@ search {
   #sidebar {
     @include slide;
 
-    transform: translateX(-$sidebar-width); /* hide */
-    -webkit-transform: translateX(-$sidebar-width);
+    transform: translateX(-(variables.$sidebar-width)); /* hide */
+    -webkit-transform: translateX(-(variables.$sidebar-width));
   }
 
   #main-wrapper {
@@ -1345,7 +1350,7 @@ search {
   }
 
   #main-wrapper {
-    margin-left: $sidebar-width;
+    margin-left: variables.$sidebar-width;
   }
 
   #sidebar {
@@ -1359,11 +1364,11 @@ search {
   }
 
   search {
-    max-width: $search-max-width;
+    max-width: variables.$search-max-width;
   }
 
   #search-result-wrapper {
-    max-width: $main-content-max-width;
+    max-width: variables.$main-content-max-width;
     justify-content: start !important;
   }
 
@@ -1380,7 +1385,7 @@ search {
   /* button 'back-to-Top' position */
   #back-to-top {
     right: 5%;
-    bottom: calc($footer-height - $back2top-size / 2);
+    bottom: calc(variables.$footer-height - variables.$back2top-size / 2);
   }
 
   #topbar-title {
@@ -1457,7 +1462,7 @@ search {
 
 @media all and (min-width: 1400px) {
   #back-to-top {
-    right: calc((100vw - $sidebar-width - 1140px) / 2 + 3rem);
+    right: calc((100vw - variables.$sidebar-width - 1140px) / 2 + 3rem);
   }
 }
 
@@ -1465,23 +1470,23 @@ search {
   $icon-gap: 1rem;
 
   #main-wrapper {
-    margin-left: $sidebar-width-large;
+    margin-left: variables.$sidebar-width-large;
   }
 
   #topbar-wrapper {
-    left: $sidebar-width-large;
+    left: variables.$sidebar-width-large;
   }
 
   search {
     margin-right: calc(
-      $main-content-max-width / 4 - $search-max-width - 0.75rem
+      variables.$main-content-max-width / 4 - variables.$search-max-width - 0.75rem
     );
   }
 
   #main-wrapper > .container {
-    max-width: $main-content-max-width;
+    max-width: variables.$main-content-max-width;
 
-    @include pl-pr(1.75rem, true);
+    @include module.pl-pr(1.75rem, true);
   }
 
   main.col-12,
@@ -1491,12 +1496,12 @@ search {
 
   #back-to-top {
     right: calc(
-      (100vw - $sidebar-width-large - $main-content-max-width) / 2 + 2rem
+      (100vw - variables.$sidebar-width-large - variables.$main-content-max-width) / 2 + 2rem
     );
   }
 
   #sidebar {
-    width: $sidebar-width-large;
+    width: variables.$sidebar-width-large;
 
     .profile-wrapper {
       margin-top: 3.5rem;
@@ -1506,7 +1511,7 @@ search {
 
     ul {
       li.nav-item {
-        @include pl-pr(2.75rem);
+        @include module.pl-pr(2.75rem);
       }
     }
 
@@ -1515,11 +1520,11 @@ search {
       margin-bottom: 1.75rem;
 
       a:not(:last-child) {
-        margin-right: $sb-btn-gap-lg;
+        margin-right: variables.$sb-btn-gap-lg;
       }
 
       .icon-border {
-        @include ml-mr(calc(($sb-btn-gap-lg - $btn-border-width) / 2));
+        @include module.ml-mr(calc((variables.$sb-btn-gap-lg - $btn-border-width) / 2));
       }
     }
   }
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index 1dfb735fd01..9e8cd36bbce 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -1,3 +1,5 @@
+@use 'variables';
+
 /*
 * Mainly scss modules, only imported to `assets/css/main.scss`
 */
@@ -7,7 +9,7 @@
 %heading {
   color: var(--heading-color);
   font-weight: 400;
-  font-family: $font-family-heading;
+  font-family: variables.$font-family-heading;
   scroll-margin-top: 3.5rem;
 }
 
@@ -82,7 +84,7 @@
 }
 
 %rounded {
-  border-radius: $radius-lg;
+  border-radius: variables.$radius-lg;
 }
 
 %img-caption {
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index 6bd7b406336..46618f49e69 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -2,29 +2,31 @@
 * The syntax highlight.
 */
 
-@import 'colors/syntax-light';
-@import 'colors/syntax-dark';
+@use '../colors/syntax-light';
+@use '../colors/syntax-dark';
+@use 'module';
+@use 'variables';
 
 html {
   @media (prefers-color-scheme: light) {
     &:not([data-mode]),
     &[data-mode='light'] {
-      @include light-syntax;
+      @include syntax-light.light-syntax;
     }
 
     &[data-mode='dark'] {
-      @include dark-syntax;
+      @include syntax-dark.dark-syntax;
     }
   }
 
   @media (prefers-color-scheme: dark) {
     &:not([data-mode]),
     &[data-mode='dark'] {
-      @include dark-syntax;
+      @include syntax-dark.dark-syntax;
     }
 
     &[data-mode='light'] {
-      @include light-syntax;
+      @include syntax-light.light-syntax;
     }
   }
 }
@@ -47,19 +49,19 @@ html {
 }
 
 .highlight {
-  @extend %rounded;
-  @extend %code-snippet-bg;
+  @extend %rounded !optional;
+  @extend %code-snippet-bg !optional;
 
   overflow: auto;
   padding-bottom: 0.75rem;
 
   @at-root figure#{&} {
-    @extend %code-snippet-bg;
+    @extend %code-snippet-bg !optional;
   }
 
   pre {
     margin-bottom: 0;
-    font-size: $code-font-size;
+    font-size: variables.$code-font-size;
     line-height: 1.4rem;
     word-wrap: normal; /* Fixed Safari overflow-x */
   }
@@ -101,10 +103,10 @@ code {
   color: var(--code-color);
 
   &.highlighter-rouge {
-    font-size: $code-font-size;
+    font-size: variables.$code-font-size;
     padding: 3px 5px;
     word-break: break-word;
-    border-radius: $radius-sm;
+    border-radius: variables.$radius-sm;
     background-color: var(--inline-code-bg);
   }
 
@@ -130,7 +132,7 @@ code {
 }
 
 td.rouge-code {
-  @extend %code-snippet-padding;
+  @extend %code-snippet-padding !optional;
 
   /*
     Prevent some browser extends from
@@ -144,13 +146,13 @@ td.rouge-code {
 }
 
 div[class^='language-'] {
-  @extend %rounded;
-  @extend %code-snippet-bg;
+  @extend %rounded !optional;
+  @extend %code-snippet-bg !optional;
 
   box-shadow: var(--language-border-color) 0 0 0 1px;
 
   .content > & {
-    @include ml-mr(-1rem);
+    @include module.ml-mr(-1rem);
 
     border-radius: 0;
   }
@@ -179,23 +181,23 @@ div {
 }
 
 .code-header {
-  @extend %no-cursor;
+  @extend %no-cursor !optional;
 
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: $code-header-height;
+  height: variables.$code-header-height;
   margin-left: 0.75rem;
   margin-right: 0.25rem;
 
   /* the label block */
   span {
-    line-height: $code-header-height;
+    line-height: variables.$code-header-height;
 
     /* label icon */
     i {
       font-size: 1rem;
-      width: $code-icon-width;
+      width: variables.$code-icon-width;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -219,12 +221,12 @@ div {
 
   /* clipboard */
   button {
-    @extend %cursor-pointer;
-    @extend %rounded;
+    @extend %cursor-pointer !optional;
+    @extend %rounded !optional;
 
     border: 1px solid transparent;
-    height: $code-header-height;
-    width: $code-header-height;
+    height: variables.$code-header-height;
+    width: variables.$code-header-height;
     padding: 0;
     background-color: inherit;
 
@@ -259,13 +261,13 @@ div {
 @media all and (min-width: 576px) {
   div[class^='language-'] {
     .content > & {
-      @include ml-mr(0);
+      @include module.ml-mr(0);
 
-      border-radius: $radius-lg;
+      border-radius: variables.$radius-lg;
     }
 
     .code-header {
-      @include ml-mr(0);
+      @include module.ml-mr(0);
 
       $dot-margin: 1rem;
 
@@ -273,19 +275,19 @@ div {
         content: '';
         display: inline-block;
         margin-left: $dot-margin;
-        width: $code-dot-size;
-        height: $code-dot-size;
+        width: variables.$code-dot-size;
+        height: variables.$code-dot-size;
         border-radius: 50%;
         background-color: var(--code-header-muted-color);
-        box-shadow: ($code-dot-size + $code-dot-gap) 0 0
+        box-shadow: (variables.$code-dot-size + variables.$code-dot-gap) 0 0
             var(--code-header-muted-color),
-          ($code-dot-size + $code-dot-gap) * 2 0 0
+          (variables.$code-dot-size + variables.$code-dot-gap) * 2 0 0
             var(--code-header-muted-color);
       }
 
       span {
         // center the text of label
-        margin-left: calc(($dot-margin + $code-dot-size) / 2 * -1);
+        margin-left: calc(($dot-margin + variables.$code-dot-size) / 2 * -1);
       }
     }
   }
diff --git a/_sass/layout/archives.scss b/_sass/layout/archives.scss
index fd1979b8f91..2edb6f89eb7 100644
--- a/_sass/layout/archives.scss
+++ b/_sass/layout/archives.scss
@@ -23,7 +23,7 @@
     margin-left: -$timeline-width;
 
     &::before {
-      @extend %timeline;
+      @extend %timeline !optional;
 
       height: 72px;
       left: 79px;
@@ -31,7 +31,7 @@
     }
 
     &:first-child::before {
-      @extend %timeline;
+      @extend %timeline !optional;
 
       height: 32px;
       top: 24px;
@@ -59,7 +59,7 @@
       font-size: 1.1rem;
       line-height: 3rem;
 
-      @extend %text-ellipsis;
+      @extend %text-ellipsis !optional;
 
       &:nth-child(odd) {
         background-color: var(--main-bg, #ffffff);
@@ -74,7 +74,7 @@
       }
 
       &::before {
-        @extend %timeline;
+        @extend %timeline !optional;
 
         top: 0;
         left: 77px;
diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss
index f12b9633682..dd9bab61163 100644
--- a/_sass/layout/categories.scss
+++ b/_sass/layout/categories.scss
@@ -1,3 +1,5 @@
+@use '../addon/variables';
+
 /*
   Style for Tab Categories
 */
@@ -12,11 +14,11 @@
 
   &.card,
   .list-group {
-    @extend %rounded;
+    @extend %rounded !optional;
   }
 
   .card-header {
-    $radius: calc($radius-lg - 1px);
+    $radius: calc(variables.$radius-lg - 1px);
 
     padding: 0.75rem;
     border-radius: $radius;
@@ -29,7 +31,7 @@
   }
 
   i {
-    @extend %category-icon-color;
+    @extend %category-icon-color !optional;
 
     font-size: 86%; /* fontawesome icons */
   }
diff --git a/_sass/layout/category-tag.scss b/_sass/layout/category-tag.scss
index fe7d99cec25..2b5fb851bd3 100644
--- a/_sass/layout/category-tag.scss
+++ b/_sass/layout/category-tag.scss
@@ -1,3 +1,5 @@
+@use '../addon/module';
+
 /*
   Style for page Category and Tag
 */
@@ -28,7 +30,7 @@
 
     /* post's title */
     > a {
-      @extend %no-bottom-border;
+      @extend %no-bottom-border !optional;
 
       font-size: 1.1rem;
     }
@@ -48,7 +50,7 @@
 #page-tag,
 #access-lastmod {
   a:hover {
-    @extend %link-hover;
+    @extend %link-hover !optional;
 
     margin-bottom: -1px; /* Avoid jumping */
   }
@@ -63,7 +65,7 @@
       }
 
       > a {
-        @include text-ellipsis;
+        @include module.text-ellipsis;
       }
     }
   }
diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss
index 7fff3ba1627..2f65b0689c1 100644
--- a/_sass/layout/home.scss
+++ b/_sass/layout/home.scss
@@ -1,3 +1,5 @@
+@use '../addon/variables';
+
 /*
   Style for Homepage
 */
@@ -20,14 +22,14 @@
     background: none;
 
     %img-radius {
-      border-radius: $radius-lg $radius-lg 0 0;
+      border-radius: variables.$radius-lg variables.$radius-lg 0 0;
     }
 
     .preview-img {
-      @extend %img-radius;
+      @extend %img-radius !optional;
 
       img {
-        @extend %img-radius;
+        @extend %img-radius !optional;
       }
     }
 
@@ -36,7 +38,7 @@
       padding: 1rem;
 
       .card-title {
-        @extend %text-clip;
+        @extend %text-clip !optional;
 
         color: var(--heading-color) !important;
         font-size: 1.25rem;
@@ -47,10 +49,10 @@
       }
 
       .card-text.content {
-        @extend %muted;
+        @extend %muted !optional;
 
         p {
-          @extend %text-clip;
+          @extend %text-clip !optional;
 
           line-height: 1.5;
           margin: 0;
@@ -58,7 +60,7 @@
       }
 
       .post-meta {
-        @extend %muted;
+        @extend %muted !optional;
 
         i {
           &:not(:first-child) {
@@ -67,7 +69,7 @@
         }
 
         em {
-          @extend %normal-font-style;
+          @extend %normal-font-style !optional;
 
           color: inherit;
         }
@@ -75,7 +77,7 @@
         > div:first-child {
           display: block;
 
-          @extend %text-ellipsis;
+          @extend %text-ellipsis !optional;
         }
       }
     }
@@ -130,7 +132,7 @@
 /* Tablet */
 @media all and (min-width: 768px) {
   %img-radius {
-    border-radius: 0 $radius-lg $radius-lg 0;
+    border-radius: 0 variables.$radius-lg variables.$radius-lg 0;
   }
 
   #post-list {
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index 891479e6784..126ab007e38 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -1,3 +1,6 @@
+@use '../addon/module';
+@use '../addon/variables';
+
 /**
  * Post-specific styles
  */
@@ -16,7 +19,7 @@
 
 header {
   .post-desc {
-    @extend %heading;
+    @extend %heading !optional;
 
     font-size: 1.125rem;
     line-height: 1.6;
@@ -29,7 +32,7 @@ header {
 
     em,
     time {
-      @extend %text-highlight;
+      @extend %text-highlight !optional;
     }
 
     em {
@@ -45,7 +48,7 @@ header {
 }
 
 .post-tail-wrapper {
-  @extend %text-sm;
+  @extend %text-sm !optional;
 
   margin-top: 6rem;
   border-bottom: 1px double var(--main-border-color);
@@ -54,20 +57,20 @@ header {
     line-height: 1.2rem;
 
     > a {
-      @extend %text-highlight;
+      @extend %text-highlight !optional;
 
       &:hover {
-        @extend %link-hover;
+        @extend %link-hover !optional;
       }
     }
 
     span:last-child {
-      @extend %text-sm;
+      @extend %text-sm !optional;
     }
   } /* .license-wrapper */
 
   .post-meta a:not(:hover) {
-    @extend %link-underline;
+    @extend %link-underline !optional;
   }
 
   .share-wrapper {
@@ -87,17 +90,17 @@ header {
       i {
         color: var(--btn-share-color);
 
-        @extend %icon-size;
+        @extend %icon-size !optional;
       }
 
       > * {
-        @extend %icon-size;
+        @extend %icon-size !optional;
 
         margin-left: 0.5rem;
 
         &:hover {
           i {
-            @extend %btn-share-hover;
+            @extend %btn-share-hover !optional;
           }
         }
       }
@@ -107,7 +110,7 @@ header {
         border: none;
         line-height: inherit;
 
-        @extend %cursor-pointer;
+        @extend %cursor-pointer !optional;
       }
     } /* .share-icons */
   } /* .share-wrapper */
@@ -131,16 +134,16 @@ header {
 
   .post-tag {
     &:hover {
-      @extend %link-hover;
-      @extend %tag-hover;
-      @extend %no-bottom-border;
+      @extend %link-hover !optional;
+      @extend %tag-hover !optional;
+      @extend %no-bottom-border !optional;
     }
   }
 }
 
 .post-navigation {
   .btn {
-    @extend %btn-post-nav;
+    @extend %btn-post-nav !optional;
 
     &:not(:hover) {
       color: var(--link-color);
@@ -153,7 +156,7 @@ header {
     }
 
     &.disabled {
-      @extend %btn-post-nav;
+      @extend %btn-post-nav !optional;
 
       pointer-events: auto;
       cursor: not-allowed;
@@ -173,12 +176,12 @@ header {
     }
 
     &:first-child {
-      border-radius: $radius-lg 0 0 $radius-lg;
+      border-radius: variables.$radius-lg 0 0 variables.$radius-lg;
       left: 0.5px;
     }
 
     &:last-child {
-      border-radius: 0 $radius-lg $radius-lg 0;
+      border-radius: 0 variables.$radius-lg variables.$radius-lg 0;
       right: 0.5px;
     }
   }
@@ -259,7 +262,7 @@ header {
     .toc-link {
       display: block;
 
-      @extend %text-ellipsis;
+      @extend %text-ellipsis !optional;
 
       &:hover {
         color: var(--toc-highlight);
@@ -298,15 +301,15 @@ header {
   top: 0;
   z-index: 1;
   margin: 0 -1rem;
-  height: $topbar-height;
+  height: variables.$topbar-height;
   background: var(--main-bg);
   border-bottom: 1px solid var(--main-border-color);
   transition: all 0.2s ease-in-out;
 
-  @extend %btn-color;
+  @extend %btn-color !optional;
 
   .label {
-    @extend %heading;
+    @extend %heading !optional;
 
     margin-left: 0.25rem;
     padding: 0 0.75rem;
@@ -314,7 +317,7 @@ header {
   }
 
   &.invisible {
-    top: -$topbar-height;
+    top: -(variables.$topbar-height);
     transition: none;
   }
 }
@@ -322,11 +325,11 @@ header {
 #toc-solo-trigger {
   color: var(--text-muted-color);
   border-color: var(--btn-border-color);
-  border-radius: $radius-lg;
+  border-radius: variables.$radius-lg;
 
   .label {
     font-size: 1rem;
-    font-family: $font-family-heading;
+    font-family: variables.$font-family-heading;
   }
 
   &:hover {
@@ -338,7 +341,7 @@ header {
 @mixin slide-in {
   from {
     opacity: 0.7;
-    transform: translateY(-$topbar-height);
+    transform: translateY(-(variables.$topbar-height));
   }
 
   to {
@@ -354,7 +357,7 @@ header {
   }
 
   100% {
-    transform: translateY(-$topbar-height);
+    transform: translateY(-(variables.$topbar-height));
     opacity: 0;
   }
 }
@@ -383,10 +386,10 @@ header {
 
   border-color: var(--toc-popup-border-color);
   border-width: 1px;
-  border-radius: $radius-lg;
+  border-radius: variables.$radius-lg;
   color: var(--text-color);
   background: var(--card-bg);
-  margin-top: $topbar-height;
+  margin-top: variables.$topbar-height;
   min-width: 20rem;
   font-size: 1.05rem;
 
@@ -405,11 +408,11 @@ header {
   }
 
   @media all and (min-width: 850px) {
-    left: $sidebar-width;
+    left: variables.$sidebar-width;
   }
 
   .header {
-    @extend %btn-color;
+    @extend %btn-color !optional;
 
     position: -webkit-sticky;
     position: sticky;
@@ -418,7 +421,7 @@ header {
     border-bottom: 1px solid var(--main-border-color);
 
     .label {
-      font-family: $font-family-heading;
+      font-family: variables.$font-family-heading;
     }
   }
 
@@ -487,8 +490,8 @@ header {
 
   #toc-popup-content {
     overflow: auto;
-    max-height: calc(100vh - 4 * $topbar-height);
-    font-family: $font-family-heading;
+    max-height: calc(100vh - 4 * variables.$topbar-height);
+    font-family: variables.$font-family-heading;
     margin-bottom: -$curtain-height;
   }
 }
@@ -497,18 +500,18 @@ header {
 
 #related-posts {
   > h3 {
-    @include label(1.1rem, 600);
+    @include module.label(1.1rem, 600);
   }
 
   time {
-    @extend %normal-font-style;
-    @extend %text-xs;
+    @extend %normal-font-style !optional;
+    @extend %text-xs !optional;
 
     color: var(--text-muted-color);
   }
 
   p {
-    @extend %text-ellipsis;
+    @extend %text-ellipsis !optional;
 
     font-size: 0.9rem;
     margin-bottom: 0.5rem;
@@ -520,7 +523,7 @@ header {
 
   .card {
     h4 {
-      @extend %text-clip;
+      @extend %text-clip !optional;
     }
   }
 }
@@ -540,7 +543,7 @@ header {
 }
 
 .share-label {
-  @include label(inherit, 400, inherit);
+  @include module.label(inherit, 400, inherit);
 
   &::after {
     content: ':';
@@ -567,8 +570,8 @@ header {
 /* Hide SideBar and TOC */
 @media all and (max-width: 849px) {
   .post-navigation {
-    @include pl-pr(0);
-    @include ml-mr(-0.5rem);
+    @include module.pl-pr(0);
+    @include module.ml-mr(-0.5rem);
   }
 }
 
diff --git a/_sass/main.bundle.scss b/_sass/main.bundle.scss
index 52e893feb36..bc7014bb7ff 100644
--- a/_sass/main.bundle.scss
+++ b/_sass/main.bundle.scss
@@ -1,2 +1,2 @@
-@import 'dist/bootstrap';
-@import 'main';
+@use 'dist/bootstrap';
+@use 'main';
diff --git a/_sass/main.scss b/_sass/main.scss
index 1c2311d5bfa..e285fdbe3bc 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -1,13 +1,13 @@
-@import 'colors/typography-light';
-@import 'colors/typography-dark';
-@import 'addon/variables';
-@import 'variables-hook';
-@import 'addon/module';
-@import 'addon/syntax';
-@import 'addon/commons';
-@import 'layout/home';
-@import 'layout/post';
-@import 'layout/tags';
-@import 'layout/archives';
-@import 'layout/categories';
-@import 'layout/category-tag';
+@use 'colors/typography-light';
+@use 'colors/typography-dark';
+@use 'addon/variables';
+@use 'variables-hook';
+@use 'addon/module';
+@use 'addon/syntax';
+@use 'addon/commons';
+@use 'layout/home';
+@use 'layout/post';
+@use 'layout/tags';
+@use 'layout/archives';
+@use 'layout/categories';
+@use 'layout/category-tag';
diff --git a/assets/css/jekyll-theme-chirpy.scss b/assets/css/jekyll-theme-chirpy.scss
index d20545ba80b..7ff89bf7f13 100644
--- a/assets/css/jekyll-theme-chirpy.scss
+++ b/assets/css/jekyll-theme-chirpy.scss
@@ -1,7 +1,7 @@
 ---
 ---
 
-@import 'main
+@use 'main
 {%- if jekyll.environment == 'production' -%}
   .bundle
 {%- endif -%}