How to Organize SCSS Files

Structuring Large SCSS Projects

As stylesheets grow, organisation is key. The popular 7-1 pattern splits SCSS into folders for maintainability.

The 7-1 Folder Structure

scss/
  abstracts/   _variables.scss, _mixins.scss
  base/        _reset.scss, _typography.scss
  components/  _buttons.scss, _cards.scss
  layout/      _header.scss, _grid.scss
  pages/       _home.scss
  themes/      _dark.scss
  vendors/     _bootstrap.scss
  main.scss    (imports everything)

Partials

Files starting with _ are partials — they don't compile alone, only when imported.

Using @use (Modern)

// main.scss
@use 'abstracts/variables';
@use 'base/reset';
@use 'components/buttons';

Accessing Across Modules

// _buttons.scss
@use '../abstracts/variables' as v;
.btn { color: v.$primary; }

FAQs

@use vs @import?

Use @use — @import is deprecated and causes duplicate output. More in our SCSS guides.

Is 7-1 overkill for small sites?

Yes — a single file or a few partials is fine for small projects.