Learn How to Structure your SASS Projects

Lets 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!

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';

We could 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, lets take a look at some of the ways we could choose to structure our projects!

Keep in mind that there is no one correct structure its entirely up to you!

Lets take a look at how to go about structuring your projects..

Simple Structure

If youre using Sass on a small project, for example - a single web page. A very minimal structure could be as follows:

_base.scss_layout.scss_components.scssmain.scss

Here we have 3 partials connecting up to our main.scss.

Base: contained within this file are all your resets, variables, mixins, and any utility classes.

Layout: contains all the CSS that handles the layout, such as the container and any grid systems.

Components: anything reusable such as buttons, navbars, cards etc.

Main: it should ONLY contain the imports for the above files.

If any file grows too cluttered or disorganized, its time to expand our structure. Consider adding a folder for your components for example, and breaking it up into individual files such as _button.scss & _carousel.scss.

However, when were working on a larger project, well need a more rigorous architecture, which well look at in the next section.

The 71 Pattern

The architecture known as the 71 pattern (7 folders, 1 file), is a widely-adopted structure that serves as a basis for large projects. You have all your partials organized into 7 different folders, and a single file sits at the root level (usually named main.scss) to handle the imports which is the file you compile into CSS.

Heres a sample 71 directory structure, Ive included some examples of files that would sit inside of each folder:

sass/|| abstracts/ (or utilities/)|   | _variables.scss    // Sass Variables|   | _functions.scss    // Sass Functions|   | _mixins.scss       // Sass Mixins|| base/|   | _reset.scss        // Reset/normalize|   | _typography.scss   // Typography rules|| components/ (or modules/)|   | _buttons.scss      // Buttons|   | _carousel.scss     // Carousel|   | _slider.scss       // Slider|| layout/|   | _navigation.scss   // Navigation|   | _grid.scss         // Grid system|   | _header.scss       // Header|   | _footer.scss       // Footer|   | _sidebar.scss      // Sidebar|   | _forms.scss        // Forms|| pages/|   | _home.scss         // Home specific styles|   | _about.scss        // About specific styles|   | _contact.scss      // Contact specific styles|| themes/|   | _theme.scss        // Default theme|   | _admin.scss        // Admin theme|| vendors/|   | _bootstrap.scss    // Bootstrap|   | _jquery-ui.scss    // jQuery UI|` main.scss              // Main Sass file

Abstracts (or utilities): holds Sass tools, helper files, variables, functions, mixins and other config files. These files are meant to be just helpers which dont output any CSS when compiled.

Base: holds the boilerplate code for the project. Including standard styles such as resets and typographic rules, which are commonly used throughout your project.

Components (or modules): holds all of your styles for buttons, carousels, sliders, and similar page components (think widgets). Your project will typically contain a lot of component files as the whole site/app should be mostly composed of small modules.

Layout: contains all styles involved with the layout of your project. Such as styles for your header, footer, navigation and the grid system.

Pages: any styles specific to individual pages will sit here. For example its not uncommon for the home page of your site to require page specific styles that no other page receives.

Themes: this is likely not used in many projects. It would hold files that create project specific themes. For example if sections of your site contain alternate color schemes.

Vendors: contains all third party code from external libraries and frameworks such as Normalize, Bootstrap, jQueryUI, etc. However, there is often a need to override vendor code. If this is required, its good practice to create a new folder called vendors-extensions/ and then name any files after the vendors they overwrite. The filevendors-extensions/_bootstrap.scss would contain all your Bootstrap overrides as editing the vendor files themselves, isnt generally a good idea.

Main.scss: This file should only contain your imports! For example:

@import 'abstracts/variables';@import 'abstracts/functions';@import 'abstracts/mixins';@import 'vendors/bootstrap';@import 'vendors/jquery-ui';@import 'base/reset';@import 'base/typography';@import 'layout/navigation';@import 'layout/grid';@import 'layout/header';@import 'layout/footer';@import 'layout/sidebar';@import 'layout/forms';@import 'components/buttons';@import 'components/carousel';@import 'components/slider';@import 'pages/home';@import 'pages/about';@import 'pages/contact';@import 'themes/theme';@import 'themes/admin';

Note: Theres no need to include the _ or .scss file extension when importing.

Get Up and Running With 71:

The official boilerplate is up on GitHub. You can download or clone it with the following terminal command:

git clone https://github.com/KittyGiraudel/sass-boilerplate

Summary

And thats it! Youve learned how you can go about structuring your Sass projects. The thing to keep in mind is that there are no explicit rules here. You should structure your projects in a way that is meaningful to you (and your team!). The way that helps you quickly and easily find and isolate your styles is the way to go!

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!

Let's Connect

• Portfolio

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen