Variables in SCSS allow you to assign an identifier of your choice to a specific value.
Why is that useful? Unlike in CSS, if you need to tweak a value, you’ll only have to update it in one place and the change will be reflected in multiple rules.
$ is used to define and reference a variable:
Note: It’s important to stick to one naming convention for variables when you first build out your codebase. This will help you reference them easily in the future.
At the top of main.scss, create a new variable:
Reference that variable as the value for the
background-color property inside the
Click “Run” to see your changes in the browser and inspect the output in main.css.