Variables in SCSS

Variable Types

SCSS variables can store different types of values:

// Numbers (with or without units)
$font-size-base: 16px;
$line-height: 1.5;

// Strings (with or without quotes)
$font-family: 'Roboto', sans-serif;
$theme-name: dark;

// Colors
$primary: #007bff;
$secondary: rgb(108, 117, 125);
$success: hsl(134, 61%, 41%);

// Booleans
$enable-rounded: true;
$enable-shadows: false;

// Null
$border: null;

// Lists
$font-stack: 'Helvetica', 'Arial', sans-serif;
$padding-values: 10px 15px 20px 15px;

// Maps (key-value pairs)
$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px,
  extra-large: 1200px
);
                        

Variable Scope

Variables in SCSS have scope, which determines where they can be used:

Global Variables

// Global variable (defined outside any selector)
$primary-color: #3498db;

.button {
  // This uses the global variable
  background-color: $primary-color;
}
                        

Local Variables

.button {
  // Local variable (only available within this selector)
  $button-padding: 10px;
  padding: $button-padding;
}

.card {
  // This would cause an error because $button-padding is not available here
  // padding: $button-padding;
}
                        

The !global Flag

.button {
  // Local variable made global with !global
  $button-padding: 10px !global;
  padding: $button-padding;
}

.card {
  // Now this works because $button-padding is global
  padding: $button-padding;
}
                        

Variable Interpolation

You can use variables within selectors, property names, and other places using interpolation with #{$variable}:

$property: color;
$theme: dark;

// In selectors
.#{$theme}-theme {
  // In property names
  #{$property}: white;
  
  // In values that require calculations
  margin: #{$base-padding * 2};
  
  // In media queries
  @media (max-width: #{$breakpoints}) {
    font-size: 14px;
  }
}
                        

Default Values with !default

The !default flag assigns a value to a variable only if that variable isn't already defined or is null:

// Variables with default values
$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;

// If you want to override the defaults, define them before importing
// the file with the defaults
$primary-color: #ff5722;
@import 'variables';  // Contains the default definitions

// Now $primary-color is #ff5722 (your override)
// and $secondary-color is #2ecc71 (the default)
                        

Variable Operations

You can perform operations with variables:

// Numeric operations
$base-padding: 15px;
$container-padding: $base-padding * 2;  // 30px

// Color operations
$base-color: #3498db;
$darker-color: darken($base-color, 10%);  // Makes it 10% darker
$lighter-color: lighten($base-color, 10%);  // Makes it 10% lighter
$transparent-color: rgba($base-color, 0.5);  // Adds transparency

// String operations
$asset-path: '/assets/';
$image-path: $asset-path + 'images/';  // '/assets/images/'

// Using variables in calculations
.container {
  width: calc(100% - #{$container-padding});
}
                        

Best Practices for SCSS Variables

• Organize variables: Group related variables together and use comments to explain their purpose.
• Use descriptive names: Choose names that clearly indicate what the variable represents.
• Create a variables file: Keep all global variables in a dedicated _variables.scss file.
• Use !default for library variables: Allow users to override your defaults.
• Create hierarchical variables: Define base variables and derive others from them.

Example: Well-Organized Variables File

// _variables.scss

// Colors
// -------------------------
// Base colors
$blue:    #007bff !default;
$green:   #28a745 !default;
$red:     #dc3545 !default;
$yellow:  #ffc107 !default;
$gray:    #6c757d !default;

// Theme colors
$primary:       $blue !default;
$secondary:     $gray !default;
$success:       $green !default;
$danger:        $red !default;
$warning:       $yellow !default;

// Typography
// -------------------------
$font-family-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !default;
$font-family-monospace:  'SFMono-Regular', Menlo, Monaco, Consolas, monospace !default;
$font-family-base:       $font-family-sans-serif !default;

$font-size-base:         1rem !default;
$font-size-lg:           $font-size-base * 1.25 !default;
$font-size-sm:           $font-size-base * 0.875 !default;

// Spacing
// -------------------------
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3
) !default;

// Breakpoints
// -------------------------
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;