April 2, 2015
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?
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.
This allows you to keep your primary stylesheet (style.scss) very clean. The only thing that should go in here is
/* 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";
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;
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: