7-1 Sass Architecture

We are always trying to find the best approaches for managing our folder structures from project to project. Different developers, teams, and companies all have their own standards. And sometimes those standards even vary between projects.

One of my biggest struggles is spending hours trying to find the right class name in a project with dozens of styles folders.

So today we will talk about handy Sass architecture, which is called 7-1. (If you don’t familiar with Sass and its features, I would recommend browsing its features before proceeding).

7-1 pattern is pretty simple: 7 folders, 1 file

styles/
|
|– base/
|   |– _base.scss
|   |– _reset.scss
|   |– _typography.scss
|   |– _normalize.scss
|
|– layout/
|   |– _navbar.scss
|   |– _footer.scss
|   |– _sidebar.scss
|   |– _header.scss
|
|– abstracts/
|   |– _variables.scss
|   |– _colors.scss
|   |– _mixins.scss
|
|– components/
|   |– _alert.scss
|   |– _button.scss
|   |– _label.scss
|   |– _modal.scss
|   |– _profile-card.scss
|
|– pages/
|   |– _product.scss
|   |– _blog.scss
|   |– _login.scss
|   |– _signup.scss
|
|– themes/
|   |– _dark-theme.scss
|   |– _light-theme.scss
|   |– _material-theme.scss
|
|– vendors/
|   |– _bootstrap.scss
|   |– _owl-carousel.scss
|   |– _jqueryui.scss
|
 – main.scss

7 Folders have meaningful labels which include sass snippets or partials. Outside the 7 folders, 1 file will include all the partials or snippets from 7 folders and compile it into 1 CSS file.

The file structure is as follows:

1. Abstracts — this subdirectory contains no actual styles, but rather just functions and mechanisms that help to define other styles (essentially your “utils” directory).

2. Vendors — these are third-party stylesheets used by a project. All the CSS files from external libraries and frameworks should be included here.

3. Base — this is the boilerplate style used globally across the application. In this directory, we would include our default CSS resets and typography styles.

4. Layout — contains the styles for parts of the site’s layout (such as headers, footers, navbars, etc).

5. Components — these are styles for components layouts, such as buttons, form styles, profile pictures, cards, etc.

6. Pages — this directory contains page-specific styles (login, home, about, etc.).

7. Themes — the different styles needed for each theme will be in this directory.

Then, inside of the root sass directory is a main.scss file that imports all of the styles from these sub-directories. The main file should be the only Sass file from the whole codebase not to begin with an underscore. This file should not contain anything but @import and comments.

Files should be imported according to the folder they live in, one after the other in the following order:

1. abstracts/
2. vendors/
3. base/
4. layout/
5. components/
6. pages/
7. themes/

In order to preserve readability, the main file should respect these guidelines:

• one file per @import;
• one @import per line;
• no new line between two imports from the same folder;
• a new line after the last import from a folder;
• file extensions and leading underscores omitted.

Conclusion

The 7–1 Sass Architecture helps to organize stylesheets in a concise and easy-to-follow manner. Not all sites or applications will need every single directory, though. For instance, if an application or website does not support multiple themes - the “themes“ folder can be excluded from the file structure.

Keep your folders structured, and your code - maintainable. :)

For more info please refer to Hugo Giraudel`s guide.

You might also love this boilerplate.