SCSS Color Variables

While SCSS brings a lot of powerful options to vanilla CSS, variables can be one of the most helpful when it comes to maintaining consistency throughout your web design. Setting color variables makes it easy to reuse colors as you prototype and build your website, without the hassle of remembering every single Hex color code or HTML color name.


Variables in SCSS are prefixed with a '$' sign and can be named whatever you like.



$color-red: #FF0000;

$color-green: #00FF00;

$color-blue: #0000FF;

these examples of Variables are now able to be called in your code with out needing to remember the color code.



h1 { color: $color-red; }

p { color: $color-green; }

a { color: $color-blue; }

As you can see Variables can be very useful in saving you a bit of time as well as making sure things are all the same exact color no matter what page you are on. 

SCSS variables are very powerful, and there are many things that can be done with them beyond color. Such as font styles and families, different breakpoints or transition timings.