SASS Variables - Define and Use of SCSS Variable

1. What are SASS Variables?

Just like any other programming language, variables in SASS programming are helpful to store the data. In large documents, when data is abundant and there is much need to add functionalities and variations, a variable plays its role. The SCSS variables store data of different types according to requirement. Further, that data is accessed by calling the variables anywhere according to its scope and availability in SASS stylesheet. In this tutorial, we will discuss defining a SASS variable, its use, built-in variables, and the local and global scope. Also, we will learn how to set default values for variables using the SASS library.

1.1. How To Define SASS Variables?

It is interesting to note that we can declare a SCSS variable just like defining a PHP variable. Thus, the syntax of a SASS variable is easy and we can define it just by typing the dollar sign $ and the name of the variable after the $. Hence, any name with the dollar sign $ in its beginning will behave as a SCSS Variable. See the instance below to understand the syntax and declaration of a SCSS variable.

$variable-name : variable-value;

We can define a variable just like we declare a CSS/SCSS property.
property-name: property-value;

1.2. Benefits Of Using Variables

Luckily, there are a lot of advantages to using variables in a programming language. In SASS programming, Variables are the most powerful tool and have certain privileges over using static data. Below are the benefits of SCSS programming variables.

• Firstly, they reduce data repetition
• Saves time by reducing repetition
• Further, they can store any type of data and information
• Store the data with a suitable name and use that short name without writing the whole piece of data
• Also, no need to remember the values, just use the variable instead
• Moreover, a variable allows us to perform operations and functions on the data and produce useful results

1.3. What are Data Types in SASS Programming?

Just like PHP programming, there are certain data types in SASS language. Also, a variable in SASS programming can hold only thse types of data while declaration. Below are the seven types of data that a SCSS variable can store.

1. Strings
2. Numeric Values
3. Booleans
4. Null
5. Color Values
6. Lists
7. Maps

2. How to Use SASS Variables?

While coding in SCSS, in order to use a variable, we have to first declare it. Since, we have seen the declaration in the above example, let us understand the use of SASS variables within our stylesheets. As, there are two types of SASS syntax, the below example uses the SCSS method to illustrate the variables.

/**
* Below are some variables defined for use in the style declaration
* These will be used in place of values
*/
$site-heading-color: #333333;
$site-background-light: #f8f9fa;
$site-background-dark: #153966;
$site-font-family: 'Noto sans', sans-serif;
$site-text-size: 16px;
$site-text-dark: #000000;
$site-text-light: #ffffff;

body {
	background: $site-background-light;
	color: $site-text-dark;
	font-size: $site-text-size;
	font-family: $site-font-family;
}
h1, h2{
	color: $site-heading-color;
}
.class-name{
	background: $site-background-dark;
	color: $site_text_light;
}

body {
	background: #f8f9fa;
	color: #000000;
	font-size: 16px;
	font-family: 'Noto sans', sans-serif;
}
h1, h2{
	color: #333333;
}
.class-name{
	background: #153966;
	color: #ffffff;
}

As you can see in the above example, the variables have descriptive names. Thus, it is easy to declare and use them in stylesheets.

After writing declarations, a SCSS transpiler helps in compiling into equivalent CSS properties. The above SCSS code on the compilation will produce the styles in the adjacent tab. Which we can further use to define our stylesheets and design the documents.

3. SASS Default Values For Variables

In writing a programming script, it is usual that when we define a variable if it has any previous value that will be vanished. Thus, the new value will be assigned to that variable. However, in SASS script, the variables can have some default values that serve as fallback values.

Further, we do this while writing the SASS library configuration and defining the default values for the variables. Importantly, this is done using !default flag. Also, the default values act as fallback values for the variable. If the variable has a null value or is not declared, the default values will be implemented.

3.1. Configuring and Using Default Values

Variables can be configured with the !default flag during the style declaration of a module. We do this by @rule to configure the variable values which have !default flag. See the below instance to understand.

$main-color: #2a73cc !default;
$border-left: 10px solid $main-color !default;

div {
	border-left: $border-left;
}

@use 'librarySASS' with (
	$main-color: #153966
);

Since it is seen that a value is defined for the variable $main-color i.e. #153966. Therefore, the final CSS declaration will use the newly assigned value and ignores the librarySASS value.

However, if there were no value of $main-color, then the fallback value #2a73cc would serve the purpose. The above SCC code transpiles into the below CSS-style declarations.

div{
	border-left: #153966;
}

3.2. SASS Built-in Variables

There are certain variables in SASS language that have built-in values and their default configuration cannot be altered.

@use "sass:math" as math;
/*
* This will produce an error
* As $pi holds a unique value of 3.1415...
*/
math.$pi: 0;

4. Scope of Variables In SASS

The scope of variables in SASS programming depends upon the place where it is declared. This scope let the transpiler choose the value for final declarations. See the below example to understand the scope of SASS variables.

$border-color: green; // global border-color
$heading-color: darkgreen; // global heading-color
.welcome{
	border-left: 5px solid $border-color;
	color: $heading-color;
}
.check-out{
	$border-color: blue; // local border-color
	$heading-color: darkblue; // local hading-color
	border-left: 5px solid $border-color;
	color: $heading-color;
}

.welcome{
	border-left: 5px solid green;
	color: darkgreen;
}
.check-out{
	border-left: 5px solid blue;
	color: darkblue;
}

4.1. SCSS Variable Scope Explained

As illustrated in the above declarations, the border-color and $heading-color variables are declared outside the rule. Also, these variables are also declared inside the .check-out class. Thus while parsing the SCSS code, the parser will produce the below CSS declarations.

Those block rules, which have their own $border-color and $heading-color definitions, will use their own values. Whereas, those without having any declarations, will use the values outside the rule declaration.

4.2. Local SCSS Variables

In the above example, the SASS variables inside curly braces {} have local scope and are available to that block only. These are called local variables. If the same variable inside and outside the curly braces is defined, this is called shadowing.

4.3. Global SCSS Variables

Those variables, outside the rules and curly braces are known as global variables. They are accessible and available everywhere within that stylesheet.

4.4. Use of SCSS !global Flag

Luckily, there is another way to override the variable scope of the global variable. If we use a !global flag or switch inside curly braces or declaration, the global variable with a similar name will get a new value. Look at the below example to understand this !global flag feature.

$my-color: #000000;
.new-customer{
	$my-color: #ffffff !global;
	background: $my-color;
}
.old-customer{
	background: $my-color;
}

.new-customer{
	background: #ffffff;
}
.old-customer{
	background: #ffffff;
}

The equivalent CSS declaration that is generated in the adjacent tab.