Use @use variables as *

This makes it easier to read the written variables.

Author: pradyunsg

src/furo/assets/styles/_scaffold.sass

@@ -16,7 +16,7 @@
 // HACK: Always having the scrollbar visible, prevents certain browsers from
 // causing the content to stutter horizontally between taller-than-viewport and
 // not-taller-than-viewport pages.
-@use "variables"
+@use "variables" as *
 
 html
   overflow-x: hidden
@@ -109,14 +109,14 @@ article
   display: flex
   justify-content: flex-end
   // These next two lines took me two days to figure out.
-  width: calc((100% - #{variables.$full-width}) / 2 + #{variables.$sidebar-width})
-  min-width: variables.$sidebar-width
+  width: calc((100% - #{$full-width}) / 2 + #{$sidebar-width})
+  min-width: $sidebar-width
 
 // Scroll-along sidebars
 .sidebar-container,
 .toc-drawer
   box-sizing: border-box
-  width: variables.$sidebar-width
+  width: $sidebar-width
 
 .toc-drawer
   background: var(--color-toc-background)
@@ -143,8 +143,8 @@ article
 
 // Central items.
 .content
-  padding: 0 variables.$content-padding
-  width: variables.$content-width
+  padding: 0 $content-padding
+  width: $content-width
 
   display: flex
   flex-direction: column
@@ -342,46 +342,46 @@ article
 // Responsive layouting
 ////////////////////////////////////////////////////////////////////////////////
 // Make things a bit bigger on bigger screens.
-@media (min-width: variables.$full-width + variables.$sidebar-width)
+@media (min-width: $full-width + $sidebar-width)
   html
     font-size: 110%
 
-@media (max-width: variables.$full-width)
+@media (max-width: $full-width)
   // Collapse "toc" into the icon.
   .toc-content-icon
     display: flex
   .toc-drawer
     position: fixed
     height: 100vh
     top: 0
-    right: - variables.$sidebar-width
+    right: -$sidebar-width
     border-left: 1px solid var(--color-background-muted)
   .toc-tree
     border-left: none
     font-size: var(--toc-font-size--mobile)
 
   // Accomodate for a changed content width.
   .sidebar-drawer
-    width: calc((100% - #{variables.$full-width - variables.$sidebar-width}) / 2 + #{variables.$sidebar-width})
+    width: calc((100% - #{$full-width - $sidebar-width}) / 2 + #{$sidebar-width})
 
-@media (max-width: variables.$content-padded-width + variables.$sidebar-width)
+@media (max-width: $content-padded-width + $sidebar-width)
   // Center the page
   .content
     margin-left: auto
     margin-right: auto
-    padding: 0 variables.$content-padding--small
+    padding: 0 $content-padding--small
 
-@media (max-width: variables.$content-padded-width--small + variables.$sidebar-width)
+@media (max-width: $content-padded-width--small + $sidebar-width)
   // Collapse "navigation".
   .nav-overlay-icon
     display: flex
   .sidebar-drawer
     position: fixed
     height: 100vh
-    width: variables.$sidebar-width
+    width: $sidebar-width
 
     top: 0
-    left: - variables.$sidebar-width
+    left: -$sidebar-width
 
   // Swap which icon is visible.
   .toc-header-icon, .theme-toggle-header
@@ -425,13 +425,13 @@ article
     flex-direction: column
     justify-content: center
 
-@media (max-width: variables.$content-width + 2* variables.$content-padding--small)
+@media (max-width: $content-width + 2* $content-padding--small)
   // Content should respect window limits.
   .content
     width: 100%
     overflow-x: auto
 
-@media (max-width: variables.$content-width)
+@media (max-width: $content-width)
   article[role=main] aside.sidebar
     float: none
     width: 100%

src/furo/assets/styles/base/_theme.sass

@@ -3,17 +3,17 @@
 // This contains the bulk of the logic for handling dark mode, color scheme
 // toggling and the handling of color-scheme-specific hiding of elements.
 
-@use "../variables"
+@use "../variables" as *
 
 body
-  @include variables.fonts
-  @include variables.spacing
-  @include variables.icons
-  @include variables.admonitions
-  @include variables.default-admonition(#651fff, "abstract")
-  @include variables.default-topic(#14B8A6, "pencil")
+  @include fonts
+  @include spacing
+  @include icons
+  @include admonitions
+  @include default-admonition(#651fff, "abstract")
+  @include default-topic(#14B8A6, "pencil")
 
-  @include variables.colors
+  @include colors
 
 .only-light
   display: block !important
@@ -24,7 +24,7 @@ html body .only-dark
 @media not print
   // Enable dark-mode, if requested.
   body[data-theme="dark"]
-    @include variables.colors-dark
+    @include colors-dark
 
     html & .only-light
       display: none !important
@@ -34,7 +34,7 @@ html body .only-dark
   // Enable dark mode, unless explicitly told to avoid.
   @media (prefers-color-scheme: dark)
     body:not([data-theme="light"])
-      @include variables.colors-dark
+      @include colors-dark
 
       html & .only-light
         display: none !important

src/furo/assets/styles/components/_footer.sass

@@ -1,6 +1,6 @@
 // This file contains the styles used for stylizing the footer that's shown
 // below the content.
-@use "../variables"
+@use "../variables" as *
 
 footer
   font-size: var(--font-size--small)
@@ -24,7 +24,7 @@ footer
 
   line-height: 1.5
 
-  @media (max-width: variables.$content-width)
+  @media (max-width: $content-width)
     text-align: center
     flex-direction: column-reverse
     gap: 0.25rem

src/furo/assets/styles/content/_admonitions.sass

@@ -1,5 +1,5 @@
 @use "sass:list"
-@use "../variables"
+@use "../variables" as *
 
 // The design here is strongly inspired by mkdocs-material.
 .admonition, .topic
@@ -66,7 +66,7 @@ p.topic-title
 .admonition
   border-left: 0.2rem solid var(--color-admonition-title)
 
-  @each $type, $value in variables.$admonitions
+  @each $type, $value in $admonitions
     &.#{$type}
       border-left-color: var(--color-admonition-title--#{$type})
       > .admonition-title

src/furo/assets/styles/content/_target.sass

@@ -1,9 +1,9 @@
-@use "../variables"
+@use "../variables" as *
 
 :target
   scroll-margin-top: 2.5rem
 
-@media (max-width: variables.$full-width - variables.$sidebar-width)
+@media (max-width: $full-width - $sidebar-width)
   :target
     scroll-margin-top: calc(2.5rem + var(--header-height))