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 increase 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 — it's 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!
Let's 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 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, it's 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/KittyGiraudel/sass-boilerplate
Summary
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!
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!