diff --git a/scripts/events/lib/utils.js b/scripts/events/lib/utils.js
index 8522135..65aa50f 100644
--- a/scripts/events/lib/utils.js
+++ b/scripts/events/lib/utils.js
@@ -13,6 +13,10 @@ function resolve(name, file = '') {
   return `${dir}/${file}`;
 }
 
+function parse(line, attr) {
+  return line.split(attr)[1].replace(';', '').trim();
+}
+
 function highlightTheme(name) {
   const file = resolve('highlight.js', `styles/${name}.css`);
   const css = fs.readFileSync(file).toString();
@@ -24,9 +28,9 @@ function highlightTheme(name) {
     return match;
   });
   rule.split('\n').forEach(line => {
-    if (line.includes('background:')) background = line.split('background:')[1];
-    else if (line.includes('background-color:')) background = line.split('background-color:')[1];
-    else if (line.includes('color:')) foreground = line.split('color:')[1];
+    if (line.includes('background:')) background = parse(line, 'background:');
+    else if (line.includes('background-color:')) background = parse(line, 'background-color:');
+    else if (line.includes('color:')) foreground = parse(line, 'color:');
   });
   return {
     file,
diff --git a/source/css/_common/components/pages/pages.styl b/source/css/_common/components/pages/index.styl
similarity index 100%
rename from source/css/_common/components/pages/pages.styl
rename to source/css/_common/components/pages/index.styl
diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/index.styl
similarity index 100%
rename from source/css/_common/components/post/post.styl
rename to source/css/_common/components/post/index.styl
diff --git a/source/css/_common/components/post/post-collapse.styl b/source/css/_common/components/post/post-collapse.styl
index 69f7e35..99e55df 100644
--- a/source/css/_common/components/post/post-collapse.styl
+++ b/source/css/_common/components/post/post-collapse.styl
@@ -86,7 +86,7 @@
     display: inline;
 
     a, span.exturl {
-      border-bottom: none;
+      border-bottom: 0;
       color: var(--link-color);
     }
 
diff --git a/source/css/_common/components/post/post-header.styl b/source/css/_common/components/post/post-header.styl
index b3a96e8..8c8f77e 100644
--- a/source/css/_common/components/post/post-header.styl
+++ b/source/css/_common/components/post/post-header.styl
@@ -12,7 +12,7 @@
 
   if (hexo-config('post_edit.enable')) {
     .post-edit-link {
-      border-bottom: none;
+      border-bottom: 0;
       color: $grey;
       display: inline-block;
       float: right;
@@ -32,7 +32,7 @@
 }
 
 .posts-expand .post-title-link {
-  border-bottom: none;
+  border-bottom: 0;
   color: var(--link-color);
   display: inline-block;
   position: relative;
diff --git a/source/css/_common/components/post/post-nav.styl b/source/css/_common/components/post/post-nav.styl
index 35aad9f..1f14593 100644
--- a/source/css/_common/components/post/post-nav.styl
+++ b/source/css/_common/components/post/post-nav.styl
@@ -11,7 +11,7 @@
   flex: 1;
 
   a {
-    border-bottom: none;
+    border-bottom: 0;
     display: block;
     font-size: $font-size-small;
     line-height: 1.6;
diff --git a/source/css/_common/components/third-party/gitalk.styl b/source/css/_common/components/third-party/gitalk.styl
index 7c4ae69..33f393e 100644
--- a/source/css/_common/components/third-party/gitalk.styl
+++ b/source/css/_common/components/third-party/gitalk.styl
@@ -1,5 +1,5 @@
 .gt-header a, .gt-comments a, .gt-popup a {
-  border-bottom: none;
+  border-bottom: 0;
 }
 
 .gt-container .gt-popup .gt-action.is--active::before {
diff --git a/source/css/_common/components/third-party/third-party.styl b/source/css/_common/components/third-party/index.styl
similarity index 100%
rename from source/css/_common/components/third-party/third-party.styl
rename to source/css/_common/components/third-party/index.styl
diff --git a/source/css/_common/components/third-party/math.styl b/source/css/_common/components/third-party/math.styl
index 148a48b..ec0047d 100644
--- a/source/css/_common/components/third-party/math.styl
+++ b/source/css/_common/components/third-party/math.styl
@@ -1,6 +1,7 @@
 mjx-container[jax="CHTML"][display="true"], .has-jax {
   overflow: auto hidden;
 }
+
 mjx-container[display="true"] + br {
   display: none;
 }
diff --git a/source/css/_common/outline/footer/footer.styl b/source/css/_common/outline/footer/index.styl
similarity index 100%
rename from source/css/_common/outline/footer/footer.styl
rename to source/css/_common/outline/footer/index.styl
diff --git a/source/css/_common/outline/header/bookmark.styl b/source/css/_common/outline/header/bookmark.styl
index 506b69c..ea43554 100644
--- a/source/css/_common/outline/header/bookmark.styl
+++ b/source/css/_common/outline/header/bookmark.styl
@@ -1,5 +1,5 @@
 .book-mark-link {
-  border-bottom: none;
+  border-bottom: 0;
   position: fixed;
   top: -10px;
   transition: top .3s;
diff --git a/source/css/_common/outline/header/header.styl b/source/css/_common/outline/header/index.styl
similarity index 100%
rename from source/css/_common/outline/header/header.styl
rename to source/css/_common/outline/header/index.styl
diff --git a/source/css/_common/outline/header/site-meta.styl b/source/css/_common/outline/header/site-meta.styl
index 2a51290..760bc63 100644
--- a/source/css/_common/outline/header/site-meta.styl
+++ b/source/css/_common/outline/header/site-meta.styl
@@ -16,7 +16,7 @@
 }
 
 .brand {
-  border-bottom: none;
+  border-bottom: 0;
   color: var(--brand-color);
   display: inline-block;
   padding: 0 40px;
diff --git a/source/css/_common/outline/sidebar/sidebar.styl b/source/css/_common/outline/sidebar/index.styl
similarity index 95%
rename from source/css/_common/outline/sidebar/sidebar.styl
rename to source/css/_common/outline/sidebar/index.styl
index cb0cfc0..c7fd162 100644
--- a/source/css/_common/outline/sidebar/sidebar.styl
+++ b/source/css/_common/outline/sidebar/index.styl
@@ -10,7 +10,7 @@
 
 .cc-license {
   .cc-opacity {
-    border-bottom: none;
+    border-bottom: 0;
     opacity: .7;
 
     &:hover {
diff --git a/source/css/_common/outline/sidebar/site-state.styl b/source/css/_common/outline/sidebar/site-state.styl
index fad7ad9..7be8429 100644
--- a/source/css/_common/outline/sidebar/site-state.styl
+++ b/source/css/_common/outline/sidebar/site-state.styl
@@ -9,7 +9,7 @@
   padding: 0 15px;
 
   a {
-    border-bottom: none;
+    border-bottom: 0;
     display: block;
   }
 }
diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
index 8751730..9ff9a10 100644
--- a/source/css/_common/scaffolding/base.styl
+++ b/source/css/_common/scaffolding/base.styl
@@ -38,6 +38,8 @@ p {
 a, span.exturl {
   border-bottom: 1px solid $link-decoration-color;
   color: var(--link-color);
+  // For spanned external links.
+  cursor: pointer;
   outline: 0;
   text-decoration: none;
   word-wrap();
@@ -46,9 +48,6 @@ a, span.exturl {
     border-bottom-color: var(--link-hover-color);
     color: var(--link-hover-color);
   }
-
-  // For spanned external links.
-  cursor: pointer;
 }
 
 iframe, img, video, embed {
diff --git a/source/css/_common/scaffolding/highlight/highlight.styl b/source/css/_common/scaffolding/highlight/index.styl
similarity index 100%
rename from source/css/_common/scaffolding/highlight/highlight.styl
rename to source/css/_common/scaffolding/highlight/index.styl
diff --git a/source/css/_common/scaffolding/tags/tags.styl b/source/css/_common/scaffolding/tags/index.styl
similarity index 100%
rename from source/css/_common/scaffolding/tags/tags.styl
rename to source/css/_common/scaffolding/tags/index.styl
diff --git a/source/css/_common/scaffolding/tags/label.styl b/source/css/_common/scaffolding/tags/label.styl
index c07c034..032f54a 100644
--- a/source/css/_common/scaffolding/tags/label.styl
+++ b/source/css/_common/scaffolding/tags/label.styl
@@ -4,7 +4,7 @@
 
   for $type in $note-types {
     &.{$type} {
-      background: lookup('$label-' + $type);
+      background: $label[$type];
     }
   }
 }
diff --git a/source/css/_common/scaffolding/tags/link-grid.styl b/source/css/_common/scaffolding/tags/link-grid.styl
index 5e4738c..79f5db6 100644
--- a/source/css/_common/scaffolding/tags/link-grid.styl
+++ b/source/css/_common/scaffolding/tags/link-grid.styl
@@ -71,33 +71,43 @@
   0% {
     transform: translate(1pt, 1pt) rotate(0deg);
   }
+
   10% {
     transform: translate(-1pt, -2pt) rotate(-1deg);
   }
+
   20% {
     transform: translate(-3pt, 0pt) rotate(1deg);
   }
+
   30% {
     transform: translate(3pt, 2pt) rotate(0deg);
   }
+
   40% {
     transform: translate(1pt, -1pt) rotate(1deg);
   }
+
   50% {
     transform: translate(-1pt, 2pt) rotate(-1deg);
   }
+
   60% {
     transform: translate(-3pt, 1pt) rotate(0deg);
   }
+
   70% {
     transform: translate(3pt, 1pt) rotate(-1deg);
   }
+
   80% {
     transform: translate(-1pt, -1pt) rotate(1deg);
   }
+
   90% {
     transform: translate(1pt, 2pt) rotate(0deg);
   }
+
   100% {
     transform: translate(1pt, -2pt) rotate(-1deg);
   }
diff --git a/source/css/_common/scaffolding/tags/note.styl b/source/css/_common/scaffolding/tags/note.styl
index e3c2ead..ca5ffce 100644
--- a/source/css/_common/scaffolding/tags/note.styl
+++ b/source/css/_common/scaffolding/tags/note.styl
@@ -64,46 +64,46 @@
   for $type in $note-types {
     &.{$type} {
       if ($note-style == 'flat') {
-        background: lookup('$note-bg-' + $type);
+        background: $note-bg[$type];
         if (hexo-config('darkmode')) {
           @media (prefers-color-scheme: dark) {
-            background: mix(lookup('$note-bg-' + $type), $body-bg-color-dark, 10%);
+            background: mix($note-bg[$type], $body-bg-color-dark, 10%);
           }
         }
       }
 
       if ($note-style == 'modern') {
-        background: lookup('$note-modern-bg-' + $type);
-        border-color: lookup('$note-modern-border-' + $type);
-        color: lookup('$note-modern-text-' + $type);
+        background: $note-modern-bg[$type];
+        border-color: $note-modern-border[$type];
+        color: $note-modern-text[$type];
 
         a, span.exturl {
           &:not(.btn) {
-            border-bottom-color: lookup('$note-modern-text-' + $type);
-            color: lookup('$note-modern-text-' + $type);
+            border-bottom-color: $note-modern-text[$type];
+            color: $note-modern-text[$type];
 
             &:hover {
-              border-bottom-color: lookup('$note-modern-hover-' + $type);
-              color: lookup('$note-modern-hover-' + $type);
+              border-bottom-color: $note-modern-hover[$type];
+              color: $note-modern-hover[$type];
             }
           }
         }
       }
 
       if ($note-style != 'modern') {
-        border-left-color: lookup('$note-border-' + $type);
+        border-left-color: $note-border[$type];
 
         h2, h3, h4, h5, h6 {
-          color: lookup('$note-text-' + $type);
+          color: $note-text[$type];
         }
       }
 
       if ($note-icons) {
         &:not(.no-icon)::before {
-          font-family-icons(lookup('$note-icon-' + $type));
+          font-family-icons($note-icon[$type]);
 
           if ($note-style != 'modern') {
-            color: lookup('$note-text-' + $type);
+            color: $note-text[$type];
           }
         }
       }
diff --git a/source/css/_common/scaffolding/tags/tabs.styl b/source/css/_common/scaffolding/tags/tabs.styl
index a4d6f75..63c4dd3 100644
--- a/source/css/_common/scaffolding/tags/tabs.styl
+++ b/source/css/_common/scaffolding/tags/tabs.styl
@@ -20,6 +20,7 @@
       border-bottom: 1px solid $grey-lighter;
       border-left: 1px solid transparent;
       border-right: 1px solid transparent;
+      border-radius: $tbr $tbr 0 0;
       border-top: 3px solid transparent;
       flex-grow: 1;
       list-style-type: none;
@@ -31,8 +32,6 @@
         border-top: 1px solid transparent;
       }
 
-      border-radius: $tbr $tbr 0 0;
-
       +mobile-smallest() {
         border-radius: $tbr;
       }
@@ -79,8 +78,8 @@
 
   .tab-content {
     border: 1px solid $table-border-color;
-    border-top-color: transparent;
     border-radius: 0 0 $tbr $tbr;
+    border-top-color: transparent;
 
     +mobile-smallest() {
       border-radius: $tbr;
diff --git a/source/css/_schemes/Mist/_header.styl b/source/css/_schemes/Mist/_header.styl
index 30a4525..d5fad4e 100644
--- a/source/css/_schemes/Mist/_header.styl
+++ b/source/css/_schemes/Mist/_header.styl
@@ -41,13 +41,13 @@
 
 .use-motion {
   .logo-line:first-of-type {
-    transform-origin: left;
     transform: scaleX(0);
+    transform-origin: left;
   }
 
   .logo-line:last-of-type {
-    transform-origin: right;
     transform: scaleX(0);
+    transform-origin: right;
   }
 }
 
diff --git a/source/css/_schemes/Mist/_posts-expand.styl b/source/css/_schemes/Mist/_posts-expand.styl
index e62d2a5..001c1ea 100644
--- a/source/css/_schemes/Mist/_posts-expand.styl
+++ b/source/css/_schemes/Mist/_posts-expand.styl
@@ -40,7 +40,7 @@
 
     a {
       background: var(--content-bg-color);
-      border-bottom: none;
+      border-bottom: 0;
       padding: 1px 5px;
 
       &:hover {
diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl
index 0961fc5..021b576 100644
--- a/source/css/_schemes/Pisces/_sidebar.styl
+++ b/source/css/_schemes/Pisces/_sidebar.styl
@@ -63,7 +63,7 @@
   }
 
   a, span.exturl {
-    border-bottom: none;
+    border-bottom: 0;
     border-radius: 4px;
     display: block;
 
diff --git a/source/css/_schemes/index.styl b/source/css/_schemes/index.styl
deleted file mode 100644
index f0c3876..0000000
--- a/source/css/_schemes/index.styl
+++ /dev/null
@@ -1 +0,0 @@
-@import $scheme;
diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl
index 7df47e7..9a58edd 100644
--- a/source/css/_variables/base.styl
+++ b/source/css/_variables/base.styl
@@ -279,89 +279,100 @@ $post-eof-margin-bottom       = 60px; //  or 120px for less white space;
 
 $post-card-margin             = 1em 0 0;
 
+
 // Note colors
 // --------------------------------------------------
 // Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable.
 $lbg = hexo-config('note.light_bg_offset') is a 'unit' ? unit(hexo-config('note.light_bg_offset'), '%') : 0;
 $note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger';
 
-// Default
 $note-border-radius         = 3px;
 
-$note-border-default        = #777;
-$note-bg-default            = lighten(spin($note-border-default, 0), 94% + $lbg);
-$note-text-default          = $note-border-default;
-$note-icon-default          = '\f0a9';
+$note-border = {
+  default : #777,
+  primary : #6f42c1,
+  info    : #428bca,
+  success : #5cb85c,
+  warning : #f0ad4e,
+  danger  : #d9534f
+};
 
-$note-modern-border-default = #e1e1e1;
-$note-modern-bg-default     = lighten(spin($note-modern-border-default, 10), 60% + ($lbg * 4));
-$note-modern-text-default   = $grey-dim;
-$note-modern-hover-default  = darken(spin($note-modern-text-default, -10), 32%);
+$note-bg = {
+  default : lighten(spin($note-border.default, 0), 94% + $lbg),
+  primary : lighten(spin($note-border.primary, 10), 92% + $lbg),
+  info    : lighten(spin($note-border.info, -10), 91% + $lbg),
+  success : lighten(spin($note-border.success, 10), 90% + $lbg),
+  warning : lighten(spin($note-border.warning, 10), 88% + $lbg),
+  danger  : lighten(spin($note-border.danger, -10), 92% + $lbg)
+};
 
-// Primary
-$note-border-primary        = #6f42c1;
-$note-bg-primary            = lighten(spin($note-border-primary, 10), 92% + $lbg);
-$note-text-primary          = $note-border-primary;
-$note-icon-primary          = '\f055';
+$note-text = {
+  default : $note-border.default,
+  primary : $note-border.primary,
+  info    : $note-border.info,
+  success : $note-border.success,
+  warning : $note-border.warning,
+  danger  : $note-border.danger
+};
 
-$note-modern-border-primary = #e1c2ff;
-$note-modern-bg-primary     = lighten(spin($note-modern-border-primary, 10), 40% + ($lbg * 4));
-$note-modern-text-primary   = #6f42c1;
-$note-modern-hover-primary  = darken(spin($note-modern-text-primary, -10), 22%);
+$note-icon = {
+  default : '\f0a9',
+  primary : '\f055',
+  info    : '\f05a',
+  success : '\f058',
+  warning : '\f06a',
+  danger  : '\f056'
+};
 
-// Info
-$note-border-info           = #428bca;
-$note-bg-info               = lighten(spin($note-border-info, -10), 91% + $lbg);
-$note-text-info             = $note-border-info;
-$note-icon-info             = '\f05a';
+$note-modern-border = {
+  default : #e1e1e1,
+  primary : #e1c2ff,
+  info    : #b3e5ef,
+  success : #d0e6be,
+  warning : #fae4cd,
+  danger  : #ebcdd2
+};
 
-$note-modern-border-info    = #b3e5ef;
-$note-modern-bg-info        = lighten(spin($note-modern-border-info, 10), 50% + ($lbg * 4));
-$note-modern-text-info      = #31708f;
-$note-modern-hover-info     = darken(spin($note-modern-text-info, -10), 32%);
+$note-modern-bg = {
+  default : lighten(spin($note-modern-border.default, 10), 60% + ($lbg * 4)),
+  primary : lighten(spin($note-modern-border.primary, 10), 40% + ($lbg * 4)),
+  info    : lighten(spin($note-modern-border.info, 10), 50% + ($lbg * 4)),
+  success : lighten(spin($note-modern-border.success, 10), 40% + ($lbg * 4)),
+  warning : lighten(spin($note-modern-border.warning, 10), 43% + ($lbg * 4)),
+  danger  : lighten(spin($note-modern-border.danger, 10), 35% + ($lbg * 4))
+};
 
-// Success
-$note-border-success        = #5cb85c;
-$note-bg-success            = lighten(spin($note-border-success, 10), 90% + $lbg);
-$note-text-success          = $note-border-success;
-$note-icon-success          = '\f058';
+$note-modern-text = {
+  default : $grey-dim,
+  primary : #6f42c1,
+  info    : #31708f,
+  success : #3c763d,
+  warning : #8a6d3b,
+  danger  : #a94442
+};
 
-$note-modern-border-success = #d0e6be;
-$note-modern-bg-success     = lighten(spin($note-modern-border-success, 10), 40% + ($lbg * 4));
-$note-modern-text-success   = #3c763d;
-$note-modern-hover-success  = darken(spin($note-modern-text-success, -10), 27%);
+$note-modern-hover = {
+  default : darken(spin($note-modern-text.default, -10), 32%),
+  primary : darken(spin($note-modern-text.primary, -10), 22%),
+  info    : darken(spin($note-modern-text.info, -10), 32%),
+  success : darken(spin($note-modern-text.success, -10), 27%),
+  warning : darken(spin($note-modern-text.warning, -10), 18%),
+  danger  : darken(spin($note-modern-text.danger, -10), 22%)
+};
 
-// Warning
-$note-border-warning        = #f0ad4e;
-$note-bg-warning            = lighten(spin($note-border-warning, 10), 88% + $lbg);
-$note-text-warning          = $note-border-warning;
-$note-icon-warning          = '\f06a';
-
-$note-modern-border-warning = #fae4cd;
-$note-modern-bg-warning     = lighten(spin($note-modern-border-warning, 10), 43% + ($lbg * 4));
-$note-modern-text-warning   = #8a6d3b;
-$note-modern-hover-warning  = darken(spin($note-modern-text-warning, -10), 18%);
-
-// Danger
-$note-border-danger         = #d9534f;
-$note-bg-danger             = lighten(spin($note-border-danger, -10), 92% + $lbg);
-$note-text-danger           = $note-border-danger;
-$note-icon-danger           = '\f056';
-
-$note-modern-border-danger  = #ebcdd2;
-$note-modern-bg-danger      = lighten(spin($note-modern-border-danger, 10), 35% + ($lbg * 4));
-$note-modern-text-danger    = #a94442;
-$note-modern-hover-danger   = darken(spin($note-modern-text-danger, -10), 22%);
 
 // Tabs border radius
 // --------------------------------------------------
 $tbr                        = 0;
 
+
 // Label colors
 // --------------------------------------------------
-$label-default              = lighten(spin($note-border-default, 0), 89% + $lbg);
-$label-primary              = lighten(spin($note-border-primary, 10), 87% + $lbg);
-$label-info                 = lighten(spin($note-border-info, -10), 86% + $lbg);
-$label-success              = lighten(spin($note-border-success, 10), 85% + $lbg);
-$label-warning              = lighten(spin($note-border-warning, 10), 83% + $lbg);
-$label-danger               = lighten(spin($note-border-danger, -10), 87% + $lbg);
+$label = {
+  default : lighten(spin($note-border.default, 0), 89% + $lbg),
+  primary : lighten(spin($note-border.primary, 10), 87% + $lbg),
+  info    : lighten(spin($note-border.info, -10), 86% + $lbg),
+  success : lighten(spin($note-border.success, 10), 85% + $lbg),
+  warning : lighten(spin($note-border.warning, 10), 83% + $lbg),
+  danger  : lighten(spin($note-border.danger, -10), 87% + $lbg)
+};
diff --git a/source/css/_variables/index.styl b/source/css/_variables/index.styl
deleted file mode 100644
index a049ff1..0000000
--- a/source/css/_variables/index.styl
+++ /dev/null
@@ -1,4 +0,0 @@
-$variables = base $scheme;
-
-for $variable in $variables
-  @import $variable;
diff --git a/source/css/main.styl b/source/css/main.styl
index 192fd04..ca6ded3 100644
--- a/source/css/main.styl
+++ b/source/css/main.styl
@@ -6,7 +6,8 @@ $scheme = hexo-config('scheme') ? hexo-config('scheme') : 'Muse';
 
 // Variables Layer
 // --------------------------------------------------
-@import '_variables';
+@import '_variables/base';
+@import '_variables/' + $scheme;
 for $inject_variable in hexo-config('injects.variable')
   @import $inject_variable;
 
@@ -35,7 +36,7 @@ for $inject_mixin in hexo-config('injects.mixin')
 
 // Schemes Layer
 // --------------------------------------------------
-@import '_schemes';
+@import '_schemes/' + $scheme;
 
 
 // Custom Layer