Sass Variable handbook: A complete guide to Sass Variable
By: Md Shahab Uddin
Tags: Scss, Web Design, Sass, CSS, HTML

Photo by Smart on Unsplash

We all are familiar with variables. But Sass Variable is magic like no other. It makes your web development fun and engaging. There are lots of ways to use Sass Variable. Let’s explore this.

Make your life easy

Look at this code,

p {

background-color: #445522;

letter-spacing: 2px;

}

h1 {

background-color: #445522;

letter-spacing: 2px;

color: black;

text-transform: uppercase;

}

I used the same background-color and letter-spacing in both p and h1 tags. But in a real project, you will write the same value in many different places. If you want to change a small thing like color, then you have to go to every selector which has color property and change its value. You don’t want that, do you?

Here Sass variable rescues you. you can code like this.

$background: #445522;

$letter: 2px; p {

background-color: $background;

letter-spacing: $letter;

}

h1 {

background-color: $background;

letter-spacing: $letter;

color: black;

text-transform: uppercase;

}

Now if you change your mind to use another color/letter spacing, just change the value once in the variable and it will be applied for all selectors.

I think, now at this point you know ,how to declare saas variable and assign them.

Naming Rules of saas variable

You can use Number(0–9), Underscore(_),hyphen(-) such as primary1, text_color, text-transform; ASCII letters, Unicode hex escape sequences such as 00E4 ASCII punctuation (!”#$%&’()*+,./:;<=>?@[]^{|}~) and spaces, if escaped with a backslash Unicode characters in the ranges 0080-D7FF, E000-FFFD, or 10000–10FFFF

But my suggestion would be to use small, explanatory, simple names with a hyphen, underscore, and number. Avoid hex code, Unicode characters

!Default Flag

We can add “!default” at the end of the variable declaration and see these effect;

IF the value is already assigned, it will not be reassigned

If there is not value, the default value will be assigned

Using !default flag in mixins

We can use !default inside mixins to override the global variable’s value

As the “primary” variable is already assigned, mixin can’t override its value to yellow. IF we remove, global variable “primary”, then the default flag will work and override its value to yellow.

!global Flag

As we know, All variables declared outside of any selector is called a global variable and variable declared inside any selector is called a local variable. A local variable is only accessible inside the selector in which it was declared.

Inside the body tag, we declared primary color which is accessible to only inside the body tag, because it is a local variable.

As we know, if we declare a variable outside of any selector, it is a global variable and if declared inside a selector, it is called a local variable. But, if you use !global flag, it will act as a global variable. In this way you can change/override the global variable value from inside the selector;

!global flag in mixins and functions

Variables in mixins and functions are always local. IF we want to use a global variable to use inside a mixin, it’s not possible.

In order to use the global variable, we need to write code this way;

IF we redefine a global variable inside the mixin, this will affect the following variable but it will not affect the global variable.

Variable interpolation:

YOu can use a variable in CSS property by interpolation.

Look at the above example, I hope you now know how interpolation is used in the sass variable.

2 interesting facts about Saas Variable

1) Changing variable value doesn’t change the previous value

Sounds tough? Don’t worry. From saas documentation, we know that “Sass variables are imperative, which means If you use a variable and then change its value, the earlier use will stay the same. CSS variables are declarative, which means if you change the value, it’ll affect both earlier uses and later uses. Let’s see an example:

Process:

1)We declared a variable called “value” which value is red

2) we used this variable In the h1 class and got red. Perfectly fine.

3) We redeclared this variable and changed its value to green. THen used this value in the h2 tag. But we got green not red. Because in Saas variable earlier value remains the same.

But if we did the same thing in CSS, it would be like this:

First, h1 becomes red. But, when we redeclare value, then every time we use that variable, It takes the last value declared, In this case (.h1 class, .h2 class, and .h3 class ) all becomes gree because last value is green)

2) Underscore and the hyphen is the same in Sass

Look above,

During variable declaration, we used a hyphen in font size. But inside h1 we used underscore. The fact is that it didn’t harm our code because, in saas, hyphen and underscores are the same.

But that doesn’t mean that you can write this:

font_size : 25px

As this will not give any output and shows error