Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── Variable scope demonstration ──────────────────────────────────────────────

// Global variable
$theme-color: #3498db;

.component {
    // Local variable — only lives inside this block
    $padding: 1rem;
    padding: $padding;
    color  : $theme-color;  // global is accessible here

.inner {
        // $padding is still in scope because inner is nested inside .component
        margin: $padding / 2;
    }
}

// $padding is NOT accessible here — it was local to .component

// ── !default flag for configurable partials ───────────────────────────────────

// _theme.scss  (library partial)
$primary    : #3498db !default;  // used only if $primary not already set
$secondary  : #2ecc71 !default;
$base-font  : 'Inter', sans-serif !default;

.btn-primary {
    background: $primary;
    font-family: $base-font;
}

// main.scss  (consumer overrides BEFORE importing)
$primary   : #8e44ad;  // overrides the !default value
$base-font : 'Georgia', serif;

@use 'theme';  // now uses purple + Georgia instead of the defaults

// ── !global flag (use sparingly) ─────────────────────────────────────────────
$counter: 0;

@mixin increment {
    $counter: $counter + 1 !global;  // modifies the global $counter
}