diff --git a/AquaNet/src/App.svelte b/AquaNet/src/App.svelte
index 5e77378e..57a734c0 100644
--- a/AquaNet/src/App.svelte
+++ b/AquaNet/src/App.svelte
@@ -60,14 +60,14 @@
 </Router>
 
 <style lang="sass">
-  @import "vars"
+  @use "vars"
 
   nav
     display: flex
     justify-content: flex-end
     align-items: center
     gap: 32px
-    height: $nav-height
+    height: vars.$nav-height
 
     padding: 0 48px
 
@@ -89,15 +89,15 @@
       align-items: center
       gap: 8px
       font-weight: bold
-      color: $c-main
+      color: vars.$c-main
       letter-spacing: 0.2em
       flex: 1
 
-      @media (max-width: $w-mobile)
+      @media (max-width: vars.$w-mobile)
         > span
           display: none
 
-    @media (max-width: $w-mobile)
+    @media (max-width: vars.$w-mobile)
       justify-content: center
 
 </style>
diff --git a/AquaNet/src/app.sass b/AquaNet/src/app.sass
index c9956cf2..4df49e31 100644
--- a/AquaNet/src/app.sass
+++ b/AquaNet/src/app.sass
@@ -1,11 +1,12 @@
-@import "vars"
+@use "sass:color"
+@use "vars"
 @import 'lxgw-wenkai-lite-webfont/style.css'
 
 html
   height: 100%
 
 body
-  font-family: $font
+  font-family: vars.$font
   line-height: 1.5
   font-weight: 400
   width: 100%
@@ -15,7 +16,7 @@ body
 
   color-scheme: dark
   color: rgba(255, 255, 255, 0.87)
-  background-color: $c-bg
+  background-color: vars.$c-bg
 
   font-synthesis: none
   text-rendering: optimizeLegibility
@@ -24,11 +25,11 @@ body
 
 a
   font-weight: 500
-  color: $c-main
+  color: vars.$c-main
   text-decoration: inherit
 
 a:hover
-  color: $c-main
+  color: vars.$c-main
 
 h1
   font-size: 3.2em
@@ -39,9 +40,9 @@ h1
   display: flex
   flex-direction: column
 
-  border-radius: $border-radius
+  border-radius: vars.$border-radius
   padding: 12px 16px
-  background: $ov-light
+  background: vars.$ov-light
 
 
 blockquote
@@ -51,7 +52,7 @@ blockquote
   padding: 10px 20px 10px 20px
   margin: 16px 0
   border-left: solid #ff7c7c 3px
-  border-radius: $border-radius
+  border-radius: vars.$border-radius
 
 
 #app
@@ -67,29 +68,29 @@ main:not(.no-margin)
 
 
 button
-  border-radius: $border-radius
+  border-radius: vars.$border-radius
   border: 1px solid transparent
   padding: 0.6em 1.2em
   font-size: 1em
   font-weight: 500
   font-family: inherit
-  background-color: $ov-lighter
+  background-color: vars.$ov-lighter
   opacity: 0.9
   cursor: pointer
-  transition: $transition
+  transition: vars.$transition
 
 button:hover
-  border-color: $c-main
+  border-color: vars.$c-main
 
 button:focus, button:focus-visible
-  color: $c-main
+  color: vars.$c-main
   outline: none
 
 button.error
   color: unset
   &:hover
-    border-color: $c-error
-    color: $c-error
+    border-color: vars.$c-error
+    color: vars.$c-error
     //background: $c-error
     //border-color: transparent
 
@@ -120,29 +121,29 @@ button.icon
   --lv-color: 194, 153, 231
 
 .error
-  color: $c-error
+  color: vars.$c-error
 
 input
-  border-radius: $border-radius
+  border-radius: vars.$border-radius
   border: 1px solid transparent
   padding: 0.6em 1.2em
   font-size: 1em
   font-weight: 500
   font-family: inherit
-  background-color: $ov-lighter
-  transition: $transition
+  background-color: vars.$ov-lighter
+  transition: vars.$transition
   box-sizing: border-box
 
 // Dropdown
 select
-  border-radius: $border-radius
+  border-radius: vars.$border-radius
   border: 1px solid transparent
   padding: 0.6em 1.2em
   font-size: 1em
   font-weight: 500
   font-family: inherit
