Day 13 of #100DaysOfCode!

Today's progress

I decided to change things up for today and learn SASS.

What I learned

SASS stands for (Syntactically Awesome Style Sheet). Which is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more.

SASS uses variables to store data. First, you declare them, store the data and then use it. The syntax it uses for storing variables is $ followed by the variable name $variableName.

Using variables

$headings-color: blue

h1{
 color: $headings-color;
}

In the above SASS example. We declared a variable $headings-color which will store the color blue. Then we have the tag name h1 and set the color to the variable name. This will set all h1 elements to the color blue.

Using variables is a good way to managing multiple element's values. You can imagine if you have elements with the same color. All you need to do is change the variable's value and will be able to change all the elements that have the variable name.