7-1 Sass Architecture: How to Organize SCSS Files
Quick Summary
- The 7-1 pattern puts SCSS partials in seven folders and loads them from one main file, the only one compiled to CSS.
- The folders are base, abstracts, components, layout, pages, themes and vendors, each holding one kind of style.
- Abstracts hold functions, mixins and variables that output no CSS, while vendors hold third-party CSS such as Bootstrap or Animate.
The 7-1 pattern is a common way to organize a Sass project: seven folders of SCSS partials and one main file, such as main.scss, that loads them all. Only the main file compiles to CSS, and each folder holds one kind of style, so you always know where a rule belongs.
The seven folders and their files
base
|-> _base.scss
|-> _animation.scss
|-> _typography.scss
|-> _utilities.scss
abstracts
|-> _functions.scss
|-> _mixins.scss
|-> _variables.scss
components
|-> _buttons.scss
|-> _popup.scss
layout
|-> _header.scss
|-> _footer.scss
pages
|-> _home.scss
|-> _about.scss
|-> _services.scss
|-> _contact.scss
themes
used for web app & admin-panel.
vendors
used for third party css. For example: bootstrap css, animate css
Abstracts hold Sass tools that output no CSS on their own (functions, mixins and variables). Base holds site-wide defaults such as typography and animations, components hold small reusable pieces like buttons and popups, layout holds the main page regions, and pages hold styles for individual pages.
Related articles
- compiling SCSS into a separate CSS folder in VS Code: turn the main file into the stylesheet your site loads
- how I structure a WordPress theme: the same one-job-per-file idea applied to a whole theme
