SCSS Features - Variables

SCSS Features - Variables

This is the 1st part of a series where I will show you why I love using SCSS preprocessor for developing awesome styles for my projects.

What is SCSS?

SCSS/SASS is a preprocessor that will generate pure CSS files after every build.
As the developers at sass-lang write:

CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has features that don't exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help you write robust, maintainable CSS.

Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website.

It means you can write your CSS files with awesome functionalities that are provided by SASS.

Is it SASS or SCSS?

For the record, I will refer to the Sass language preprocessor as SCSS from now on. The main difference between them is the syntax they use. Both of them will compile to CSS in the end.
SASS stands for Syntactically Awesome Stylesheet
and SCSS stands for Sassy Cascading Style Sheets.

Variables

In SCSS, variables are used to store reusable values such as font sizes, colors, spacings, or any other CSS properties. You can just define its value once and use it multiple times in your stylesheets.

In SCSS you have to use the $ symbol followed by the name of your variable and then assign it a value.

$primary-color: #FE5E00;
$font-size: 16px;

.my-base-text{
    color: $primary-color;
    font-size: $font-size;
}

In this example, we just created 2 variables that will hold our primary color and the base font size values. After that, we could use them as we want in our whole stylesheet.
Here is the generated CSS file from this example:

.my-base-text{
    color: #FE5E00;
    font-size: 16px;
}

Scope

Variables also have Scope in SCSS. That means if you declare one at the top of your stylesheet, that variable will be global and it can be accessed everywhere inside your stylesheet.

$text-color: #FF0000;  // This is a global variable

.my-base-text{
    $font-size: 24px; // This is a local variable

    color: $text-color;
    font-size: $font-size;    
}
.my-secondary-text{
    color: $text-color;
    // This will throw an ERROR,
    // because $font-size variable doesn't exist here
    font-size: $font-size; 
}

As you can see in the .my-secondary-text class, the $font-size variable doesn't exist, so the preprocessor will throw an error because we declared it inside the
.my-base-text class as a local variable.

Shadowing

Local variables can be named as any other global variable, but in this case, there will be 2 variables with the same name. One will be a global one and the other will be a local variable.

$text-color: #FF0000; // This is a global variable

.my-base-text{
    $font-size: 24px;
    $text-color: #00FF00; // This is a local variable

    color: $text-color; // The text color will be: #00FF00
    font-size: $font-size;    
}
.my-secondary-text{
    color: $text-color; // The text color will be: #FF0000
}

But CSS3 also has its own variable functionality

I know, I know! CSS3 also has that kind of functionality with the var() function. The main difference between them is that when you're using SCSS variables, the preprocessor won't increase your stylesheet size because variables alone can't be compiled into CSS.

Here is an SCSS version of the variables and the compiled CSS file.

$primary-color: #FF0000;
$font-size: 16px;
/* Nothing to compile */

Also, CSS3 variables have their advantage in other fields, but that's another topic.