Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── _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%); }
    }
}