SCSS 7-1 Architecture Explained

The SCSS 7-1 pattern is a folder structure that keeps styles modular and predictable as a project grows. Instead of placing everything in one large stylesheet, you split concerns into focused partials.

What does 7-1 mean?

The pattern uses seven folders and one main file. The main file imports everything in a controlled order, while the folders separate concerns such as abstracts, base styles, components, layout, pages, themes and vendors.

Why use this architecture?

It reduces stylesheet chaos, makes naming easier to maintain and helps teams understand where new code belongs. That matters once a site moves beyond a few simple pages.

Typical folder example

scss/
  abstracts/
  base/
  components/
  layout/
  pages/
  themes/
  vendors/
  main.scss

This structure works especially well when combined with a consistent naming convention such as BEM.

FAQ

Is SCSS 7-1 good for small websites?

It can be, but the biggest benefits appear once the project has multiple pages and reusable UI pieces.

Do I have to use exactly seven folders?

No. The pattern is a guideline. Adjust it when the project size or team workflow requires a slightly different structure.