Sass/SCSS Project Structure Tutorial

What is a project structure

One of the main benefits of using a CSS preprocessor like Sass, is the ability to split our codebase over several files without negatively impacting performance.

It’s recommended to use as many split files as necessary for development, and compiling them into a single file for production.

Not only should we split our files, we should have them in separate meaningful folders.

While there is no one “correct” structure to sort a project, we will provide two sample ones here to help new Sass developers.

The 7/1 structure pattern

Probably the most used structure is the ⁷⁄₁ pattern. Basically, we have all our files in 7 different folders with a single main file to import them all.

sass/
|
|– abstracts/ (or utilities/)
|   |– _variables.scss    // Variables
|   |– _mixins.scss       // Mixins
|                         // etc.
|
|– base/
|   |– _reset.scss        // Reset/normalize
|   |– _typography.scss   // Typography rules
|                         // etc.
|
|– components/ (or modules/)
|   |– _buttons.scss      // Buttons
|   |– _carousel.scss     // Carousel
|   |– _slider.scss       // Slider
|                         // etc.
|
|– layout/
|   |– _header.scss       // Header
|   |– _footer.scss       // Footer
|   |– _sidebar.scss      // Sidebar
|   |– _navigation.scss   // Navigation
|   |– _forms.scss        // Forms
|                         // etc.
|
|– pages/
|   |– _home.scss         // Home specific styles
|   |– _about.scss        // About specific styles
|   |– _contact.scss      // Contact specific styles
|                         // etc.
|
|– themes/
|   |– _theme.scss        // Default theme
|   |– _admin.scss        // Admin theme
|                         // etc.
|
|– vendors/
|   |– _normalize.scss    // Vendor specific
|                         // etc.
|
|– main.scss

Our folders would typically contain the following.

• Abstracts contains tools, helpers, variables, mixins etc.
• Base contains boilerplate code for the project. This includes styles such as resets, typography etc.
• Components contains all the smaller page components like separated into multiple smaller files like slider, carousel etc.
• Layout contains the layout styles, separated into several smaller files like header, footer etc.
• Pages contains page-specific styles. For example, the home page and search results page typically looks very different.
• Themes contains files that are theme specific, like alternate color schemes (if any).
• Vendors contains third party code from external framworks and libraries like jQueryUi, Bootstrap etc.

Our main file is only used to import all the other files.

note Files should be imported according to the folder they live in, one after the other, unless they need to be in a specific order. For example, vendor code like normalize.css should be above any other styles.

@use 'abstracts/variables';
@use 'abstracts/mixins';

@use 'vendors/normalize';

@use 'base/reset';
@use 'base/typography';

@use 'layout/header';
@use 'layout/footer';
@use 'layout/sidebar';
@use 'layout/navigation';
@use 'layout/forms';

@use 'components/buttons';
@use 'components/carousel';
@use 'components/slider';

@use 'pages/home';
@use 'pages/about';
@use 'pages/contact';

@use 'themes/theme';
@use 'themes/admin';

A simpler structure

We don’t have to use such an extensive and complex structure, especially if we don’t have a large or complex project.

We can simplify the files and folders a little bit. For example, all of our variables and mixins go into a single ‘abstracts’ file.

sass/
|
|– components/ (or modules/)
|   |– _buttons.scss      // Buttons
|   |– _carousel.scss     // Carousel
|   |– _slider.scss       // Slider
|                         // etc.
|
|– partials/
|   |– _abstracts.scss    // Variables/Mixins etc.
|   |– _typography.scss   // Typography rules
|   |– _header.scss       // Header
|   |– _navigation.scss   // Navigation
|   |– _forms.scss        // Forms
|                         // etc.
|
|– vendors/
|   |– _normalize.scss    // Vendor specific
|                         // etc.
|
|– main.scss

It may happen that a project starts small but grows over time, and the ‘partials’ folder becomes unwieldy. In that case it’s recommended to switch over to the default ⁷⁄₁ pattern.

The simplest structure

When we have a small project with very little CSS, we may not even need folders.

sass/
|
|– _base.scss
|– _layout.scss
|– _components.scss
|
|– main.scss

Our files would typically contain the following.

• base would contain variables, reset, colors etc.
• layout would contain the main layout like header, footer, nav etc.
• components would contain all the styling for elements that are self-contained units, like sliders, widgets etc.

As mentioned before, there is no real correct structure. You should try to find the best structure that works for you.

Summary: Points to remember

• We should separate our codebase into as many different meaningful files and folders as we need.
• A common structure pattern for Sass is the ⁷⁄₁ pattern.
  • The ⁷⁄₁ pattern separates the codebase into 7 folders and a single main file to import everything.
• We don’t always need an extensive structure. It’s a good idea to fit the structure to your needs and not the other way around.