DEV Community

Cover image for SCSS Variables
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

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;
Enter fullscreen mode Exit fullscreen mode

Let's define some variables for todays examples:

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

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;
}
Enter fullscreen mode Exit fullscreen mode

This will then result in the following Codepen.

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

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

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

Top comments (0)