April 2, 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.

|-- 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.

  • Dependencies — Anything that the whole project relies on should go in here. Things like mixin declarations, functions, project wide variables etc.
  • Patterns — A pattern is a modular piece of CSS that could be used anywhere in your application. Things like buttons and alerts should go in here.
  • Sections — Sections are pieces of your project/web app such as authentiction, billing, settings etc. This is where project specific styles should go.

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.

  • Put compiled CSS in a separate folder such as css or dist. This keep things separate and clean.
  • Use Sass variables for things like colours and fonts. This improves maintenance no end.
$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;
  • Don’t use mixins for vendor specific code. Use something like Autoprefixer to keep vendor specific code out of your Sass.
  • Use a build tool like Grunt to lint and compile your Sass on the fly whenever a change is made. You can also use Grunt to autoprefix, concatenate and minify your compiled CSS.

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:

Looking for more?

Subscribe to my newsletter to get infrequent updates in your inbox. Or follow me on Twitter.