-  background-color: $ov-lighter
-  transition: $transition
+  background-color: vars.$ov-lighter
+  transition: vars.$transition
   box-sizing: border-box
 
   option
@@ -157,25 +158,25 @@ input[type="checkbox"]
   height: 1.2em
   margin: 0
   padding: 0
-  border: 1px solid $c-main
-  background-color: $ov-lighter
+  border: 1px solid vars.$c-main
+  background-color: vars.$ov-lighter
   appearance: none
   cursor: pointer
   flex-shrink: 0
 
   &:checked
-    background-color: $c-main
-    border-color: $c-main
+    background-color: vars.$c-main
+    border-color: vars.$c-main
 
 label
   cursor: pointer
 
 input:focus, input:focus-visible
-  border: 1px solid $c-main
+  border: 1px solid vars.$c-main
   outline: none
 
 input.error
-  border: 1px solid $c-error
+  border: 1px solid vars.$c-error
 
 .flex-center
   display: flex
@@ -201,30 +202,30 @@ input.error
   margin: 100px auto 0
   padding: 32px 32px 128px
   min-height: 100%
-  max-width: $w-max
+  max-width: vars.$w-max
 
-  background-color: darken($c-bg, 3%)
+  background-color: color.adjust(vars.$c-bg, $lightness: -3%)
   border-radius: 16px 16px 0 0
 
