SCSS compiles. Doesn't... work, but it compiles

Author: FlynnD273

source/_sass/app.scss

@@ -14,19 +14,25 @@
  * limitations under the License.
  */
 
-@import 'bourbon/bourbon';
+@use "sass:color";
+@use "sass:meta";
+@use 'bourbon/bourbon';
 
-@import 'colors';
+@use 'colors';
 
-@import 'base/base';
-@import 'responsive/responsive';
-@import 'font-awesome/font-awesome';
+@use 'base/base';
+@use 'responsive/responsive';
+@use 'font-awesome/font-awesome';
 
-@import 'header';
-@import 'footer';
+@use 'header';
+@use 'footer';
+@use "base/variables";
+@use "bourbon/addons/font-family";
+@use "bourbon/css3/box-sizing";
+@use "responsive/utilities/variables" as utilities-variables;
 
 * {
-  @include box-sizing(border-box);
+  @include box-sizing.box-sizing(border-box);
 }
 
 body,
@@ -37,17 +43,17 @@ html {
 }
 
 body {
-  padding-top: $header-height;
-  background-color: $gray-01;
+  padding-top: header.$header-height;
+  background-color: colors.$gray-01;
 }
 
 .anchor[id],
 .anchor[name] {
   &::before {
     content: ' ';
     display: block;
-    height: $header-height;
-    margin-top: -0.7 * $header-height;
+    height: header.$header-height;
+    margin-top: -0.7 * header.$header-height;
     visibility: hidden;
   }
 }
