Structuring your SASS projects

Let’s take a look at how we can structure our Sass projects!

As projects grow and expand, the need to modularize our directory and file structure increases dramatically. Thus keeping our files and folders organized is crucial. We also have the added benefit of creating components that can be reused across multiple projects. There is no one “correct” structure — its entirely up to you!

How do we structure our Sass projects?

We do this by dividing up our stylesheets into separate files using Partials. The separate files will represent different components. We then import our partials using an @import directive, into one master stylesheet — typically the main.scss file. For example:

// File: main.scss

@import 'layout/header';

We could then create a layout folder for our layout specific files, such as:

// File: _header.scss

// This file contains all styles related to the header of the site/application.

/* STYLES GO HERE */

Remember: The name of a partial file should always begin with an underscore _.

Next up, let’s take a look at some of the ways we could choose to structure our projects!

Keep in mind that there is no one correct structure — it’s entirely up to you!

Lets take a look at how to go about structuring your projects..

Simple Structure

If you’re using Sass on a small project, for example - a single web page. A very minimal structure could be as follows:

_base.scss
_layout.scss
_components.scss

main.scss

Here we have 3 partials connecting up to our main.scss.

Base: contained within this file are all your resets, variables, mixins, and any utility classes.

Layout: contains all the CSS that handles the layout, such as the container and any grid systems.

Components: anything reusable such as buttons, navbars, cards etc.

Main: it should ONLY contain the imports for the above files.

If any file grows too cluttered or disorganized, it’s time to expand our structure. Consider adding a folder for your components for example, and breaking it up into individual files such as _button.scss & _carousel.scss.

However, when we’re working on a larger project, we’ll need a more rigorous architecture, which we’ll look at in the next section.

The 7–1 Pattern

The architecture known as the 7–1 pattern (7 folders, 1 file), is a widely-adopted structure that serves as a basis for large projects. You have all your partials organized into 7 different folders, and a single file sits at the root level (usually named main.scss) to handle the imports — which is the file you compile into CSS.

Here’s a sample 7–1 directory structure, I’ve included some examples of files that would sit inside of each folder:

sass/
|
|– abstracts/ (or utilities/)
|   |– _variables.scss    // Sass Variables
|   |– _functions.scss    // Sass Functions
|   |– _mixins.scss       // Sass Mixins
|
|– base/
|   |– _reset.scss        // Reset/normalize
|   |– _typography.scss   // Typography rules
|
|– components/ (or modules/)
|   |– _buttons.scss      // Buttons
|   |– _carousel.scss     // Carousel
|   |– _slider.scss       // Slider
|
|– layout/
|   |– _navigation.scss   // Navigation
|   |– _grid.scss         // Grid system
|   |– _header.scss       // Header
|   |– _footer.scss       // Footer
|   |– _sidebar.scss      // Sidebar
|   |– _forms.scss        // Forms
|
|– pages/
|   |– _home.scss         // Home specific styles
|   |– _about.scss        // About specific styles
|   |– _contact.scss      // Contact specific styles
|
|– themes/
|   |– _theme.scss        // Default theme
|   |– _admin.scss        // Admin theme
|
|– vendors/
|   |– _bootstrap.scss    // Bootstrap
|   |– _jquery-ui.scss    // jQuery UI
|
`– main.scss              // Main Sass file

Abstracts (or utilities): holds Sass tools, helper files, variables, functions, mixins and other config files. These files are meant to be just helpers which don’t output any CSS when compiled.

Base: holds the boilerplate code for the project. Including standard styles such as resets and typographic rules, which are commonly used throughout your project.

Components (or modules): holds all of your styles for buttons, carousels, sliders, and similar page components (think widgets). Your project will typically contain a lot of component files — as the whole site/app should be mostly composed of small modules.

Layout: contains all styles involved with the layout of your project. Such as styles for your header, footer, navigation and the grid system.

Pages: any styles specific to individual pages will sit here. For example it’s not uncommon for the home page of your site to require page specific styles that no other page receives.

Themes: this is likely not used in many projects. It would hold files that create project specific themes. For example if sections of your site contain alternate color schemes.

Vendors: contains all third party code from external libraries and frameworks — such as Normalize, Bootstrap, jQueryUI, etc. However, there is often a need to override vendor code. If this is required, its good practice to create a new folder called vendors-extensions/ and then name any files after the vendors they overwrite. The filevendors-extensions/_bootstrap.scss would contain all your Bootstrap overrides — as editing the vendor files themselves, isn’t generally a good idea.

Main.scss: This file should only contain your imports! For example..

@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';

@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';

@import 'base/reset';
@import 'base/typography';

@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';

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

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

@import 'themes/theme';
@import 'themes/admin';

Note: There’s no need to include the _ or .scss file extension when importing.

Get up and running with 7–1:

The official boilerplate is up on github. You can download or clone it with the following terminal command:

git clone https://github.com/HugoGiraudel/sass-boilerplate.git

Wrapping up

And that’s it! You’ve learned how you can go about structuring your Sass projects. The thing to keep in mind is that there are no explicit rules here. You should structure your projects in a way that is meaningful to you (and your team!). The way that helps you quickly and easily find and isolate your styles — is the way to go!

Related Posts:

• An Introduction to SASS
• Setting up SASS
• Using SASS Variables