-  @media (max-width: #{$w-max + (64px) * 2})
+  @media (max-width: #{vars.$w-max + (64px) * 2})
     margin: 100px 32px 0
 
-  @media (max-width: $w-mobile)
+  @media (max-width: vars.$w-mobile)
     margin: 100px 0 0
 
   .fw-block
     margin-left: -32px
     margin-right: -32px
     padding: 12px 32px
-    background-color: $ov-darker
+    background-color: vars.$ov-darker
     // Inner shadow
-    box-shadow: inset 0 10px 10px -2px $c-shadow, inset 0 -10px 10px -2px $c-shadow
+    box-shadow: inset 0 10px 10px -2px vars.$c-shadow, inset 0 -10px 10px -2px vars.$c-shadow
 
   > h2.outer-title, > .outer-title-options
     margin-top: -5rem
     margin-bottom: 1rem
 
-    @media (max-width: $w-mobile)
+    @media (max-width: vars.$w-mobile)
       text-align: center
 
   > .outer-title-options
@@ -238,7 +239,7 @@ input.error
       gap: 10px
       top: 4px
 
-    @media (max-width: $w-mobile)
+    @media (max-width: vars.$w-mobile)
       flex-direction: column
 
   > h2, > .outer-title-options > h2
@@ -257,15 +258,15 @@ main.content
     position: absolute
     inset: 0
     top: 100px
-    background: rgba(darken($c-bg, 3%), 0.9)
+    background: rgba(color.adjust(vars.$c-bg, $lightness: -3%), 0.9)
     backdrop-filter: blur(5px)
     box-shadow: 0 0 10px 6px rgba(black, 0.4)
-    max-width: calc($w-max + 20px)
+    max-width: calc(vars.$w-max + 20px)
 
-    @media (max-width: #{$w-max + (64px) * 2})
+    @media (max-width: #{vars.$w-max + (64px) * 2})
       margin: 100px 22px 0
 
-    @media (max-width: $w-mobile)
+    @media (max-width: vars.$w-mobile)
       margin: 100px 0 0
 
 
@@ -289,9 +290,9 @@ main.content
     margin: 0
 
   > div
-    background-color: $c-bg
+    background-color: vars.$c-bg
     padding: 2rem
-    border-radius: $border-radius
+    border-radius: vars.$border-radius
 
     display: flex
     flex-direction: column
@@ -305,7 +306,7 @@ main.content
 nav
   > div, > a
     cursor: pointer
-    transition: $transition
+    transition: vars.$transition
     text-decoration: underline 1px solid transparent
     text-underline-offset: 0.1em
 
@@ -315,12 +316,12 @@ nav
     font-weight: unset
 
     &:hover
-      color: $c-main
-      text-decoration-color: $c-main
+      color: vars.$c-main
+      text-decoration-color: vars.$c-main
       text-underline-offset: 0.5em
 
     &.active
-      color: $c-main
+      color: vars.$c-main
 
 
 .hide-scrollbar
@@ -331,11 +332,11 @@ nav
 
 
 .aqua-tooltip
-  box-shadow: 0 0 5px 0 $c-shadow
-  border-radius: $border-radius
+  box-shadow: 0 0 5px 0 vars.$c-shadow
+  border-radius: vars.$border-radius
   position: absolute
   padding: 4px 8px
-  background: $ov-lighter
+  background: vars.$ov-lighter
   backdrop-filter: blur(5px)
 
 
diff --git a/AquaNet/src/components/ActionCard.svelte b/AquaNet/src/components/ActionCard.svelte
index c641a850..3bb44ac7 100644
--- a/AquaNet/src/components/ActionCard.svelte
+++ b/AquaNet/src/components/ActionCard.svelte
@@ -30,13 +30,13 @@
 </div>
 
 <style lang="sass">
-  @import '../vars'
+  @use '../vars'
 
   .action-card
     overflow: hidden
     padding: 1rem
-    border-radius: $border-radius
-    box-shadow: 0 5px 5px 1px $c-shadow
+    border-radius: vars.$border-radius
+    box-shadow: 0 5px 5px 1px vars.$c-shadow
     transition: all 0.2s ease
     cursor: pointer
     position: relative
@@ -45,7 +45,7 @@
     filter: drop-shadow(0 0 12px rgba(var(--card-color), 0))
 
     &:hover
-      box-shadow: 0 0 0.5rem 0.2rem $c-shadow
+      box-shadow: 0 0 0.5rem 0.2rem vars.$c-shadow
       transform: translateY(-3px)
 
       // Drop shadow glow
@@ -67,7 +67,7 @@
       mask-image: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 70%, white 100%)
       opacity: 0.8
 
-      @media (max-width: $w-mobile)
+      @media (max-width: vars.$w-mobile)
         opacity: 0.6
 
       :global(> svg)
diff --git a/AquaNet/src/components/CommunityCard.svelte b/AquaNet/src/components/CommunityCard.svelte
index 02db9c74..7b1ba4e3 100644
--- a/AquaNet/src/components/CommunityCard.svelte
+++ b/AquaNet/src/components/CommunityCard.svelte
@@ -17,13 +17,13 @@
 </div>
 
 <style lang="sass">
-  @import '../vars'
+  @use '../vars'
 
   .action-card
     overflow: hidden
     padding: 1rem
-    border-radius: $border-radius
-    box-shadow: 0 5px 5px 1px $c-shadow
+    border-radius: vars.$border-radius
+    box-shadow: 0 5px 5px 1px vars.$c-shadow
     transition: all 0.2s ease
     cursor: pointer
     position: relative
@@ -32,7 +32,7 @@
     filter: drop-shadow(0 0 12px rgba(var(--card-color), 0))
 
     &:hover
-      box-shadow: 0 0 0.5rem 0.2rem $c-shadow
+      box-shadow: 0 0 0.5rem 0.2rem vars.$c-shadow
       transform: translateY(-3px)
 
       // Drop shadow glow
@@ -57,6 +57,6 @@
       mask-image: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 70%, white 100%)
       opacity: 0.8
 
-      @media (max-width: $w-mobile)
+      @media (max-width: vars.$w-mobile)
         opacity: 0.6
 </style>
diff --git a/AquaNet/src/components/RankDetails.svelte b/AquaNet/src/components/RankDetails.svelte
index 2cbcd688..6696eb2f 100644
--- a/AquaNet/src/components/RankDetails.svelte
+++ b/AquaNet/src/components/RankDetails.svelte
@@ -35,7 +35,7 @@
 </div>
 
 <style lang="sass">
-  @import "../vars"
+  @use "../vars"
 
   .rank-detail-container
     > div
@@ -48,11 +48,11 @@
       table-layout: fixed
 
       th:not(:first-child)
-        background: $grad-special
+        background: vars.$grad-special
         -webkit-background-clip: text
         -webkit-text-fill-color: transparent
         background-clip: text
-        color: $c-main
+        color: vars.$c-main
         padding: 0.5em
 
       th, td
@@ -60,5 +60,5 @@
         text-align: center
 
         &:first-child
-          color: $c-main
+          color: vars.$c-main
 </style>
diff --git a/AquaNet/src/components/RatingCompSong.svelte b/AquaNet/src/components/RatingCompSong.svelte
index d1393b14..925cc585 100644
--- a/AquaNet/src/components/RatingCompSong.svelte
+++ b/AquaNet/src/components/RatingCompSong.svelte
@@ -66,19 +66,19 @@
 
 <style lang="sass">
 
-  @import "../vars"
-  $gap: 20px
+  @use "../vars"
+  vars.$gap: 20px
 
   .map-detail-container
     background-color: rgb(35,35,35)
-    border-radius: $border-radius
+    border-radius: vars.$border-radius
     overflow: hidden
 
     .scores
       display: flex
       flex-direction: column
       flex-wrap: wrap
-      gap: $gap
+      gap: vars.$gap
 
       // Image and song info
       > div
@@ -91,7 +91,7 @@
         img
           width: 50px
           height: 50px
-          border-radius: $border-radius
+          border-radius: vars.$border-radius
           object-fit: cover
 
         // Song info and score
@@ -118,7 +118,7 @@
           > div:last-child
             white-space: nowrap
 
-          @media (max-width: $w-mobile)
+          @media (max-width: vars.$w-mobile)
             flex-direction: column
             gap: 0
 
@@ -127,7 +127,7 @@
 
         .rank-S
           // Gold green gradient on text
-          background: $grad-special
+          background: vars.$grad-special
           -webkit-background-clip: text
           color: transparent
 
@@ -142,7 +142,7 @@
           text-align: center
           background: rgba(var(--lv-color), 0.6)
           padding: 0 6px
-          border-radius: 0 $border-radius 0 $border-radius
+          border-radius: 0 vars.$border-radius 0 vars.$border-radius
 
           // Inset shadow, like it's a paper below this card with a cut
           box-shadow: inset 0 0 10px rgba(0,0,0,0.5)
@@ -163,5 +163,5 @@
           min-width: 60px
         span.dx-change
           margin-right: 0.5rem
-          color: $c-good
+          color: vars.$c-good
 </style>
diff --git a/AquaNet/src/components/RatingComposition.svelte b/AquaNet/src/components/RatingComposition.svelte
index 4ed01055..57aeb1f8 100644
--- a/AquaNet/src/components/RatingComposition.svelte
+++ b/AquaNet/src/components/RatingComposition.svelte
@@ -25,17 +25,17 @@
 {/if}
 
 <style lang="sass">
-  @import "../vars"
+  @use "../vars"
   
   .rating-composition
     display: grid
     // 3 columns
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))
-    gap: $gap
+    gap: vars.$gap
 
   .rating-composition-2
     display: grid
     // 2 columns
     grid-template-columns: repeat(auto-fill, minmax(290px, 1fr))
