SASS Variables

SASS variables store reusable values like colors, font sizes, and spacing. Variables begin with a $ sign and can hold any CSS value.

Variables are scoped: a variable declared inside a block is only available within that block. Variables declared at the top level are globally available.

Example

// Color palette
$white: #ffffff;
$black: #000000;
$primary: #6366f1;
$secondary: #8b5cf6;
$success: #10b981;
$danger:  #ef4444;

// Typography
$font-sans: 'Inter', system-ui, sans-serif;
$font-mono: 'JetBrains Mono', monospace;
$text-sm: 0.875rem;
$text-base: 1rem;
$text-lg: 1.125rem;
$text-xl: 1.25rem;

// Spacing
$space-1: 0.25rem;
$space-2: 0.5rem;
$space-4: 1rem;
$space-8: 2rem;

// Using variables
.card {
  background: $white;
  color: $black;
  font-family: $font-sans;
  font-size: $text-base;
  padding: $space-4;
  border: 1px solid rgba($primary, 0.2);
}

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