Mastering Sass

Color scheme

The next part of our theme is creating a color scheme. We'll use two to three main colors which we'll place in variables. We'll then create a $theme map which we will use throughout our colors Sass file. This will allow us to easily switch themes by simply modifying our $theme map in future.

Let's first add a file called _color.scss in the scss/theme directory. Inside that we'll start to add our variables:

$red: hsl(0, 57%, 60%) !default; 
$dark-grey: hsl(0, 3%, 22%) !default; 
 
$theme: ( 
    color: ( 
        primary: $red, 
        secondary: $dark-grey 
    ) 
) !default; 

You should also place them at the beginning of the scss/style.scss file as we've been doing with all of our variables so far:

// scss/style.scss $red: hsl(0, 57%, 60%); $dark-grey: hsl(0, 3%, ...