Only define a color once

When working with Sass it's a perfectly reasonable aim to only define an individual color value once and then store it as a variable. The benefit of this approach is that if the color value needs to change, it only needs amending in one place, as it will propagate to all the necessary places on compile.

In the previous chapter, when making the testimonial module in the _modules.scss partial, instead of referencing a variable for a color value, a hex value was used. Following is some of that code:

.testimonial {
  background-color: #eee;
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  padding: 1em 2em;
  ...more code...
}

There are two hex values being used in the preceding section, #eee and #ddd, and both are shades of gray (I'll resist the urge to insert a book pun here, oh wait). Instead of those hex values we will use the lighten color function of Sass to generate the colors from an existing color in the variables. Here are the colors currently defined...