-    gap: $gap
+    gap: vars.$gap
 </style>
diff --git a/AquaNet/src/components/Tooltip.svelte b/AquaNet/src/components/Tooltip.svelte
index 7bf805f2..d5316e26 100644
--- a/AquaNet/src/components/Tooltip.svelte
+++ b/AquaNet/src/components/Tooltip.svelte
@@ -56,14 +56,14 @@
 {/if}
 
 <style lang="sass">
-  @import "../vars"
+  @use "../vars"
 
   .tooltip
     position: absolute
     z-index: 1000
     background: white
     padding: 10px 16px
-    border-radius: $border-radius
+    border-radius: vars.$border-radius
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
     pointer-events: none
     white-space: nowrap
diff --git a/AquaNet/src/components/UserBox.svelte b/AquaNet/src/components/UserBox.svelte
index 3ef53c1a..e1669ee7 100644
--- a/AquaNet/src/components/UserBox.svelte
+++ b/AquaNet/src/components/UserBox.svelte
@@ -432,7 +432,7 @@
 <StatusOverlays {error} {loading} />
 
 <style lang="sass">
-    @import "../vars"
+    @use "../vars"
 
     .outer-container
         display: flex
@@ -451,7 +451,7 @@
                 font-weight: 500
 
                 &.active
-                    color: $c-main
+                    color: vars.$c-main
 
     img
         width: 100%
@@ -462,7 +462,7 @@
       flex-direction: row
       gap: 3rem
 
-      @media (max-width: $w-max)
+      @media (max-width: vars.$w-max)
         flex-direction: column
 
     .preview
@@ -471,7 +471,7 @@
         gap: 1rem
         width: 50%
 
-        @media (max-width: $w-max)
+        @media (max-width: vars.$w-max)
             width: 100%
 
         .secondrow
