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.

https://codepen.io/rebelchris/pen/zYrVxrp

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.

https://codepen.io/rebelchris/pen/OJMePbP

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

SCSS Variables

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Declaring Variables

Overwriting Variables

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Declaring Variables

Overwriting Variables

Thank you for reading, and let's connect!