SCSS Variables

Now that we are getting into SCSS let's look into using variables and the power that comes with them.

Variables are literally what you expect a definition of a value.

These can contain a wide range in SCSS:

• Strings
• Colors
• Numbers
• Boolean
• Lists

Declaring Variables

To declare variables in SCSS we use the dollar sign \$.

$variableName: value;

Let's define some variables for todays examples:

$fontFamily: Roboto, 'Helvetica Neue', Arial, sans-serif;
$fontSize: 16px;
$primaryColor: #333;
$secondaryColor: #efefef;
$maxWidth: 300px;

We can then use these variables as such:

body {
  font-family: $fontFamily;
  font-size: $fontSize;
  background: $secondaryColor;
}
.box {
  max-width: $maxWidth;
  background: $primaryColor;
  color: $secondaryColor;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

This will then result in the following Codepen.

Overwriting Variables

There is an option to overwrite variables inside an element check out the following use case:

$color: #ef476f;

h1 {
  $color: #ffd166;
  color: $color;
}
p {
  color: $color;
}

What happens here, just inside the H1 we change the color to green, will only make the H1 yellow. The p tag will stay our original color.

There is an option to overwrite the default for good, but I don't know why it exists!

This will give the following Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter