How to structure a Sass project

When you start out with Sass it is very easy to use it much like you do CSS without leveraging some of the more useful features. For myself I used it for a long time without realizing much of its true power. In this brief article I’d like to show you how I structure my Sass projects and give you some practical pointers to a couple of open source projects where you can learn more.

I typically store my Sass source in stylesheets/sass. The Haml/Sass plugin for Rails encourages this arrangement. Sass source is stored there and compiled to the stylesheets directory. You don’t have to set it up this way (particularly if you are not using Rails), but this setup works pretty well for me.

In the root of my stylesheets/sass directory are the main Sass files that will be converted directly into CSS files. Files like screen.sass, print.sass, and blog.sass.

Partials

I also have a directory for partials. In my partials directory I store snippets of CSS that are incorporated into other stylesheets through the Sass import</tt> directive. The <tt>import directive works somewhat differently in Sass than it does in CSS. Instead of telling the Web browser to download another CSS file, it inserts the source code from the specified file directly into the generated CSS. Sass partials begin with an underscore (_). This tells Sass that it doesn’t need to generate a corresponding CSS file in the output directory, but that the code in the Sass source file is used in other Sass files. I typically have partials for each of the major sections of my CSS: header, navigation, main, footer. I also tend to have one called layout where I store layout oriented rules. The exact names of the partials I choose depends on the project, the main idea is to break your stylesheets down into manageable chunks.

Modules

The second directory that I have is reserved for modules. My modules directory is filled with Sass partials containing mixins. I reserve modules for highly reusable Sass code and have a great variety that I typically use when getting started on a new project. Some of the modules are customized greatly for each project (like typography and forms), while some of the modules are the same on every project. I’m doing a lot with CSS3 these days so I like to have an assortment of CSS3 modules for doing things like gradients and rounded corners. I also have a modified version of a reset module that I stole from Compass which helps start on the right foot with all browsers.

Example Projects

The image above is showing the stylesheet directory structure from the Sass for the Radiant Extension Registry. One of my more recent projects, this is a great example of how to structure your Sass projects. You might also check out the prototype project for Radiant as it uses a similar structure, but doesn’t have as many goodies. And there is also Octopress, which has a slightly different philosophy but is also an excellent example of a well organized project. I’d also recommend that you browse around in the Compass repository as there are a buch of great ideas there.

Are there other examples of Sass projects out there that you have found particularly helpful? Are you finding that Sass is easy to pick up? Are there things from my experience that you would like to learn more about?

© 2013 John W. Long