diff --git a/AquaNet/src/components/UserCard.svelte b/AquaNet/src/components/UserCard.svelte
index 03d3e292..c36bf2b2 100644
--- a/AquaNet/src/components/UserCard.svelte
+++ b/AquaNet/src/components/UserCard.svelte
@@ -32,12 +32,12 @@
 {/if}
 
 <style lang="sass">
-@import "../vars"
+@use "../vars"
 
 .user-card
   display: flex
   align-items: center
-  gap: $gap
+  gap: vars.$gap
 
   .details
     display: flex
diff --git a/AquaNet/src/pages/Home.svelte b/AquaNet/src/pages/Home.svelte
index 92905a1b..d5da3c4b 100644
--- a/AquaNet/src/pages/Home.svelte
+++ b/AquaNet/src/pages/Home.svelte
@@ -77,7 +77,7 @@
 <StatusOverlays {error} loading={!me}/>
 
 <style lang="sass">
-  @import "../vars"
+  @use "../vars"
 
   .tabs
     display: flex
@@ -85,7 +85,7 @@
 
     div
       &.active
-        color: $c-main
+        color: vars.$c-main
 
   h3
     font-size: 1.3rem
diff --git a/AquaNet/src/pages/Home/ImportDataAction.svelte b/AquaNet/src/pages/Home/ImportDataAction.svelte
index b382d168..42c763af 100644
--- a/AquaNet/src/pages/Home/ImportDataAction.svelte
+++ b/AquaNet/src/pages/Home/ImportDataAction.svelte
@@ -126,7 +126,7 @@
 {/if}
 
 <style lang="sass">
-  @import "../../vars"
+  @use "../../vars"
   h3
     font-size: 1.3rem
     margin: 0
@@ -142,7 +142,7 @@
 
     .old
       background: #ff6b6b20
-      border: 1px solid $c-error
+      border: 1px solid vars.$c-error
       color: #ffffff99
       position: relative
 
@@ -151,13 +151,13 @@
         position: absolute
         bottom: 0.5rem
         right: 0.5rem
-        color: $c-error
+        color: vars.$c-error
         opacity: 0.6
         font-size: 2rem
 
     .new
       background: #646cff20
-      border: 1px solid $c-darker
+      border: 1px solid vars.$c-darker
 
   .buttons
     display: grid
diff --git a/AquaNet/src/pages/Home/LinkCard.svelte b/AquaNet/src/pages/Home/LinkCard.svelte
index 388d72b3..a462f1d4 100644
--- a/AquaNet/src/pages/Home/LinkCard.svelte
+++ b/AquaNet/src/pages/Home/LinkCard.svelte
@@ -317,7 +317,7 @@
 </div>
 
 <style lang="sass">
-  @import "../../vars"
+  @use "../../vars"
 
   .link-card
     input
@@ -343,7 +343,7 @@
           white-space: nowrap
 
         &.ghost
-          background: rgba($c-darker, 0.8)
+          background: rgba(vars.$c-darker, 0.8)
 
         .register, .last
           opacity: 0.7
@@ -361,10 +361,10 @@
 
     .conflict-cards
       .card
-        transition: $transition
+        transition: vars.$transition
 
       .card:hover
-        background: $c-darker
+        background: vars.$c-darker
 
       span:not(.type)
         font-size: 0.8rem
diff --git a/AquaNet/src/pages/Ranking.svelte b/AquaNet/src/pages/Ranking.svelte
index de800c3d..d1026995 100644
--- a/AquaNet/src/pages/Ranking.svelte
+++ b/AquaNet/src/pages/Ranking.svelte
@@ -77,7 +77,7 @@
 </main>
 
 <style lang="sass">
-  @import "../vars"
+  @use "../vars"
 
   .leaderboard-container
     display: flex
@@ -89,7 +89,7 @@
     justify-content: space-between
     width: 100%
     gap: 12px
-    border-radius: $border-radius
+    border-radius: vars.$border-radius
     padding: 6px 12px
     box-sizing: border-box
 
@@ -104,7 +104,7 @@
         color: unset
 
       .registered
-        background: $grad-special
+        background: vars.$grad-special
         color: transparent
         -webkit-background-clip: text
         background-clip: text
@@ -121,14 +121,14 @@
       width: 5%
       min-width: 20px
 
-    @media (max-width: $w-mobile)
+    @media (max-width: vars.$w-mobile)
       font-size: 0.9rem
 
       .accuracy
         display: none
 
     &.alternate
