Partials & @use

// src/_tokens.scss — partial, not compiled standalone
$brand: #04AA6D;
$radius: 6px;

@mixin focus-ring($colour: $brand) {
    outline: 2px solid $colour;
    outline-offset: 2px;
}

// src/_buttons.scss
@use 'tokens' as t;       // namespace alias

.btn {
    padding: 8px 16px;
    border-radius: t.$radius;
    background: t.$brand;
    &:focus-visible { @include t.focus-ring; }
}

// src/main.scss — the only file compiled to CSS
@use 'tokens';
@use 'buttons';
@use 'cards';
@use 'forms';

body { background: tokens.$brand; }

// Compile
sass src/main.scss dist/main.css

// @use is namespaced and only loads each file ONCE.
// (The old @import is deprecated — it polluted the global namespace and re-loaded files.)

// _vars.scss
$brand: #04AA6D;
// main.scss
@use 'vars';
button { background: vars.$brand; }