For large-scale frontend projects with numerous pages, poor Sass file organization can lead to significant maintenance overhead. The 7-1 architecture, a recommanded best practice from the Sass community, categorizes styles into seven distinct directories plus a single entry point file, creating a modular and maintainable structure.

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

A detailed breakdown of the structure looks like this:

sass/
|
|– abstracts/
|   |– _global-vars.scss    # Global style variables
|   |– _utility-functions.scss # Reusable Sass functions
|   |– _style-mixins.scss   # Sass mixins for cross-browser support & reuse
|   |– _style-placeholders.scss # Extensible placeholder selectors
|
|– base/
|   |– _base-reset.scss     # Browser style reset/normalization
|   |– _core-typography.scss # Global typography rules
|   …                        # Additional base styles
|
|– components/
|   |– _action-buttons.scss # Button variants
|   |– _image-carousel.scss # Interactive carousel styles
|   |– _page-cover.scss     # Full-page cover sections
|   |– _dropdown-menus.scss # Dropdown component styles
|   …                        # More reusable components
|
|– layout/
|   |– _main-nav.scss       # Site navigation styles
|   |– _responsive-grid.scss # Responsive grid system
|   |– _page-header.scss    # Page header styles
|   |– _page-footer.scss    # Page footer styles
|   |– _sidebar-layout.scss # Sidebar component styles
|   |– _form-layout.scss    # Form structure styles
|   …                        # Additional layout components
|
|– pages/
|   |– _homepage-styles.scss # Homepage-specific styles
|   |– _contact-page.scss   # Contact page custom styles
|   …                        # More page-specific files
|
|– themes/
|   |– _default-theme.scss  # Default application theme
|   |– _admin-theme.scss    # Admin dashboard theme
|   …                        # Additional theme files
|
|– vendors/
|   |– _bootstrap-styles.scss # Bootstrap framework styles
|   |– _jquery-ui-styles.scss # jQuery UI component styles
|   …                        # Third-party vendor styles
|
`– main.scss                # Sass compilation entry point

main.scss

This single entry point imports all other Sass files in a logical order (starting with utilities, then base styles, layout, components, pages, themes, and vendors). Compilation only needs to target this file to generate a bundled CSS output. Any new Sass file must be imported here to be included in the final build.

abstracts/

This directory contains Sass utility tools that do not produce direct CSS output, such as global variables, reusable functions, mixins, and placeholder selectors. For larger projects, split these utilities by functional modules to avoid oversized files.

base/

Houses foundational styles that set the project’s baseline, including browser resets or normalizations, typography rules, and other global base styles applied across all page.

layout/

Stores styles responsible for defining page structure, such as navigation bars, grid systems, headers, footers, and sidebars. These styles dictate how content is arranged on the page.

components/

Contains styles for reusable UI components that appear across multiple pages—including buttons, carousels, dropdown menus, and modals. Each component gets its own dedicated file to maximize reusability.

pages/

Reserved for page-specific styles that don’t fit into broader layout or component categories. Examples include unique hero sections for the homepage or custom form styling for a contact page.

themes/

If your application supports multiple visual themes (like a default user theme and an admin dashboard theme), this directory holds theme-specific style overrides and components.

vendors/

Stores third-party CSS or Sass files, such as frameworks like Bootstrap or jQuery UI. Keeping these separate prevents accidental modifications to original vendor code.

While the 7-1 structure provides a proven framework, the key to sustainable Sass management is consistent organization tailored to your project’s needs—ensuring any developer on the team can locate and modify styles efficiently.