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 as a definition of a value.

These can contain a wide range in SCSS:

• Strings
• Colors
• Numbers
• Boolean
• Lists

Declaring Variables permalink

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

$variableName: value;

Let’s define some variables for today’s 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.

See the Pen SCSS Variables by Chris Bongers (@rebelchris) on CodePen.

Overwriting Variables permalink

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, inside the H1, we change the color to green, which 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.

See the Pen SCSS Variables #2 by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect! permalink

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