# 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 \$.

```css
$variableName: value;
```

Let's define some variables for todays examples:

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

We can then use these variables as such:

```css
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:

```css
$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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)