Sass @use Rule

Definition and Usage

The Sass @use rule loads mixins, functions, and variables from other stylesheets — called modules — and combines their CSS. Write @use "url";. Loaded CSS is included exactly once, no matter how many times the module is used.

Members are namespaced by default (last URL segment), so short names like $radius stay safe. Prefer @use over deprecated @import. Re-export many modules from one entrypoint with @forward.

Syntax

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

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

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

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

Pattern: load a module → access members as namespace.$var, namespace.fn(), or @include namespace.mixin.

Namespaces & Config

Core @use shapes:

Related Rules

Pair with @forward for library entrypoints. Prefer this over deprecated @import. Modules commonly expose mixins and functions. Built-ins include math.div.

SCSS Examples

Multi-file samples show both the module and the loading file. Open View Compiled CSS for verified output.

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

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

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

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

.button {
  border-radius: 3px;
  padding: 8px;
}

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

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

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

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

.button {
  border-radius: 3px;
  padding: 8px;
}

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

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

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

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

.button {
  border-radius: 3px;
  padding: 8px;
}

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

// style.scss
@use "library" with (
  $black: #222,
  $border-radius: 0.1rem
);

code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

// 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: 0.25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}

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

Sass Support

@use is the heart of the Dart Sass module system. It is not a browser CSS feature — support means your Sass compiler understands it.

Prefer Dart Sass for new projects. SCSS and indented syntax both support @use.

Key Takeaways

Compile Notes

@use never reaches the browser. Conceptual flow:

1. Place @use / @forward at the top of the file
2. Resolve the URL (partials, load paths, built-ins)
3. Apply with (…) config on first load only
4. Expose members under the chosen namespace
5. Emit the module’s CSS once in the compiled output