Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── abstracts/_index.scss — barrel file using @forward ────────────────────────

// Forward all public members from each internal partial
@forward 'variables';
@forward 'functions';
@forward 'mixins';

// Forward only specific members from colors partial
@forward 'colors' show $color-primary, $color-secondary, $color-accent;

// Forward with a prefix so consumers know where members come from
@forward 'breakpoints' as bp-*;
// → $bp-sm, $bp-md, $bp-lg instead of $sm, $md, $lg

// ── abstracts/_variables.scss (internal, not meant to be used directly) ───────

$color-primary  : #3498db !default;
$color-secondary: #2ecc71 !default;
$font-size-base : 1rem    !default;

// ── Configuring a library via @use with () ────────────────────────────────────

// Consumer overrides !default variables at load time
@use 'abstracts' with (
    $color-primary  : #8e44ad,
    $color-secondary: #d35400,
    $font-size-base : 1.125rem
);

.page-title {
    color    : abstracts.$color-primary;
    font-size: abstracts.$font-size-base * 2;
}

// ── main.scss — clean entry point using the barrel ───────────────────────────

@use 'abstracts';  // single line loads all tokens, functions, mixins

.hero {
    background: abstracts.$color-primary;
    font-size : abstracts.$font-size-base;
}