Introduction

Sass helps you to write better, reusable, and more readable CSS. When writing, you should check any syntax and solve errors found when compiling your code. Although your CSS is valid, the compiled CSS code should be tested on different devices and browsers.

In this chapter, you will be introduced to CSS source maps that will help you find the source files of origin for the style rules of a certain HTML element in your page. You will also learn how to edit your Sass code in a browser.

Good code also contains constructive comments that make your code clearer for others. Adding comments to your code is the topic of the third recipe of this chapter.

Automated testing, as required for Test-driven Development (TDD), can be done with tools, such as Wraith (https://github.com/BBC-News/wraith) and Huxley (https://github.com/facebook/huxley). As well as these tools, you can also use style guides. Style guides show you the visual effect of your CSS code. In the fourth and fifth recipes, you can read about how to generate your style guides.

The sixth recipe describes how to use @debug, @warn, and @error directives to debug your code and force the correct usage of more complex code structures.

In the last recipe of this chapter, you will get to work with SassMeister, a playground for Sass, Compass, and LibSass.