Gilbert Pellegrom Gilbert Pellegrom

2nd April 2015

Structuring Sass for Web Apps & Larger Projects

I’ve been using Sass (specifically Scss) as my preprocesser of choice for some time now and it’s invaluable for taming your CSS when building larger projects (such as web apps). On a smaller project you can get away with maybe a couple of .scss files, however once your codebase grows things can get messy fast. But how should you structure your Sass projects?

Directory Structure

The main thing to do is sort out your directory structure. This is how I normally split things up.

sass/
|
|-- dependencies/
| |-- \_fonts.scss
| |-- \_mixins.scss
| |-- \_reset.scss
| |-- \_variables.scss
| ...
|
|-- patterns/
| |-- \_alerts.scss
| |-- \_buttons.scss
| |-- \_forms.scss
| ...
|
|-- sections/
| |-- \_base.scss
| |-- \_auth.scss
| |-- \_billing.scss
| |-- \_settings.scss
| ...
|
\`-- style.scss

As you can see this divides the structure of the project into three basic types of files. Dependencies, patterns and sections.

Primary Stylesheet

This allows you to keep your primary stylesheet (style.scss) very clean. The only thing that should go in here is @import statements.

/* Dependencies */
@import "dependencies/fonts";
@import "dependencies/mixins";
@import "dependencies/reset";
@import "dependencies/variables";

/* Patterns */
@import "patterns/alerts";
@import "patterns/buttons";
@import "patterns/forms";

/* Sections */
@import "sections/base";
@import "sections/auth";
@import "sections/billing";
@import "sections/settings";

Hints & Tips

Here are some other hints and tips to help you structure your Sass and keep things clean.

$font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
$font-family-headings: “Circular-Medium”, Helvetica, Arial, sans-serif;

$color-bg: #fff;
$color-text: #333;
$color-text-muted: #9ea1a4;
$color-accent: #1ba7d5;

Further Reading

So that’s how I normally structure my Sass for web apps and larger projects. But what is here is tailored to how I make stylesheets. Take this as a suggestion and make it your own. Or check out how others do it and have a look at some Sass frameworks: