Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── Using SASS variables to generate CSS custom properties ────────────────────

// _variables.scss — SASS-side design tokens
$color-primary   : #3498db;
$color-secondary : #2ecc71;
$color-dark      : #2c3e50;
$font-size-base  : 16px;
$space-md        : 1rem;

// _root.scss — expose tokens as CSS custom properties
:root {
    --color-primary   : #{$color-primary};
    --color-secondary : #{$color-secondary};
    --color-dark      : #{$color-dark};
    --font-size-base  : #{$font-size-base};
    --space-md        : #{$space-md};
}

// Dark-mode override using CSS custom properties (not possible with SASS vars)
[data-theme="dark"] {
    --color-primary : #5dade2;
    --color-dark    : #ecf0f1;
}

// Component uses CSS custom properties so it reacts to dark mode at runtime
.card {
    color      : var(--color-dark);
    background : var(--color-primary);
    padding    : var(--space-md);
    font-size  : var(--font-size-base);
}

// SASS variable can NOT do this — it is resolved at compile time:
// .card { color: #2c3e50; }  ← baked in, dark mode would have no effect