Migrate to Sass modules

fix function

scss/helpers/_clearfix.scss

@@ -1,3 +1,5 @@
+@use "../mixins/clearfix" as *;
+
 .clearfix {
   @include clearfix();
 }

scss/helpers/_color-bg.scss

@@ -1,3 +1,7 @@
+@use "../config" as *;
+@use "../colors" as *;
+@use "../variables" as *;
+
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .text-bg-#{$color} {

scss/helpers/_colored-links.scss

@@ -1,3 +1,7 @@
+@use "../config" as *;
+@use "../colors" as *;
+@use "../variables" as *;
+
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .link-#{$color} {

scss/helpers/_focus-ring.scss

@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 .focus-ring:focus {
   outline: 0;
   // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values

scss/helpers/_icon-link.scss

@@ -1,3 +1,6 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../mixins/transition" as *;
 .icon-link {
   display: inline-flex;
   gap: $icon-link-gap;

scss/helpers/_position.scss

@@ -1,3 +1,8 @@
+@use "sass:map";
+@use "../config" as *;
+@use "../variables" as *;
+@use "../layout/breakpoints" as *;
+
 // Shorthand
 
 .fixed-top {
@@ -17,7 +22,7 @@
 }
 
 // Responsive sticky top and bottom
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

scss/helpers/_ratio.scss

@@ -1,3 +1,7 @@
+@use "../config" as *;
+@use "../variables" as *;
+// mdo-do: remve for utilities
+
 // Credit: Nicolas Gallagher and SUIT CSS.
 
 .ratio {

scss/helpers/_stretched-link.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 //
 // Stretched link
 //

scss/helpers/_text-truncation.scss

@@ -1,4 +1,4 @@
-//
+@use "../mixins/text-truncate" as *;
 // Text truncation
 //
 

scss/helpers/_visually-hidden.scss

@@ -1,3 +1,5 @@
+@use "../mixins/visually-hidden" as *;
+
 //
 // Visually hidden
 //

scss/helpers/_vr.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .vr {
   display: inline-block;
   align-self: stretch;