Sass Variables — Storing Reusable Values

In this tutorial, you will learn about Sass Variables. We cover key concepts, practical examples, and best practices to help you master this topic.

Sass variables use $ prefix to store reusable values such as colors, font stacks, spacing units, and breakpoints for consistent styling across stylesheets.

What You'll Learn

You will learn how to declare and use Sass variables, understand scope and default values, use variable interpolation, and manage design tokens with variables.

Why It Matters

Variables eliminate repetition. DodaTech's brand colors are stored in Sass variables so changing the primary color from purple to blue updates all components instantly.

Real-World Use

Durga Antivirus Pro's theme uses 20+ Sass variables for colors, fonts, spacing, and shadows. Changing $danger from red to orange updates every error state in the UI.

flowchart LR
    A[SCSS vs Sass] --> B[Variables]
    B --> C[Declaration]
    B --> D[Scope]
    B --> E[Interpolation]
    B --> F[Defaults]
    style B fill:#c69,stroke:#c69,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Variable Basics

// Variable declaration
$primary-color: #7c3aed;
$secondary-color: #64748b;
$font-stack: "Inter", system-ui, sans-serif;
$base-padding: 1rem;
$border-radius: 0.5rem;

// Variable usage
body {
  font-family: $font-stack;
  color: $secondary-color;
}

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

Expected output: Compiled CSS with all variable values inserted directly. Changing one variable updates all usages.

Variable Names

Variables can contain hyphens and underscores. Sass treats them as equivalent:

$primary-color: #7c3aed;
$primary_color: #7c3aed;

// Both refer to the same variable
.button {
  background: $primary-color;
}

Expected output: The button uses the primary color. Sass normalizes hyphens and underscores.

Variable Scope

Variables defined at the top level are global. Variables inside a selector are local to that block:

$global: #333; // Global variable

.card {
  $local: #666; // Local to .card
  color: $global;
  border-color: $local;
}

.footer {
  color: $global; // Works
  // border-color: $local; // Error — $local is not defined here
}

Expected output: The card uses both global and local variables. The footer only has access to the global variable.

Variable Shadowing

$color: red;

.alert {
  $color: blue; // Shadows the global variable
  color: $color; // Blue (local)
}

.text {
  color: $color; // Red (global, unchanged)
}

Expected output: The alert is blue (local variable), the text is red (global variable). The global was not affected.

Default Values

The !default flag assigns a value only if the variable is not already defined:

// _config.scss
$primary: #7c3aed !default;
$padding: 1rem !default;

// main.scss (overrides)
$primary: #2563eb; // Overrides the default
@import "config";

Expected output: $primary is blue (overridden), $padding is 1rem (default used).

This pattern is essential for library customization. Bootstrap uses !default for all its variables.

Variable Interpolation

Use variables in selectors and property names with #{$variable}:

$size: "sm";
$property: "margin";

.icon-#{$size} {
  width: 16px;
  height: 16px;
}

.#{$property}-top {
  #{$property}-top: 1rem;
}

Expected output: Compiled CSS with .icon-sm class and .margin-top class with dynamic property name.

Managing Design Tokens

// Colors
$brand-primary: #7c3aed;
$brand-secondary: #6d28d9;
$text-primary: #1a202c;
$text-secondary: #64748b;
$bg-primary: #ffffff;
$bg-secondary: #f8fafc;

// Typography
$font-body: "Inter", system-ui, sans-serif;
$font-heading: "Poppins", sans-serif;
$font-mono: "JetBrains Mono", monospace;
$font-size-sm: 0.875rem;
$font-size-base: 1rem;
$font-size-lg: 1.25rem;

// Spacing
$spacing-xs: 0.25rem;
$spacing-sm: 0.5rem;
$spacing-md: 1rem;
$spacing-lg: 1.5rem;
$spacing-xl: 3rem;

// Breakpoints
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

Expected output: A complete design token system using Sass variables.

Common Mistakes

1. Variable Name Conflicts

Using common names like $color or $size can conflict with imported libraries. Prefix with a namespace.

2. Not Using !default in Libraries

Library authors must use !default so consumers can override variables before importing.

3. Assuming Variables Work in CSS Output

Sass variables do not exist in the compiled CSS. They are replaced with their values at compile time.

4. Overriding Variables After Import

Variables must be defined before the @import that uses them. Defining after import has no effect.

5. Forgetting That SCSS Variables Are Compile-Time

Unlike CSS custom properties, SCSS variables cannot change at runtime. Use CSS variables for dynamic theming.

Practice Questions

1. What prefix do Sass variables use? The $ dollar sign prefix, like $primary: blue;.

2. How do you make a variable default to a value unless already defined? Add !default flag after the value: $primary: blue !default;.

3. What is variable scope in Sass? Variables at the top level are global. Variables inside a selector block are local to that block.

4. How do you use a variable in a selector name? Use interpolation: .#{$variable-name} { ... }.

5. Do Sass variables persist in the compiled CSS? No. Variables are replaced with their values during compilation.

Challenge

Create a design token file with 15 variables covering colors, typography, spacing, and breakpoints. Use them to style a card component, a button, and a page layout.

FAQ

Mini Project

Extract all hard-coded values from a 100-line CSS file into Sass variables. Create a _variables.scss partial with the tokens. Import and use them in the main stylesheet. Verify the compiled output looks identical to the original.

What's Next

Explore Sass Data Types to understand numbers, strings, colors, lists, and maps. Then learn Sass Nesting for cleaner selector hierarchies.