How to Structure Your Sass Project

Why a clean Sass project structure is beneficial.

As we develop our projects over time, the directories and structure of those projects can expand beyond manageable states without appropriate planning pretty quickly. The idea of modularization should be one that developers become comfortable with as early as possible.

Modularization gives us the chance to reuse our created components across a project, or even on multiple different projects. I will however admit that there is no perfect or correct structure, I’ve always done what’s worked for me and that’s what I’ll be sharing with you today, but don’t be afraid to make any changes where you deem necessary to the structure I provide.

So, how do we go about structuring our Sass projects?

We structure our stylesheets by separating them into their own components called partials, .i.e. _buttons.scss. Whilst having our partials, we also have a single main stylesheet of which our partials are imported to, this is typically called main.scss.

It’s worth noting that partials are always prefixed with an underscore _ as seen above with _buttons.scss, except when importing, but more on this soon.

The main.scss file

This file is where all of your partials will be imported, it should not contain anything else. All of the partials in this file will be compiled to regular CSS, so if you’re missing an import, your work in those files won’t show up in your compiled CSS. Let’s take a look at an example of a small project.

    styles/
    ├── _components.scss
    ├── _core.scss
    ├── _layouts.scss
    └── main.scss

    0 directories, 4 files

As you can see from our styles directory, we’ve got three partials, and one main file. Our partials contain relevant, and specific styles, and they’re being imported into main.scss. Notice how our main has no underscore _, unlike our partials. Let’s take a look inside main.scss

    main.scss
        @import 'core';
        @import 'layouts';
        @import 'components';

The structure shown is quite straightforward, but you could use it right now for a small project and be covered for what you need. Also notice our partials don’t need an underscore _ when being imported. Anyway, let’s have a look at something more suitable for larger projects.

The 7-1 Patterned Structure

There’s a well known and widely used structure called the 7-1 pattern, it gives us a rock-solid foundation for structuring our Sass styles and allows for personal variation also. As the name goes, we have 7 folders, which houses all of our partials and the 1 main file, which is then compiled into CSS.

    styles/
    ├── abstracts
    │   ├── _mixins.scss
    │   └── _variables.scss
    ├── components
    │   ├── _buttons.scss
    │   ├── _cart.scss
    │   └── _slider.scss
    ├── core
    │   ├── _reset.scss
    │   └── _typography.scss
    ├── layout
    │   ├── _footer.scss
    │   ├── _grid.scss
    │   ├── _header.scss
    │   └── _navigation.scss
    ├── main.scss
    ├── pages
    │   ├── _about.scss
    │   └── _contact.scss
    ├── themes
    │   ├── _admin.scss
    │   └── _dark.scss
    └── vendors
        └── _bootstrap.scss

7 directories, 17 files

Abstracts - Contains tools and helper files. These files aren’t usually to be compiled into CSS.

Components - All of your styles for specific components is held here, this directory can get quite big on larger projects with many components.

Core - Holds the boilerplate for the project. This can include all CSS resets and standard rules.

Layout - Contains all styles focused on the layout of your project.

Pages - Contains styles specific to individual pages.

Themes - Holds any themes your site may use, think light and dark mode as examples.

Vendors - Here is where any third party code is held.

Main Sass File - Where your partials are imported to.

From the structure above, our main.scss would look like this:

    @import 'abstracts/variables';
    @import 'abstracts/mixins';
    
    @import 'vendors/bootstrap';
    
    @import 'core/reset';
    @import 'core/typography';
    
    @import 'layout/footer';
    @import 'layout/header';
    @import 'layout/grid';
    @import 'layout/navigation';
    
    @import 'components/buttons';
    @import 'components/cart';
    @import 'components/slider';
    
    @import 'pages/about';
    @import 'pages/contact';
    
    @import 'themes/admin';
    @import 'themes/dark';

Conclusion

You now know how to structure your Sass projects, a good idea is to keep this structure or one more tailored to yourself as a repository on GitHub and simply clone it every time you start a new project.

Again, there’s no rules when it comes to structuring your projects, follow what feels best for you and your projects needs. Hope this helped!