Structuring your SASS projects
Tags: sass, codenewbie, webdev, beginners
Published: 2020-11-10 00:52:00

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:

```sass
// File: main.scss

@import 'layout/header';
```

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

```sass
// 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:

```sass
_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 y*o*ur 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
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 file`vendors-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..

```sass
@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](https://github.com/HugoGiraudel/sass-boilerplate). 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!

---
_**Are you ready to turn your dev skills into a freelance business?** Whether you're completely new to freelancing or are looking to level up your existing skills. I'll teach you everything you need to know to become a successful freelancer!_

Get started today with my [Complete Guide to Freelancing](https://easeout.gumroad.com/l/freelance).


![Complete Guide to Freelancing package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8jx3gvzvjazn8z1mbjm.png)

> Available now at 👉 [https://easeout.gumroad.com/l/freelance](https://easeout.gumroad.com/l/freelance)

## A little about me..

Hey, I'm Tim! 👋 I'm a freelance business owner, web developer & author. 

I teach both new and experienced freelancers how to [build a sustainable and successful freelancing business](https://easeout.gumroad.com/l/freelance). If you'd like to read more of my articles, check them out on [my blog](www.easeout.co).

Thanks for reading 🎉