Welcome!

Welcome to the Pragmatic Guide to Sass. Sass (Syntactically Awesome Style Sheets) enables you to do amazing things with your style sheets, helping you describe how HTML is laid out on a web page. Sass is an alternative way of writing CSS.

“What’s wrong with regular ol’ CSS?” we hear you cry. The fact is that CSS, with all its power and elegance, is missing some crucial, simple elements that other types of development take for granted. CSS can also be a bit complicated to read: Sass fixes that.

Most programmers are familiar with the concept of DRY—Don’t Repeat Yourself. It saves time and effort when writing code. A core philosophy of Sass is to reduce repetition in style sheets, and we’ll be coming back to DRY a few times throughout the guide.

Sass isn’t really a replacement for CSS—it’s a way to help us write better CSS files, which is essential for large projects. Sass helps us write clear, semantic style sheets. Sass updates CSS development for the future.

Hampton originally designed Sass while he was working at Unspace in Toronto, and Nathan Weizenbaum and Chris Eppstein now maintain it. A lot of Sass functionality depends on Ruby. (But don’t worry, we’ll learn how to install Ruby in Part 1, ​Basics​.)

In this book, we’ll be using the word Sass as an overarching concept that describes the engine we use to convert our files into CSS. We can use two syntaxes to write Sass—SCSS and Original Sass. These will be described a bit later in this preface.