The 7-1 Architecture

Organise a large codebase into seven folders and one entry file with @use and @forward.

The 7-1 pattern is a battle-tested folder structure: seven folders of partials, one main file that pulls them together. It scales from a landing page to a large app because every kind of style has an obvious home.

The seven folders

Folder	Holds
`abstracts/`	Tokens, functions, mixins — emit no CSS
`base/`	Resets, typography, global element styles
`components/`	Buttons, cards, badges — reusable pieces
`layout/`	Header, footer, grid, navigation
`pages/`	Page-specific styles
`themes/`	Light/dark and brand variants
`vendors/`	Third-party CSS

The one file

main.scss mostly just @uses things. Each folder gets an _index.scss that @forwards its partials, so the entry file stays short and the load order stays explicit.

// main.scss
@use 'abstracts' as *;   // tokens, mixins available everywhere
@use 'base';
@use 'layout';
@use 'components';

Example

// scss/
//  |- abstracts/
//  |   |- _tokens.scss
//  |   |- _functions.scss
//  |   |- _mixins.scss
//  |   \- _index.scss      // @forward all three
//  |- base/_reset.scss, _typography.scss, _index.scss
//  |- components/_button.scss, _card.scss, _index.scss
//  |- layout/_header.scss, _grid.scss, _index.scss
//  \- main.scss

// abstracts/_index.scss
@forward 'tokens';
@forward 'functions';
@forward 'mixins';

// components/_button.scss — declares its own deps
@use '../abstracts' as a;
.btn {
  padding: a.space(2) a.space(3);
  background: a.color('brand');
  @include a.up('md') { padding-inline: a.space(4); }
}

// main.scss — the single entry point
@use 'base';
@use 'layout';
@use 'components';

When to use it

A team of six uses 7-1 on a design system so each person owns a separate folder, and the main.scss entry file is the only shared touchpoint.
An agency scaffolds every new project with a 7-1 template committed to a starter repo so the first commit of any project already has the right folder structure.
A developer migrates a legacy codebase to 7-1 incrementally by moving one section at a time into the correct folder while keeping the project compiling throughout.

More examples

Complete 7-1 folder tree

Full 7-1 directory tree showing all seven folders and the single main.scss entry file that @use-es every partial.

scss/
  abstracts/
    _index.scss      # @forward all abstracts
    _variables.scss
    _mixins.scss
    _functions.scss
  base/
    _reset.scss
    _typography.scss
  components/
    _buttons.scss
    _cards.scss
  layout/
    _header.scss
    _footer.scss
    _grid.scss
  pages/
    _home.scss
  themes/
    _dark.scss
  vendors/
    _normalize.scss
  main.scss

Abstracts index as façade

The abstracts index @forward-s all sub-partials as one façade; components import via a single @use '../abstracts' statement.

// abstracts/_index.scss
@forward 'variables';
@forward 'mixins';
@forward 'functions';

// components/_buttons.scss
@use '../abstracts' as a;

.btn {
  background:    a.$primary;
  padding:       a.$space-4;
  @include a.flex-center;
}

main.scss entry assembles everything

Loads files in dependency order: vendor normalization first, then side-effect-free abstracts, then output-producing layers bottom-up.

// main.scss — ordered by dependency
@use 'vendors/normalize';
@use 'abstracts';          // no CSS output
@use 'base/reset';
@use 'base/typography';
@use 'layout/header';
@use 'layout/grid';
@use 'components/buttons';
@use 'components/cards';
@use 'pages/home';
@use 'themes/dark';

Discussion

Be the first to comment on this lesson.