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.

Setting up your SCSS color variables

If you're not familiar with variables in SCSS check out this guide for a quick overview (but honestly they're pretty straightforward). Variables in SCSS are prefixed with a '$' sign and can be named whatever you like. Here we will set up a few basic color variables to be used later on in our stylesheets. 

SCSS

$color-red: #FF0000;
$color-green: #00FF00;
$color-blue: #0000FF;

Remember, in order to use variables, or any of the benefits of SCSS for that matter, the stylesheet must have the '.scss' extension, and a preprocessor must be part of your website build system. For more info on getting started, check out how to install Sass.

Using SCSS variables in your stylesheets

Now that we've defined some color variables, it's time to put them to work. You can use SCSS variables just like you would the normal values for any CSS property, just make sure to include the '$' sign prefix to indicate variable status. 

SCSS

h1 { color: $color-red; }
p { color: $color-green; }
a { color: $color-blue; }

This will output CSS with whatever you initially defined as the variable's value, in our example the output will look like this: 

CSS

h1 { color: #FF0000; }
p { color: #00FF00; }
a { color: #0000FF; }
Demo on CodePen

SCSS variables are very powerful, and there are many things that can be done with them beyond color. Try using them for font styles and families, different breakpoints or transition timings. Go wild!