@use

The @use rule loads mixins, functions, and
variables from other Sass stylesheets, and
combines CSS from multiple stylesheets together.
Stylesheets loaded by @use are called “modules”.

The simplest @use rule is written @use "",
which loads the module at the given URL. Any
styles loaded this way will be included exactly
once in the compiled CSS output.

Loading Members

You can access variables, functions, and mixins
from another module by writing .,
.(), or @include .().
By default, the namespace is just the last
component of the module’s URL.

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// style.scss
@use 'foundation/code';
@use 'foundation/lists';

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}