@@ -57,17 +63,17 @@ body {
 }
 
 code {
-  background-color: $white;
+  background-color: colors.$white;
   border-radius: 2px;
-  color: darken($base-font-color, 20);
-  font-family: $monospace;
-  font-size: $base-font-size;
+  color: color.adjust(variables.$base-font-color, $lightness: -20%);
+  font-family: font-family.$monospace;
+  font-size: utilities-variables.$base-font-size;
   padding: 2px 4px;
   box-shadow: inset 0 0 2px #bbb;
 }
 
 a code {
-  color: darken($base-link-color, 10);
+  color: color.adjust(variables.$base-link-color, $lightness: -10%);
 }
 
 .container {
@@ -105,7 +111,7 @@ a code {
   line-height: 1.1;
 
   a {
-    color: $base-text-color;
+    color: utilities-variables.$base-text-color;
 
     &:hover {
       text-decoration: underline;
@@ -155,48 +161,48 @@ a code {
   overflow: hidden;
 }
 
-@import 'elements/alert';
-@import 'elements/buttons';
-@import 'elements/form';
-@import 'elements/mobile-nav';
-@import 'elements/highlight';
-@import 'elements/inline-list';
-@import 'elements/markdown';
-@import 'elements/screenshot';
-@import 'elements/sidebar';
-@import 'elements/spinner';
-@import 'elements/table';
+@include meta.load-css('elements/alert');
+@include meta.load-css('elements/buttons');
+@include meta.load-css('elements/form');
+@include meta.load-css('elements/mobile-nav');
+@include meta.load-css('elements/highlight');
+@include meta.load-css('elements/inline-list');
+@include meta.load-css('elements/markdown');
+@include meta.load-css('elements/screenshot');
+@include meta.load-css('elements/sidebar');
+@include meta.load-css('elements/spinner');
+@include meta.load-css('elements/table');
 // @import 'elements/terminal';
-@import 'elements/toc';
+@include meta.load-css('elements/toc');
 // @import 'elements/typeahead';
 // @import 'elements/video';
-@import 'elements/bigbox';
-@import 'elements/full-height';
-@import 'elements/sectionmenu';
-@import 'elements/search';
-@import 'elements/gray-box';
-@import 'elements/ribbon';
-@import 'elements/pagination';
-@import 'elements/landing-slider';
-@import 'elements/platform-choice';
-@import 'elements/dual-image';
-
-@import 'sections/getting-started';
-
-@import 'libs/slick';
-@import 'mmenu/jquery.mmenu.all.scss';
-
-@import 'sections/events';
-@import 'sections/blog';
-@import 'sections/documentation';
-@import 'sections/examples';
-@import 'sections/guides';
-@import 'sections/retreat';
-@import 'sections/inspiration';
-@import 'sections/round';
-@import 'sections/sdk';
-
-@import 'debug';
+@include meta.load-css('elements/bigbox');
+@include meta.load-css('elements/full-height');
+@include meta.load-css('elements/sectionmenu');
+@include meta.load-css('elements/search');
+@include meta.load-css('elements/gray-box');
+@include meta.load-css('elements/ribbon');
+@include meta.load-css('elements/pagination');
+@include meta.load-css('elements/landing-slider');
+@include meta.load-css('elements/platform-choice');
+@include meta.load-css('elements/dual-image');
+
+@include meta.load-css('sections/getting-started');
+
+@include meta.load-css('libs/slick');
+@include meta.load-css('mmenu/jquery.mmenu.all.scss');
+
+@include meta.load-css('sections/events');
+@include meta.load-css('sections/blog');
+@include meta.load-css('sections/documentation');
+@include meta.load-css('sections/examples');
+@include meta.load-css('sections/guides');
+@include meta.load-css('sections/retreat');
+@include meta.load-css('sections/inspiration');
+@include meta.load-css('sections/round');
+@include meta.load-css('sections/sdk');
+
+@include meta.load-css('debug');
 
 .mm-page {
   height: 100%;
@@ -214,11 +220,11 @@ a code {
 .mm-opened,
 .mm-opening {
   .mm-page {
-    margin-top: -1 * $header-height;
+    margin-top: -1 * header.$header-height;
   }
 
   .content {
-    padding-top: $header-height;
+    padding-top: header.$header-height;
   }
 }
 
@@ -236,7 +242,7 @@ a code {
 }
 
 .modal-content {
-  background-color: $gray-01;
+  background-color: colors.$gray-01;
 }
 
 .header--skinny {

source/_sass/base/_base.scss

@@ -18,23 +18,23 @@
 // http://bitters.bourbon.io
 
 // Variables
-@import 'variables';
+@use 'variables';
 
 // Neat Settings -- uncomment if using Neat -- must be imported before Neat
 // @import 'grid-settings';
 
 // Mixins
-@import 'mixins/flash';
+@use 'mixins/flash';
 
 // Extends
-@import 'extends/button';
-@import 'extends/clearfix';
-@import 'extends/hide-text';
+@use 'extends/button';
+@use 'extends/clearfix';
+@use 'extends/hide-text';
 
 // Typography and Elements
-@import 'typography';
+@use 'typography';
 // @import 'forms';
-@import 'tables';
-@import 'lists';
-@import 'flashes';
+@use 'tables';
+@use 'lists';
+@use 'flashes';
 // @import 'buttons';

source/_sass/base/_flashes.scss

@@ -1,3 +1,6 @@
+@use "mixins/flash";
+@use "variables";
+
 /**
  * Copyright 2025 Google LLC
  *
@@ -15,17 +18,17 @@
  */
 
 %flash-alert {
-  @include flash($alert-color);
+  @include flash.flash(variables.$alert-color);
 }
 
 %flash-error {
-  @include flash($error-color);
+  @include flash.flash(variables.$error-color);
 }
 
 %flash-notice {
-  @include flash($notice-color);
+  @include flash.flash(variables.$notice-color);
 }
 
 %flash-success {
-  @include flash($success-color);
+  @include flash.flash(variables.$success-color);
 }

source/_sass/base/_forms.scss

@@ -17,7 +17,7 @@
 fieldset {
   background: lighten($base-border-color, 10);
   border: 1px solid $base-border-color;
-  margin: 0 0 ($base-line-height / 2) 0;
+  margin: 0 0 (calc($base-line-height / 2)) 0;
   padding: $base-line-height;
 }
 
@@ -31,7 +31,7 @@ select {
 
 label {
   font-weight: bold;
-  margin-bottom: $base-line-height / 4;
+  margin-bottom: calc($base-line-height / 4);
 
   &.required:after {
     content: "*";
@@ -53,7 +53,7 @@ select[multiple=multiple] {
   box-shadow: $form-box-shadow;
   font-family: $form-font-family;
   font-size: $form-font-size;
-  margin-bottom: $base-line-height / 2;
+  margin-bottom: calc($base-line-height / 2);
   padding: ($base-line-height / 3) ($base-line-height / 3);
   width: 100%;
 
@@ -76,14 +76,15 @@ input[type="search"] {
   @include appearance(none);
 }
 
-input[type="checkbox"], input[type="radio"] {
+input[type="checkbox"],
+input[type="radio"] {
   display: inline;
-  margin-right: $base-line-height / 4;
+  margin-right: calc($base-line-height / 4);
 }
 
 input[type="file"] {
-  margin-bottom: $base-line-height / 2;
-  padding-bottom: ($base-line-height / 3);
+  margin-bottom: calc($base-line-height / 2);
+  padding-bottom: calc($base-line-height / 3);
   width: 100%;
 }
 

source/_sass/base/_lists.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /**
  * Copyright 2025 Google LLC
  *
@@ -14,30 +16,31 @@
  * limitations under the License.
  */
 
-ul, ol {
+ul,
+ol {
   margin: 0;
   padding: 0;
   list-style-type: none;
 
   &%default-ul {
     list-style-type: disc;
-    margin-bottom: $base-line-height / 2;
-    padding-left: $base-line-height;
+    margin-bottom: calc(variables.$base-line-height / 2);
+    padding-left: variables.$base-line-height;
   }
 
   &%default-ol {
     list-style-type: decimal;
-    margin-bottom: $base-line-height / 2;
-    padding-left: $base-line-height;
+    margin-bottom: calc(variables.$base-line-height / 2);
+    padding-left: variables.$base-line-height;
   }
 }
 
 dl {
-  margin-bottom: $base-line-height / 2;
+  margin-bottom: calc(variables.$base-line-height / 2);
 
   dt {
     font-weight: bold;
-    margin-top: $base-line-height / 2;
+    margin-top: calc(variables.$base-line-height / 2);
   }
 
   dd {

source/_sass/base/_tables.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /**
  * Copyright 2025 Google LLC
  *
@@ -20,14 +22,16 @@ table {
 
 th {
   font-weight: bold;
-  padding: ($base-line-height / 2) 0;
+  padding: calc(variables.$base-line-height / 2) 0;
   text-align: left;
 }
 
 td {
-  padding: ($base-line-height / 2) 0;
+  padding: calc(variables.$base-line-height / 2) 0;
 }
 
-tr, td, th {
+tr,
+td,
+th {
   vertical-align: middle;
 }