Partials & @use

Code

// _variables.scss
$primary: #1976d2;

// _mixins.scss
@mixin center { display: flex; justify-content: center; align-items: center; }

// main.scss (entry)
@use "variables" as v;
@use "mixins" as m;

.button {
  background: v.$primary;
  @include m.center;
}

// @use (modern) is namespaced and loads each file once.
// @import (legacy) is global and can cause duplication.
// Partials are prefixed with _ so Sass skips emitting them.

Explanation

Partials (files prefixed with _) hold reusable snippets and are not compiled on their own. The modern @use directive loads them with a namespace and only once, avoiding the duplication @import caused. Namespacing prevents variable and mixin collisions across files.

More Sass Snippets