The @use Rule and Namespaces

The `@use` rule is the modern replacement for `@import` in SASS. When you write `@use "variables"`, SASS loads the `_variables.scss` partial and makes its public members — variables, mixins, and functions — available under a namespace derived from the filename. By default the namespace is the filename without path or extension, so variables would be accessed as `variables.$primary-color`. You can alias the namespace with the `as` keyword: `@use "variables" as v` lets you write `v.$primary-color` instead of `variables.$primary-color`. If you are certain there will be no naming conflicts, `@use "variables" as *` dumps all members into the current scope without a namespace, mimicking the old `@import` behaviour. A key advantage of `@use` over `@import` is that each file is only loaded once regardless of how many times it is referenced, eliminating the duplicate-output problem. Private members — variables, mixins, or functions whose names begin with a hyphen or underscore — are not exported by `@use` and remain encapsulated within the defining file.

Example

// ── _variables.scss ───────────────────────────────────────────────────────────

$primary  : #3498db;
$secondary: #2ecc71;
$dark     : #2c3e50;

// Private variable (hyphen prefix) — NOT exported by @use
$-internal-multiplier: 1.5;

// ── _mixins.scss ──────────────────────────────────────────────────────────────

@use 'variables' as v;   // mixins partial uses variables

@mixin flex-center {
    display        : flex;
    align-items    : center;
    justify-content: center;
}

@mixin themed-button($bg: v.$primary) {
    background   : $bg;
    color        : #fff;
    border-radius: 4px;
    padding      : 0.6rem 1.2rem;
    border       : none;
    cursor       : pointer;
}

// ── components/_buttons.scss — using namespaced imports ───────────────────────

@use '../variables' as v;
@use '../mixins'    as m;

.btn {
    @include m.flex-center;
    font-size : 1rem;
    transition: background 0.2s;

    &-primary {
        @include m.themed-button(v.$primary);
        &:hover { background: darken(v.$primary, 8%); }
    }

    &-secondary {
        @include m.themed-button(v.$secondary);
        &:hover { background: darken(v.$secondary, 8%); }
    }
}

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned