What if there’s a bug in our code? It happens to the best of us. We can generally say that there are two kinds of bugs we can encounter. One is a syntactical error made while writing the Sass—that is, we may have passed in the wrong number of arguments to a function. Luckily, Sass makes finding these mistakes a breeze. The Sass development team has worked really hard to make sure that the error messages make as much sense as possible.

On top of that, if you have an error in your Sass code, it won’t just keep quiet. Sass could have failed silently, where you would reload the page you are styling and all of a sudden it would be unstyled. Sass doesn’t play that way. Sass loves you! Sass will generate a special CSS style sheet that will actively print out the message on the page you are styling. It uses the fun CSS trick of using the body:before selector and the content property to inject the error right on the page!

We also have ways to debug more complex issues. When generating the Sass, we can pass in options to help us out. The line-comments option causes every selector in the CSS file you create to have a reference to the file and line number where it came from. This is especially useful when you are importing many files and want to see where a particular rule is defined.

Another option available is debug-info, which produces a more browser-friendly version of the line-comments option. In particular, it works well with an add-on to Firefox called FireSass for Firebug.^[7]

There are many different ways to run Sass—maybe with Rails or the command-line interface or an integrated development environment (IDE)—and each has its own specific way of setting Sass options. The references provided in the book should be a good starting place.

• Write some invalid Sass.

  advanced/debug_error.scss
  ​	​@import​ ​"notfound"​

• See an error page!

  If you include the resulting CSS file in a web page, you’ll see this in your web browser when you load the page!

  ​	Syntax error: File to import not found or unreadable: notfound.
  ​	Load paths:
  ​	/Users/hcatlin/dev/hcsass/Book/code/advanced
  ​	/Users/hcatlin/dev/hcsass/Book/code/advanced
  ​	on line 1 of ./debug_error.scss
  ​
  ​	1: @import "notfound"

• Compile with the line-comments option.

  ​	$> sass --line-comments nesting.scss
  ​	/* line 2, nesting.scss */
  ​	.infobox .message {
  ​	border: 1px solid red; }
  ​	/* line 4, nesting.scss */
  ​	.infobox .message .title {
  ​	color: red; }
  ​	/* line 6, nesting.scss */
  ​	.infobox .user {
  ​	border: 1px solid black; }
  ​	/* line 8, nesting.scss */
  ​	.infobox .user .title {
  ​	color: black; }