Structuring your Sass Projects

Let’s take a look at how we can structure our Sass projects. As projects grow and expand, the need to modularize our directory and file structure increases dramatically. Thus keeping our files and folders organized is crucial. We also have the added benefit of creating components that can be reused across multiple projects. There is no one “correct” structure — its entirely up to you!

This article follows on from Starting with Sass, were we learned all about the features that make Sass such a powerful tool, as well as how to setup a local Sass development environment.

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page

How do we structure our Sass projects?

We do this by dividing up our stylesheets into separate files using Partials. The separate files will represent different components. We then import our partials using an @import directive, into one master stylesheet — typically the main.scss file. For example:

// File: main.scss
@import 'layout/header';