This allows us to rewrite our SCSS like this:

Because variable names such as $lightGray are more descriptive than #999, it’s often useful to define variables even for values that aren’t repeated. Indeed, the Bootstrap framework defines a large number of variables for colors, available online on the Bootstrap page of LESS variables. That page defines variables using LESS, not Sass, but the bootstrap-sass gem provides the Sass equivalents. It is not difficult to guess the correspondence; where LESS uses an ‘‘at’’ sign @, Sass uses a dollar sign $. Looking the Bootstrap variable page, we see that there is a variable for light gray:

This means that, via the bootstrap-sass gem, there should be a corresponding SCSS variable $grayLight. We can use this to replace our custom variable, $lightGray, which gives  

Applying the Sass nesting and variable definition features to the full SCSS file gives the file in Listing 5.15. This uses both Sass variables (as inferred from the Bootstrap LESS variable page) and built-in named colors (i.e., white for #fff). Note in particular the dramatic improvement in the rules for the footer tag.