How should we structure our Sass projects?

Overview #

Let’s take a look into how we structure our SASS projects.

As projects grow and expand, the need to organize our directory structure increases dramatically. SASS helps us achieve this by giving us the ability to modularize our stylesheet code. We also have the added benefit of creating components that can be reused across multiple projects. Adding a further element of structure & organization.

How do we structure our Sass projects? #

We do this by using Partials (which we introduced earlier) to divide up our stylesheets into separate files. These 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';

We can then create a layout folder for our layout specific files, such as:

// File: _header.scss

// This file contains all styles related to the header of the site/application.

/* STYLES GO HERE */

Remember: The name of a partial file should always begin with an underscore _.

Next up, let’s take a look at some of the ways we could choose to structure our projects!

Let’s keep in mind that there is no one correct structure — it’s entirely up to you!