-      background-color: $ov-light
+      background-color: vars.$ov-light
 
 
 </style>
diff --git a/AquaNet/src/pages/User/Settings.svelte b/AquaNet/src/pages/User/Settings.svelte
index 28800b53..8f1a0cb9 100644
--- a/AquaNet/src/pages/User/Settings.svelte
+++ b/AquaNet/src/pages/User/Settings.svelte
@@ -156,7 +156,7 @@
 </main>
 
 <style lang="sass">
-  @import "../../vars"
+  @use "../../vars"
 
   .fields
     display: flex
@@ -194,7 +194,7 @@
     img
       max-width: 100px
       max-height: 100px
-      border-radius: $border-radius
+      border-radius: vars.$border-radius
       object-fit: cover
 
 </style>
diff --git a/AquaNet/src/pages/UserHome.svelte b/AquaNet/src/pages/UserHome.svelte
index 2ea2b8dd..c21f986d 100644
--- a/AquaNet/src/pages/UserHome.svelte
+++ b/AquaNet/src/pages/UserHome.svelte
@@ -294,13 +294,13 @@
 </main>
 
 <style lang="sass">
-@import "../vars"
+@use "../vars"
 
 #user-home
   .user-pfp
     display: flex
     align-items: flex-end
-    gap: $gap
+    gap: vars.$gap
     margin-top: -72px
     position: relative
 
@@ -319,7 +319,7 @@
 
     .setting-icon
       font-size: 1.5rem
-      color: $c-main
+      color: vars.$c-main
       cursor: pointer
       display: flex
       align-items: center
@@ -334,10 +334,10 @@
   .pfp
     width: 100px
     height: 100px
-    border-radius: $border-radius
+    border-radius: vars.$border-radius
     object-fit: cover
 
-  @media (max-width: $w-mobile)
+  @media (max-width: vars.$w-mobile)
     .user-pfp
       margin-top: -68px
       h2
@@ -349,7 +349,7 @@
 
   .info-bottom, .info-top, .other-info
     display: flex
-    gap: $gap
+    gap: vars.$gap
 
     > div
       display: flex
@@ -361,7 +361,7 @@
 
         // character spacing
         letter-spacing: 0.1em
-        color: $c-main
+        color: vars.$c-main
 
   .info-bottom
     width: max-content
@@ -376,7 +376,7 @@
 
   .scoring-info
     display: flex
-    gap: $gap
+    gap: vars.$gap
     max-height: 250px
 
     .chart
@@ -408,7 +408,7 @@
           opacity: 0.5
           user-select: none
 
-    @media (max-width: $w-mobile)
+    @media (max-width: vars.$w-mobile)
       flex-direction: column
       max-height: unset
 
@@ -429,12 +429,12 @@
   .activity-info
     display: flex
     flex-direction: column
-    gap: $gap
+    gap: vars.$gap
 
     #cal-heatmap
       overflow-x: auto
 
-    @media (max-width: $w-mobile)
+    @media (max-width: vars.$w-mobile)
       #cal-heatmap
         width: 100%
 
@@ -453,17 +453,17 @@
       display: flex
       flex-direction: column
       flex-wrap: wrap
-      gap: $gap
+      gap: vars.$gap
 
       > div.alt
         background-color: rgba(white, 0.03)
-        border-radius: $border-radius
+        border-radius: vars.$border-radius
 
       // Image and song info
       > div
         display: flex
         align-items: center
-        gap: $gap
+        gap: vars.$gap
         padding-right: 16px
         max-width: 100%
         box-sizing: border-box
@@ -471,7 +471,7 @@
         img
           width: 50px
           height: 50px
-          border-radius: $border-radius
+          border-radius: vars.$border-radius
           object-fit: cover
 
         // Song info and score
@@ -493,7 +493,7 @@
           > div:last-child
             white-space: nowrap
 
-          @media (max-width: $w-mobile)
+          @media (max-width: vars.$w-mobile)
             flex-direction: column
             gap: 0
 
@@ -511,7 +511,7 @@
 
         .rank-S
           // Gold green gradient on text
-          background: $grad-special
+          background: vars.$grad-special
           -webkit-background-clip: text
           color: transparent
 
@@ -526,7 +526,7 @@
           text-align: center
           background: rgba(var(--lv-color), 0.6)
           padding: 0 6px
