Modernise Sass and use @use + @forward

Author: pradyunsg

src/furo/assets/styles/_scaffold.sass

@@ -16,6 +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"
 
 html
   overflow-x: hidden
@@ -108,14 +109,14 @@ article
   display: flex
   justify-content: flex-end
   // These next two lines took me two days to figure out.
-  width: calc((100% - #{$full-width}) / 2 + #{$sidebar-width})
-  min-width: $sidebar-width
+  width: calc((100% - #{variables.$full-width}) / 2 + #{variables.$sidebar-width})
+  min-width: variables.$sidebar-width
 
 // Scroll-along sidebars
 .sidebar-container,
 .toc-drawer
   box-sizing: border-box
-  width: $sidebar-width
+  width: variables.$sidebar-width
 
 .toc-drawer
   background: var(--color-toc-background)
@@ -142,8 +143,8 @@ article
 
 // Central items.
 .content
-  padding: 0 $content-padding
-  width: $content-width
+  padding: 0 variables.$content-padding
+  width: variables.$content-width
 
   display: flex
   flex-direction: column
@@ -341,46 +342,46 @@ article
 // Responsive layouting
 ////////////////////////////////////////////////////////////////////////////////
 // Make things a bit bigger on bigger screens.
-@media (min-width: $full-width + $sidebar-width)
+@media (min-width: variables.$full-width + variables.$sidebar-width)
   html
     font-size: 110%
 
-@media (max-width: $full-width)
+@media (max-width: variables.$full-width)
   // Collapse "toc" into the icon.
   .toc-content-icon
     display: flex
   .toc-drawer
     position: fixed
     height: 100vh
     top: 0
-    right: -$sidebar-width
+    right: - variables.$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% - #{$full-width - $sidebar-width}) / 2 + #{$sidebar-width})
+    width: calc((100% - #{variables.$full-width - variables.$sidebar-width}) / 2 + #{variables.$sidebar-width})
 
-@media (max-width: $content-padded-width + $sidebar-width)
+@media (max-width: variables.$content-padded-width + variables.$sidebar-width)
   // Center the page
   .content
     margin-left: auto
     margin-right: auto
-    padding: 0 $content-padding--small
+    padding: 0 variables.$content-padding--small
 
-@media (max-width: $content-padded-width--small + $sidebar-width)
+@media (max-width: variables.$content-padded-width--small + variables.$sidebar-width)
   // Collapse "navigation".
   .nav-overlay-icon
     display: flex
   .sidebar-drawer
     position: fixed
     height: 100vh
-    width: $sidebar-width
+    width: variables.$sidebar-width
 
     top: 0
-    left: -$sidebar-width
+    left: - variables.$sidebar-width
 
   // Swap which icon is visible.
   .toc-header-icon, .theme-toggle-header
@@ -424,13 +425,13 @@ article
     flex-direction: column
     justify-content: center
 
-@media (max-width: $content-width + 2* $content-padding--small)
+@media (max-width: variables.$content-width + 2* variables.$content-padding--small)
   // Content should respect window limits.
   .content
     width: 100%
     overflow-x: auto
 
-@media (max-width: $content-width)
+@media (max-width: variables.$content-width)
   article[role=main] aside.sidebar
     float: none
     width: 100%

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

@@ -1,4 +1,4 @@
-@import "print"
-@import "screen-readers"
-@import "theme"
-@import "typography"
+@forward "print"
+@forward "screen-readers"
+@forward "theme"
+@forward "typography"

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

@@ -3,15 +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"
+
 body
-  @include fonts
-  @include spacing
-  @include icons
-  @include admonitions
-  @include default-admonition(#651fff, "abstract")
-  @include default-topic(#14B8A6, "pencil")
+  @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 colors
+  @include variables.colors
 
 .only-light
   display: block !important
@@ -22,7 +24,7 @@ html body .only-dark
 @media not print
   // Enable dark-mode, if requested.
   body[data-theme="dark"]
-    @include colors-dark
+    @include variables.colors-dark
 
     html & .only-light
       display: none !important
@@ -32,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 colors-dark
+      @include variables.colors-dark
 
       html & .only-light
         display: none !important

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

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

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

@@ -1,4 +1,4 @@
-@import "footer"
-@import "search"
-@import "sidebar"
-@import "table_of_contents"
+@forward "footer"
+@forward "search"
+@forward "sidebar"
+@forward "table_of_contents"

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

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

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

@@ -1,16 +1,16 @@
-@import "admonitions"
-@import "api"
-@import "blocks"
-@import "captions"
-@import "code"
-@import "footnotes"
-@import "images"
-@import "indexes"
-@import "lists"
-@import "math"
-@import "misc"
-@import "rubrics"
-@import "sidebar"
-@import "tables"
-@import "target"
-@import "gui-labels"
+@forward "admonitions"
+@forward "api"
+@forward "blocks"
+@forward "captions"
+@forward "code"
+@forward "footnotes"
+@forward "images"
+@forward "indexes"
+@forward "lists"
+@forward "math"
+@forward "misc"
+@forward "rubrics"
+@forward "sidebar"
+@forward "tables"
+@forward "target"
+@forward "gui-labels"

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

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

src/furo/assets/styles/extensions/_index.sass

@@ -1,5 +1,5 @@
-@import "readthedocs"
-@import "copybutton"
-@import "sphinx-design"
-@import "sphinx-inline-tabs"
-@import "sphinx-panels"
+@forward "readthedocs"
+@forward "copybutton"
+@forward "sphinx-design"
+@forward "sphinx-inline-tabs"
+@forward "sphinx-panels"

src/furo/assets/styles/furo-extensions.sass

@@ -1 +1 @@
-@import "extensions"
+@use "extensions"