Declaring and Using SASS Variables

SASS variables begin with a dollar sign (`$`) and store reusable values — colors, font sizes, spacing, breakpoints, or any CSS value. They are declared with a colon: `$primary-color: #3498db;`. Once declared, a variable can be referenced anywhere in the stylesheet, and changing its value in one place instantly propagates everywhere it is used. Variables in SASS are compile-time constructs: the compiler substitutes the stored value every time the variable is referenced, and the resulting CSS contains only the final literal values. This is different from CSS custom properties (`--primary-color: #3498db`), which are runtime values that the browser resolves and that can be changed via JavaScript. A common pattern is to gather all design tokens into a dedicated `_variables.scss` partial and import it at the top of every other partial that needs those values. Keeping all tokens in one file means a complete redesign — new brand colors, new spacing scale — requires editing just one file.

Example

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

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned