Sass in Depth project
CSS JavaScript
Switch branches/tags
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Sass in Depth book project

In our lives, whenever we encounter a great experience whether it be a great movie, a vacation location or a technology toolset, our desire is to share it with everyone we encounter. That is how we feel about Sass and that's why we decided to write a book. There have been plenty of introductory books on Sass, shameless plug read: Sass and Compass in Action by Manning Publications, however we felt that our field was missing a more advanced book—a book that goes beyond the basics of Sass and lays the proper groundwork for a project using Sass. The journey has been great. We are excited to share with you what we have learned and look forward to adding topics as soon as they meet our standards. We also love your feedback. Let us know if we need improvements or require additional information.

Sass in Depth is targeted to those who have learned the basics of Sass, have a working knowledge of CSS and are looking to expand their knowledge of Sass to implement it in their current development environment.

An example project

When we set out to write this book, the one thing that we wanted to bring to our readers that most others do not, is a great example project to follow along with. Sure there will be examples within the the chapter, but these context specific examples don't tell the whole story. Working Sass into a real life project is challenging and learning Sass' API is only half the work.

While we set out to illustrate a project in progress with common faults, we didn't want to burden you with a totally screwed up project either. And trust me, we have more then enough examples to pull from. There are plenty of good habits in the project and we will be sure to point those out.

We join this regularly scheduled project already in progress

Let's face it, the majority of projects we work on, we don't get to toss all the code and start over. With our example project we are trying to set the stage to illustrate what it may be like to come into an existing project that is not using Sass and be tasked with converting it.

Our example project is a standard one-page web site with commonly used frameworks and practices. Eric Meyer's Reset (, HTML5 Boilerplate (,, and are all great tools and we make heavy use of them in this project. The trouble with 'bolt-on' resources is that they lack cohesiveness. Without this, building on top of these libraries quickly tailspins out of control.

I would also argue that you are not using all the code in these libraries. I know we aren't. The trouble with CSS, whether you use it or not, it gets sent to the client. So shipping hundreds, if not thousands, of lines of code that has no real importance to your production project is a maintenance nightmare.

Aside from unwanted code bloat, the most egregious of all transgressions is the abundant use of in-line styles. And these are not rookie mistakes, but code written by seasoned developers. Why does this happen? My theory; it's the lack of a real fundamental structure, dependency on frameworks and lack of understanding 'where' to put new code that leads to in-line styles.

Follow along

Following along with the project will be simple. The entire project will be made available on Github (

We will be using Github Tags to illustrate at what stage of the project you should be referring to. For example, we will start out out with the project-start tag located at

As the book addressed techniques we will have a URL that takes you directly to the version of the project and the code we want you to look at.

At any point you may visit the repo, click on the Branch Select drop down menu, click on the Tags tab and check the desired tag. It is encouraged you learn how to move between tags so that you can see the differences in the code.

We hope that the reading and coding experience is one that you enjoy.

— Dale Sande and Kianosh Pourian