DEV Community 👩‍💻👨‍💻

Christian Falucho
Christian Falucho

Posted on • Updated on

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;
}
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.

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.