CSS: The Missing Manual, 4th Edition

Chapter 19. More Powerful Styling with Sass

You’ve learned a lot about CSS so far in this book. In the last chapter you learned techniques for being a better style sheet author. In this chapter, we’ll look at a very popular tool that makes it a lot easier to write CSS code.

What is Sass?

Sass is known as a CSS preprocessor—that means you first write Sass code, then process it into the CSS the browser understands. You can think of Sass—which stands for “Syntactically awesome style sheets”—as a kind of shorthand for CSS that lets you write less code.

When working with Sass, you have two different types of files: Sass files, which end in .scss, and CSS files, which (as you know) end in .css. You actually only ever edit the .scss files: Sass’s preprocessor automatically converts the Sass file to a regular .css file.

This may sound like a lot of extra work to simply produce the CSS code you’ve learned about in this book. However, as your sites and their style sheets get larger and more complex, Sass provides a number of benefits:

• It organizes your CSS code into smaller files. Currently, web designers are told to use as few CSS files as possible. The more files the browser has to load, the slower the site will feel to visitors who must wait for each file to transfer from the web server to their browser. Some web designers, therefore, stuff hundreds or even thousands of styles into a single style sheet. While this may be more efficient for your site visitors, it’s not easy for you when you ...