The 7-1 Pattern
Organize a large Sass project into seven folders and one main file.
Syntax
main.scss -> @use 'abstracts'; @use 'base'; ...The 7-1 pattern is a popular way to structure a Sass codebase: seven folders of partials plus one main.scss entry file that pulls them together.
The seven folders
- abstracts/ — variables, mixins, functions (no CSS output).
- base/ — resets, typography, base element styles.
- components/ — buttons, cards, forms.
- layout/ — header, footer, grid, navigation.
- pages/ — page-specific styles.
- themes/ — theme variations.
- vendors/ — third-party styles.
Each folder has an _index.scss that forwards its partials, and main.scss uses each folder.
Example
// Project structure
// scss/
// abstracts/ _variables.scss _mixins.scss _index.scss
// base/ _reset.scss _typography.scss _index.scss
// components/ _button.scss _card.scss _index.scss
// main.scss
// main.scss
@use 'abstracts';
@use 'base';
@use 'components';When to use it
- A team adopts the 7-1 pattern on a large e-commerce site so six developers can work on separate folders (components, layout, pages) without merge conflicts.
- An agency uses 7-1 as their project scaffold template so every client project has a predictable folder structure that any team member can navigate.
- A developer migrates a single 4000-line stylesheet to 7-1, breaking it into focused partials that are easier to test, review, and onboard new hires into.
More examples
7-1 folder structure
The canonical seven folder layout with one main.scss entry file that assembles all partials in dependency order.
scss/
abstracts/ # _variables.scss, _mixins.scss, _functions.scss
base/ # _reset.scss, _typography.scss
components/ # _buttons.scss, _cards.scss, _forms.scss
layout/ # _header.scss, _footer.scss, _grid.scss
pages/ # _home.scss, _contact.scss
themes/ # _dark.scss, _print.scss
vendors/ # _normalize.scss
main.scss # entry — @use-es everythingmain.scss entry file
Loads partials in dependency order: abstracts first (no output), then base, then layout, components, and finally page-specific overrides.
// main.scss
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'layout/header';
@use 'layout/footer';
@use 'components/buttons';
@use 'components/cards';
@use 'pages/home';Abstracts forward index
An index file in abstracts/ @forward-s all sub-partials so other folders only need one @use statement to access the full abstracts API.
// abstracts/_index.scss
@forward 'variables';
@forward 'mixins';
@forward 'functions';
// Other partials can then write:
@use '../abstracts' as a;
.hero { color: a.$primary; }
Discussion