Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── _variables.scss — centralised design tokens ──────────────────────────────

// Color palette
$color-primary   : #3498db;
$color-secondary : #2ecc71;
$color-accent    : #e74c3c;
$color-dark      : #2c3e50;
$color-light     : #ecf0f1;
$color-white     : #ffffff;

// Typography
$font-family-base  : 'Inter', system-ui, sans-serif;
$font-family-mono  : 'Fira Code', 'Courier New', monospace;
$font-size-base    : 16px;
$font-size-sm      : 0.875rem;  // 14px
$font-size-lg      : 1.25rem;   // 20px
$font-size-xl      : 1.5rem;    // 24px
$line-height-base  : 1.6;

// Spacing scale
$space-xs  : 0.25rem;
$space-sm  : 0.5rem;
$space-md  : 1rem;
$space-lg  : 1.5rem;
$space-xl  : 2rem;
$space-xxl : 3rem;

// Borders & shadows
$border-radius : 4px;
$border-color  : #dde1e7;
$box-shadow    : 0 2px 8px rgba(0, 0, 0, 0.12);

// Using variables in a component
.card {
    background    : $color-white;
    border        : 1px solid $border-color;
    border-radius : $border-radius;
    padding       : $space-lg;
    box-shadow    : $box-shadow;
    font-family   : $font-family-base;
    font-size     : $font-size-base;
    line-height   : $line-height-base;
}