-          border-radius: $border-radius
+          border-radius: vars.$border-radius
           margin-right: 10px
 
         span
@@ -544,5 +544,5 @@
       span.increased
         &:before
           content: "+"
-        color: $c-good
+        color: vars.$c-good
 </style>
diff --git a/AquaNet/src/pages/Welcome.svelte b/AquaNet/src/pages/Welcome.svelte
index 4de90784..f01748c9 100644
--- a/AquaNet/src/pages/Welcome.svelte
+++ b/AquaNet/src/pages/Welcome.svelte
@@ -157,7 +157,7 @@
 </main>
 
 <style lang="sass">
-  @import "../vars"
+  @use "../vars"
 
   .login-form
     display: flex
@@ -171,7 +171,7 @@
       align-items: center
 
   #home
-    color: $c-main
+    color: vars.$c-main
     position: relative
     width: 100%
     height: 100%
@@ -185,7 +185,7 @@
     flex-direction: column
     justify-content: center
 
-    margin-top: -$nav-height
+    margin-top: -(vars.$nav-height)
 
     // Content container
     > div
@@ -196,10 +196,10 @@
 
       // Switching state container
       > div
-        transition: $transition
+        transition: vars.$transition
 
     #title
-      font-family: Quicksand, $font
+      font-family: Quicksand, vars.$font
       user-select: none
 
       // Gap between text characters
diff --git a/AquaNet/tools/migrate.py b/AquaNet/tools/migrate.py
new file mode 100644
index 00000000..8491e323
--- /dev/null
+++ b/AquaNet/tools/migrate.py
@@ -0,0 +1,76 @@
+import pathlib
+import re
+import subprocess
+import tempfile
+
+def extract_and_migrate_sass(file_path):
+    """Extracts <style lang="sass"> block from a Svelte file, runs sass-migrator on it, and replaces the original style block."""
+
+    with open(file_path, 'r', encoding='utf-8') as file:
+        content = file.read()
+
+    # Regex pattern to match <style lang="sass">...</style>
+    style_pattern = re.compile(r'<style\s+lang\s*=\s*["\']sass["\']>(.*?)</style>', re.DOTALL)
+
+    # Extract all matching style blocks
+    matches = list(style_pattern.finditer(content))
+
+    if not matches:
+        print(f"No <style lang='sass'> block found in {file_path}")
+        return
+
+    updated_content = content
+
+    for match in matches:
+        original_style_block = match.group(0)  # The full <style>...</style> block
+        sass_content = match.group(1)  # The content inside the <style> block
+
+        # Create a temporary file in the same directory as the .svelte file
+        temp_file_path = pathlib.Path(file_path).parent / f"{pathlib.Path(file_path).stem}_temp.sass"
+
+        # Write the SASS content to the temporary file
+        with open(temp_file_path, 'w', encoding='utf-8') as temp_file:
+            temp_file.write(sass_content)
+
+        # Run the sass-migrator on the temporary file
+        try:
+            subprocess.run(['sass-migrator', 'module', str(temp_file_path)], check=True)
+        except subprocess.CalledProcessError as e:
+            print(f"Error while running sass-migrator on {file_path}: {e}")
+            continue
+
+        # Read back the migrated content
+        with open(temp_file_path, 'r', encoding='utf-8') as temp_file:
+            migrated_sass_content = temp_file.read()
+
+        # Create the new <style> block with the migrated SASS content
+        new_style_block = f'<style lang="sass">{migrated_sass_content}</style>'
+
+        # Replace the original style block with the new one
+        updated_content = updated_content.replace(original_style_block, new_style_block)
+
+        # Remove the temporary file
+        temp_file_path.unlink()
+
+    # Write the updated content back to the original file
+    with open(file_path, 'w', encoding='utf-8') as file:
+        file.write(updated_content)
+
+    print(f"Updated {file_path}")
+
+def process_svelte_files(directory):
+    """Recursively processes all .svelte files in the given directory."""
+
+    svelte_files = pathlib.Path(directory).rglob("*.svelte")
+
+    for svelte_file in svelte_files:
+        extract_and_migrate_sass(svelte_file)
+
+def main():
+    """Main function to process all .svelte files in the current directory."""
+
+    current_directory = pathlib.Path(__file__).parent
+    process_svelte_files(current_directory)
+
+if __name__ == "__main__":
+    main()