Using the SCSS-linter for cleaner and more readable code

In Chapter 2, Creating Your Own Build Process with Gulp, you can read about how to integrate the SCSS-lint tool in your build process. You can also use this tool on the command line to check your code.

The SCSS-lint tool not only checks the syntax and code style but can also help you to write more reusable code. When you enable the  ColorVariable check in your configuration file, you'll get a warning when you use hardcoded color values in your code. Assigning colors to variables is better in most cases because this enables you to reuse the color values and change them only in a single place.

Notice that you also should choose your variable names with care to write readable and reusable code.

Note

Some hints can be found at http://webdesign.tutsplus.com/tutorials/quick-tip-name-your-sass-variables-modularly--webdesign-13364 and http://sachagreif.com/sass-color-variables/.

Bootstrap itself also uses the two-tier system, with both functional...