How it works...

Note the CSS comment at the top of the main-03-05.scss file. This comment was placed there so as to make it easier to remember the original .blockquote settings as specified in _type.scss. Knowing the logic of the original file allows us to better understand how to use the code in the recipe.

Note that the $white variable is set to white. This is its default value, but it is placed there as another reminder since the next line changes the value of $white to HTML color darksalmon. Commenting out the first value, and uncommenting the second one, will quickly show us an interesting color scheme in our browser.

Finally, several SCSS variables are overwritten. Background is set to white on all .blockquote elements (in contrast to the previous recipe). A custom variable of $faded-green is declared on line 16 and used in the .blockquote declaration on lines 20-22.

Finally, note that in order to view the previous recipe again (Customizing the blockquote element with CSS) the way it was meant, you would have to comment out the @include for main-03-05.scss in main.scss, and run grunt sass and harp server again.