How to structure your SASS code

What is the 7-1 architecture?

Is it ideal to write our SASS styles in the form of one big, monolithic file? Nope!

For this reason we employ the 7-1 architecture, dividing the styles into partials in 7 different folders (we will come back to what partials are shortly, for now, a partial = a file) which are then imported into the main file.

Partials

Conventionally, if we have a SASS file, a corresponding CSS file is generated for it, which then styles the HTML.

A partial is a SASS file for which no CSS file is to be generated. It is only written so that it can be imported into other files. In the context of 7-1 architecture, the 7 folders have several partials, all of which are imported into 1 main file. A CSS file is then generated only for the main file.

A partial is named starting with a leading underscore, which tells the compiler not to generate a CSS file for it (Eg. _base.scss). We will see how partials are imported into the main CSS file in the last section.

The 7 folders

The seven folders into which code is organized are:

• Base: This folder has low-level styles such as CSS Resets, html/body styles. It can also contain typography styles, animations, etc.
• Abstracts: Only contains code which will not output any CSS, such as variables, mixins, extends and functions.
• Components: Contains one partial for each component in our code. In terms of the BEM convention, a component is one single, reusable block such as a button, a card or a form.
• Layouts: Contains a partial for each piece of the global layout of the project. Eg. header, footer, a grid for the project etc.
• Pages: If there are very specific styles for a specific page, we can add partials for these in the pages folder.
• Themes: Creating a web-app with multiple themes? Each theme can have a separate partial in the themes folder.
• Vendors: All third party CSS goes here. Eg. An icon system, bootstrap, etc.

Note that it is not necessary to have all 7 folders. It's very likely you might have only 4-5 in case of smaller projects.

A typical folder structure with partials will look something like:

Importing Partials

Having created folders for partials, we simply import them into the main SASS file (you can see a main file at the bottom of the screenshot above. A typical import looks like:

We need not add the .scss extension to any of the partials. Finally, a CSS file is generated by the compiler for this main file (as mentioned previously).

Additional Points

• As projects grow bigger, the 7-1 architecture along with the BEM convention are very helpful in keeping the CSS/SASS organized.
• Try and go through an actual project/tutorial where the 7-1 architecture is utilized to get a better picture of how and why it is used.