O'Reilly logo

Mastering Sass by Luke Watts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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%, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required