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
Top comments (0)