DEV Community

loading...

Day 13 of #100DaysOfCode!

Christian Falucho
Passionate about building websites and web applications that can be used by millions of people. I hope to build tools that can help people.
Updated on ・1 min read

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)