refactor: change @import in favor of @use and @forward.

src/_accordions.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Accordions
 .accordion {
   input:checked ~,

src/_animations.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Animations
 @keyframes loading {
   0% {

src/_asian.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Optimized for East Asian CJK
 html:lang(zh),
 html:lang(zh-Hans),

src/_autocomplete.scss

@@ -1,3 +1,6 @@
+@use 'mixins/shadow' as *;
+@use 'variables' as *;
+
 // Autocomplete
 .form-autocomplete {
   position: relative;

src/_avatars.scss

@@ -1,3 +1,6 @@
+@use 'mixins/avatar' as *;
+@use 'variables' as *;
+
 // Avatars
 .avatar {
   @include avatar-base();
@@ -74,4 +77,4 @@
     transform: translate(-50%, -50%);
     z-index: $zindex-0;
   }
-}
+}

src/_badges.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Badges
 .badge {
   position: relative;

src/_bars.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Bars
 .bar {
   background: $bg-color-dark;

src/_base.scss

@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'mixins/shadow' as *;
+
 // Base
 *,
 *::before,

src/_breadcrumbs.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Breadcrumbs
 .breadcrumb {
   list-style: none;

src/_buttons.scss

@@ -1,3 +1,7 @@
+@use 'mixins/button' as *;
+@use 'mixins/shadow' as *;
+@use 'variables' as *;
+
 // Buttons
 .btn {
   appearance: none;

src/_calendars.scss

@@ -1,3 +1,6 @@
+@use 'mixins/shadow' as *;
+@use 'variables' as *;
+
 // Calendars
 .calendar {
   border: $border-width solid $border-color;

src/_cards.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Cards
 .card {
   background: $bg-color-light;

src/_carousels.scss

@@ -1,14 +1,16 @@
+@use 'variables' as *;
+
 // Carousels
 // The number of carousel images
 $carousel-number: 8;
 
-%carousel-image-checked { 
+%carousel-image-checked {
   animation: carousel-slidein .75s ease-in-out 1;
   opacity: 1;
   z-index: $zindex-1;
 }
 
-%carousel-nav-checked { 
+%carousel-nav-checked {
   color: $gray-color-light;
 }
 

src/_chips.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Chips
 .chip {
   align-items: center;

src/_codes.scss

@@ -1,3 +1,6 @@
+@use 'mixins/label' as *;
+@use 'variables' as *;
+
 // Codes
 code {
   @include label-base();

src/_columns-order.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Columns order
 @for $i from 1 through $columns-count {
   .order-#{$i} { -ms-flex-order: $i; order: $i; }

src/_comparison-sliders.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Image comparison slider
 // Credit: http://codepen.io/solipsistacp/pen/Gpmaq
 .comparison-slider {

src/_dropdowns.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Dropdown
 .dropdown {
   display: inline-block;

src/_empty.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Empty states (or Blank slates)
 .empty {
   background: $bg-color;

src/_filters.scss

@@ -1,13 +1,15 @@
-// Filters 
-// The number of filter options 
+@use 'variables' as *;
+
+// Filters
+// The number of filter options
 $filter-number: 8 !default;
 
-%filter-checked-nav { 
+%filter-checked-nav {
   background: $primary-color;
   color: $light-color;
 }
 
-%filter-checked-body { 
+%filter-checked-body {
   display: none;
 }
 

src/_forms.scss

@@ -1,3 +1,6 @@
+@use 'mixins/shadow' as *;
+@use 'variables' as *;
+
 // Forms
 .form-group {
   &:not(:last-child) {
@@ -122,7 +125,7 @@ textarea.form-input {
   padding: $control-padding-y $control-padding-x;
   vertical-align: middle;
   width: 100%;
-  background: $bg-color-light; 
+  background: $bg-color-light;
   &:focus {
     @include control-shadow();
     border-color: $primary-color;

src/_hero.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Hero
 .hero {
   display: flex;
@@ -19,4 +21,4 @@
   .hero-body {
     padding: $layout-spacing;
   }
-}
+}

src/_icons.scss

@@ -1,5 +1,5 @@
 // CSS Icons
-@import "icons/icons-core";
-@import "icons/icons-navigation";
-@import "icons/icons-action";
-@import "icons/icons-object";
+@forward 'icons/icons-core';
+@forward 'icons/icons-navigation';
+@forward 'icons/icons-action';
+@forward 'icons/icons-object';

src/_labels.scss

@@ -1,3 +1,6 @@
+@use 'variables' as *;
+@use 'mixins/label' as *;
+
 // Labels
 .label {
   @include label-base();
@@ -8,7 +11,7 @@
   &.label-rounded {
     border-radius: 5rem;
     padding-left: .4rem;
-    padding-right: .4rem; 
+    padding-right: .4rem;
   }
 
   // Label colors

src/_layout.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Layout
 .container {
   margin-left: auto;

src/_media.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Media
 // Image responsive
 .img-responsive {

src/_menus.scss

@@ -1,3 +1,6 @@
+@use 'mixins/shadow' as *;
+@use 'variables' as *;
+
 // Menus
 .menu {
   @include shadow-variant(.05rem);
@@ -63,4 +66,4 @@
       margin-right: $unit-2;
     }
   }
-}
+}

src/_meters.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Meters
 // Credit: https://css-tricks.com/html5-meter-element/
 .meter {

src/_mixins.scss

@@ -1,10 +1,10 @@
 // Mixins
-@import "mixins/avatar";
-@import "mixins/button";
-@import "mixins/clearfix";
-@import "mixins/color";
-@import "mixins/label";
-@import "mixins/position";
-@import "mixins/shadow";
-@import "mixins/text";
-@import "mixins/toast";
+@forward 'mixins/avatar';
+@forward 'mixins/button';
+@forward 'mixins/clearfix';
+@forward 'mixins/color';
+@forward 'mixins/label';
+@forward 'mixins/position';
+@forward 'mixins/shadow';
+@forward 'mixins/text';
+@forward 'mixins/toast';

src/_modals.scss

@@ -1,3 +1,6 @@
+@use 'mixins/shadow' as *;
+@use 'variables' as *;
+
 // Modals
 .modal {
   align-items: center;

src/_navbar.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Navbar
 .navbar {
   align-items: stretch;

src/_navs.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Navs
 .nav {
   display: flex;

src/_normalize.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 /* Manually forked from Normalize.css */
 /* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 

src/_off-canvas.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Off canvas menus
 $off-canvas-breakpoint: $size-lg !default;
 
@@ -80,7 +82,7 @@ $off-canvas-breakpoint: $size-lg !default;
       .off-canvas-toggle {
         display: none;
       }
-  
+
       .off-canvas-sidebar {
         flex: 0 0 auto;
         position: relative;

src/_pagination.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Pagination
 .pagination {
   display: flex;

src/_panels.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Panels
 .panel {
   border: $border-width solid $border-color;

src/_parallax.scss

@@ -1,3 +1,6 @@
+@use './mixins/shadow' as *;
+@use 'variables' as *;
+
 // Parallax
 $parallax-deg: 3deg !default;
 $parallax-offset: 4.5px !default;

src/_popovers.scss

@@ -1,3 +1,6 @@
+@use 'mixins/shadow' as *;
+@use 'variables' as *;
+
 // Popovers
 .popover {
   display: inline-block;

src/_progress.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Progress
 // Credit: https://css-tricks.com/html5-progress-element/
 .progress {

src/_sliders.scss

@@ -1,3 +1,6 @@
+@use 'mixins/shadow' as *;
+@use 'variables' as *;
+
 // Sliders
 // Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
 .slider {

src/_steps.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Steps
 .step {
   display: flex;

src/_tables.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Tables
 .table {
   border-collapse: collapse;

src/_tabs.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Tabs
 .tab {
   align-items: center;

src/_tiles.scss

@@ -1,3 +1,6 @@
+@use 'mixins/text.scss' as *;
+@use 'variables' as *;
+
 // Tiles
 .tile {
   align-content: space-between;

src/_timelines.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // Timelines
 .timeline {
   .timeline-item {

src/_toasts.scss

@@ -1,3 +1,6 @@
+@use 'mixins/toast' as *;
+@use 'variables' as *;
+
 // Toasts
 .toast {
   @include toast-variant($dark-color);
@@ -27,7 +30,7 @@
   a {
     color: $light-color;
     text-decoration: underline;
-    
+
     &:focus,
     &:hover,
     &:active,