SCSS Variables

— 3 minute read

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.

See the Pen SCSS Variables by Chris Bongers (@rebelchris) on 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.

See the Pen SCSS Variables #2 by Chris Bongers (@rebelchris) on 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