SASS Variables

SASS Variables

Variables let you define a value once and reuse it everywhere. Change the variable, and every reference updates automatically. No more find-and-replace!

Variable Syntax

// Declare with $
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Inter', 'Helvetica', sans-serif;
$base-font-size: 16px;
$spacing: 20px;
$border-radius: 8px;

// Use anywhere
body {
    font-family: $font-stack;
    font-size: $base-font-size;
    color: #333;
}

.button {
    background: $primary-color;
    padding: $spacing;
    border-radius: $border-radius;
}

.button-success {
    background: $secondary-color;
    padding: $spacing;
    border-radius: $border-radius;
}

What Types Can Variables Hold?

Type	Example
Colours	$brand: #e74c3c;
Strings	$font: 'Arial', sans-serif;
Numbers	$size: 16px;
Booleans	$debug: true;
Lists	$sizes: 12px 14px 16px 18px;
Maps	$colors: (primary: #3498db, danger: #e74c3c);
Null	$optional: null;

Practical: Design Token Variables

// _variables.scss — Your design system

// Colors
$color-primary: #3498db;
$color-secondary: #2ecc71;
$color-danger: #e74c3c;
$color-warning: #f39c12;
$color-dark: #2c3e50;
$color-light: #ecf0f1;
$color-text: #333;
$color-text-light: #777;

// Typography
$font-heading: 'Outfit', sans-serif;
$font-body: 'Inter', sans-serif;
$font-size-base: 16px;
$font-size-sm: 14px;
$font-size-lg: 20px;
$font-size-xl: 28px;

// Spacing
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 40px;

// Borders
$border-radius-sm: 4px;
$border-radius: 8px;
$border-radius-lg: 16px;
$border-radius-full: 50%;

// Shadows
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

Using the Variables

// Import variables and use them
@import 'variables';

.card {
    background: white;
    border-radius: $border-radius;
    box-shadow: $shadow-md;
    padding: $spacing-lg;
    font-family: $font-body;

    h2 {
        font-family: $font-heading;
        font-size: $font-size-xl;
        color: $color-dark;
    }

    p {
        color: $color-text-light;
        font-size: $font-size-base;
        line-height: 1.6;
    }

    .btn {
        background: $color-primary;
        color: white;
        border: none;
        padding: $spacing-sm $spacing-md;
        border-radius: $border-radius-sm;
    }
}

Variable Scope

$color: red;  // Global variable

.card {
    $color: blue;  // Local variable — only inside .card
    background: $color;  // blue
}

.other {
    background: $color;  // red — uses the global
}

Default Variables

// !default — only sets the value if not already defined
$primary: #3498db !default;
$font-size: 16px !default;

// Useful in libraries — users can override before importing

SASS Variables vs CSS Custom Properties

Feature	SASS Variables	CSS Custom Properties
Syntax	$variable	--variable
Compiled	At build time	At runtime
Dynamic	No (static)	Yes (can change via JS)
Browser support	All (compiles away)	Modern browsers only
Logic/functions	Yes (darken, lighten)	Limited

Key Takeaways

• Variables start with $ — define once, use everywhere
• Store colours, fonts, sizes, shadows — your entire design system
• Variables are scoped — local inside blocks, global outside
• Use !default for overridable defaults in libraries
• SASS variables are compiled away — they don't exist in the final CSS
• Keep all variables in a _variables.scss partial file