Sass & SCSS Variables - Define and Use of SCSS Variable

What are Sass & SCSS Variables?

In Sass and SCSS, variables let you store reusable values such as colors, fonts, sizes, or any data needed across your stylesheets. Instead of repeating the same value in multiple places, you can define it once as a variable and reference it wherever required in your scripts, based on its scope.

In this tutorial, we will cover how to define and use indented Sass and SCSS variables, explore built-in options, understand local and global scope, and see how to assign default values with the Sass library.

How to Define Sass and SCSS Variables?

Declaring variables in Sass and SCSS is straightforward. Follow these simple rules:

• Start a variable name with a $ symbol followed by the name.
• Assign a value to the variable using a colon :.
• Use descriptive names like $primary-color for clarity.
• Hyphens and underscores are interchangeable in variable names (e.g., $primary-color and $primary_color are equivalent).
• Once declared, you can reference that variable anywhere in your indented Sass or SCSS script.

$primary-color: #3498db;  
body { 
	color: $primary-color; 
} 

$primary-color: #3498db  
body  
	color: $primary-color  

Invalid Variable Names in Sass and SCSS

When declaring variables in Sass and SCSS, it is essential to follow the rules while declaring new variables. Invalid variable names may cause compilation errors or unexpected behavior.

// Invalid variable name (missing $ symbol)
invalid-variable-name: #3498db; 

// Variable name starts with a number
$123invalid: 10px; 

// Variable name contains special characters (except _ and -)
$var@iable: 10px; 

// Variable name contains spaces
$var iable: 10px; 

// Variable name is a reserved keyword
$true: 10px; 

// Variable name starts with a hyphen (without $ symbol)
-variable-name: 10px;

Benefits of Using Variables in Sass

Variables in Sass offer several advantages, including:

• Reduced data repetition
• Time savings through reduced repetition
• Ability to store any type of data
• Easy reference with short, descriptive names
• No need to remember complex values
• Support for operations and functions on data

Data Types in Sass Variables

Sass variables can store various types of data, including:

• Colors (e.g. #fff, red)
• Numbers (e.g. 10px, 2em)
• Strings (e.g. "hello", 'hello')
• Booleans (e.g. true, false)
• Lists (e.g. 1px solid red)
• Maps (e.g. (key: value))
• Null values (e.g. null)

Using Variable Values in Sass and SCSS

To use variable values in Sass and SCSS, follow these steps:

1. Declare a variable with a value
2. Use the variable in your styles

$primary-color: #3498db;

body {
	background-color: $primary-color;
	color: lighten($primary-color, 20%);
}

$primary-color: #3498db

body
	background-color: $primary-color
	color: lighten($primary-color, 20%)

body {
	background-color: #3498db;
	color: #66b3e4;
}

Sass Variable Default Values

In Sass, variables can have fallback values using the !default flag. This ensures a variable only receives a value if it is not already defined.

• Purpose: Provides a default value when a variable is undefined or null.
• Usage: Set the !default flag during variable declaration in libraries or modules.
• Behavior: If the variable is already defined, the existing value is used; otherwise, the default is applied.

$primary-color: #0000ff !default;
$accent-color:  #00ff00 !default;

/* Override before import (user value preserved) */
$primary-color: red;  // user override

@import '_library.scss';

body {
	color: $primary-color;
	background: $accent-color;
}

$primary-color: #0000ff !default
$accent-color:  #00ff00 !default

/* Override before import (indented) */
$primary-color: red

@import '_library.sass'

body
	color $primary-color
	background $accent-color

body {
	color: red;
	background: #00ff00;
}

Explanation:

• !default sets a fallback value that is only used if the variable is not already defined.
• If you define $primary-color before importing, your value overrides the default.
• If no override is provided, Sass uses the default values from the library.

Understanding Variable Scope in Sass

In Sass, the scope of a variable refers to where that variable is accessible in your code. Depending on where you declare a variable, its value may be available everywhere (global scope) or only inside a specific block (local scope). This behavior affects how the final CSS is compiled.

1. Global Scope – Variables declared outside of selectors, mixins, or functions are available everywhere.
2. Local Scope – Variables declared inside selectors, mixins, or functions are only available within that block.

Sass Global Scope Variables

• Global variables can be accessed anywhere in your Sass or SCSS script.
• They are often declared at the top for consistency across the project.

$primary-color: blue; // global

body {
	color: $primary-color;
}

$primary-color: blue // global

body
	color: $primary-color

body {
	color: blue;
}

Sass Local Scope Variable

• Local variables exist only inside the block where they are declared.
• They cannot be used outside of that specific selector, mixin, or function.

$text-color: #333333; // global

body {
	$text-color: green; // local
	color: $text-color;
}

p {
	color: $text-color;
}

$text-color: #333333 // global

body
	$text-color: green // local
	color: $text-color

p
	color: $text-color

body {
    color: green; // Local variable value used
}

p {
    color: #333333; // Global Value used
}

The outer $text-color is global, inner declaration is local, so p uses the global value.

Use of Sass !global Flag

The !global flag lets you update or declare a variable in the global scope even if it is defined inside a local block like a selector, mixin, or function. This makes the variable available throughout the entire stylesheet.

• Without !global: Variables inside a block are local and do not affect the global scope.
• With !global: The variable gets updated globally and can be reused anywhere in the stylesheet.

$color: blue;

.container {
	$color: red !global; // global scope
	color: $color;
}

.item {
	color: $color;
}

$color: blue

.container
	$color: red !global
	color: $color

.item
	color: $color

.container {
    color: red;
}

.item {
    color: red;
}

$color: blue;

.container {
	$color: red ;
	color: $color;
}

.item {
	color: $color;
}

$color: blue

.container
	$color: red
	color: $color

.item
	color: $color

.container {
    color: red;
}

.item {
    color: blue;
}

The !global flag forces a variable inside a block to update the global scope instead of staying local.