Variables
One of the main reasons SCSS is better then regular CSS is the fact that it uses variables. You can give variables information that you can later use again. This can come in handy if you use for example the same background-color on multiple divs. If you at some point want to change that background-color of all the divs you can do that by editing the variable instead of going to all the divs.
Requirements
- Completed the SCSS Setup tutorial
Ok first lets make an SCSS file like the one below.
body{
background-color:red;
border:1px solid white;
}
div1{
background-color:red;
border:1px solid white;
}
div2{
background-color:gray;
border:1px solid white;
}
You can see that they almost are the same but if we want to change the border we have to do that 3 times. Now here is how variables work. At the top of you SCSS file you can make a variable like this:
$border-main: 1px solid white;
$background-main: red;
Now if we go back to our SCSS code from above we can change it to this:
$border-main: 1px solid white;
$background-main: red;
body{
background-color: $background-main;
border: $border-main;
}
div1{
background-color: $background-main;
border: $border-main;
}
div2{
background-color:gray;
border: $border-main;
Now everything will look the same as it was but if you change the border-main variable to for example 1px solid green all the divs that use that variable will use green borders.