The Sass 7-1 Pattern

What Is the 7-1 Pattern?

Popularized by Hugo Giraudel's Sass Guidelines, the 7-1 pattern organizes a project into seven folders, abstracts, base, components, layout, pages, themes, and vendors, plus a single main.scss entry file at the root that loads them all in the correct order.

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

The "7" refers to these seven folders; the "1" refers to the single main.scss entry file that ties them together.

The Seven Folders

abstracts/   // variables, functions, mixins (no direct CSS output)
base/        // reset, typography, base element styles
components/  // buttons, cards, modals, forms
layout/      // header, footer, sidebar, grid
pages/       // page-specific style overrides
themes/      // visual theme variations
vendors/     // third-party CSS or overrides for it

• abstracts/ never produces CSS output on its own, it holds variables, functions, and mixins only.
• base/, layout/, and components/ hold the bulk of everyday styling.
• pages/ and themes/ are optional in smaller projects but valuable once a site has distinct page-specific needs or multiple visual themes.
• vendors/ isolates third-party styles (or overrides for them) from your own authored code.

7-1 Pattern Cheatsheet

What belongs in each of the seven folders.

The main.scss Entry File

main.scss loads every folder's barrel file in a deliberate order, abstracts first (since everything else depends on them), followed by vendors, base, layout, components, pages, and themes.

// main.scss
@use 'abstracts';
@use 'vendors';
@use 'base';
@use 'layout';
@use 'components';
@use 'pages';
@use 'themes';

Adapting the Pattern to Your Project

The 7-1 pattern is a strong default, not a rigid law. Many real projects drop pages/ or themes/ entirely if they don't apply, or add an objects/ or utilities/ folder inspired by ITCSS for utility-class-heavy projects.

• Small marketing sites often skip pages/ and themes/ entirely.
• Design-system-heavy projects sometimes add a dedicated utilities/ folder for single-purpose helper classes.
• The core idea, separating abstractions, base styles, components, and layout, matters more than following the folder names exactly.

7-1 Pattern With the Modern Module System

Each folder typically has its own _index.scss barrel file using @forward to re-export its siblings, so main.scss only needs one @use statement per folder, exactly as covered in the Modules and @forward lessons.

Common Mistakes

• Copying the full seven-folder structure into a tiny project that doesn't need that much separation yet.
• Loading folders out of order in main.scss, especially loading components/ before abstracts/.
• Putting actual component styles inside abstracts/, which should only ever contain variables, functions, and mixins.
• Not creating barrel _index.scss files per folder, forcing main.scss to @use dozens of individual partials.

Key Takeaways

• The 7-1 pattern organizes a Sass project into seven purpose-driven folders plus one entry file.
• abstracts/ never outputs CSS directly, it only holds variables, functions, and mixins.
• Load order in main.scss matters: abstracts and vendors first, then base, layout, components, pages, and themes.
• Adapt the pattern to your project's real needs rather than following it rigidly.