Writing your own custom SCSS code

Now that you know the basics of Sass, you are ready to start your own custom CSS code. Remember the blog website layout I showed you at the start of this chapter?

As you already have seen in Chapter 2, Creating Your Own Build Process with Gulp, we do not only modularize our CSS code but also the HTML code. The HTML templates are compiled with Panini and can be found in the html folder of our project.

The color scheme

You will start your project with a color scheme. Open the scss/includes/_variables.scss file. This file contains a copy of Bootstrap's variables. You can remove these variables since we'll use Bootstrap's defaults with a few exceptions.

Now write the following SCSS code in the scss/includes/_variables.scss file:

$primary-color-dark:   #303f9f; 
$primary-color:        #3f51b5; 
$primary-color-light:  #c5cae9; 
$accent-color:         #ff5722; 
$accent-color-light:   #ffab91; 
$dark-color:           #000; 
$light-color...