The last Sass template I made was over 2 years ago. I decided to share it with the internet and it ended up getting 35k views.
A lot has changed since then. So, I decided to rework it and share it with more people.
This is currently my latest Sass folder structure that I use for pretty much every project, except for minor variations in files.
How to download and use it
To use this template in your project, you can either click on Use this template on GitHub. Or you can just download the sass folder and include it in your current project and start using it.
Architecture
Ok, let's get back to the folders. There are 6 folders and 1 main style.scss file.
abstracts folder
Starting with the 1st folder: abstracts. This folder is only used for Sass-related things. And, nothing from this folder gets compiled into CSS.
This is a place where you write all your variables, mixins, functions, placeholders, maps and etc.
base folder
Next up, base folder. This folder contains base or generic styles for your project.
This is where I put my reset styles, custom properties and global styles that are not specific to any element.
Also, I don't change any files in both abstracts and base folder since the architecture is usually the same in most of my projects.
components folder
components folder. As the name suggests, this folder holds all the styles for specific components used in the project. This can include buttons, cards, drop down, input fields and so on.
This folder usually gets big if you have many reusable components in your website.
layouts folder
And, unlike components folder, layouts folder contains 1 level higher styles that are used define the structure of your website. This can be things like header, footer or sidebar of your website.
pages folder
Moving on, pages folder contains page-specific styles that don’t apply globally.
For example, we can't put header in pages folder, since it's used in every page, but we CAN put the "Teams" section styles in our _about.scss file. Also, we can put the article related styles in our _blog.scss file. Because they're only used or at least make sense in those pages.
utilities folder
Similar to components folder, utilities folder holds specific styles for our project. But, what's the difference?
Let's take a text example. Let's say, there's a class name, called .text-highlight. When used in a project, its only purpose is to highlight the text, and not interfere with other text styles. But, you may say, so does the components folder. In components folder, styles are often encapsulated or a separate unit, like a button, cards or input fields. But, in utilities folder, it's not a separate unit, it's changing the existing element. As we saw with .text-highlight, it's not a separate thing on its own, like button, but rather changing the existing text to a different style.
Another good example would be .container class. I can use the .container class anywhere in HTML, and it wraps that element and sets a width to it. In other words, It does one thing and does it well.
Also, we have a file, called _shame.scss. This is a concept I learned from "Sass Guidelines". Basically, if you feel like, the style you wrote doesn't belong any file or folder, you should put them in _shame.scss. We put this file at the very end of our stylesheet, which we can use it for debugging purposes as well.
Also, this is an only file where you can freely use !important or an id selector, and go wild with them. But, make sure to sort and filter them out once you have found a good solution to your problem.
_index.scss file
You have might already noticed that each folder has a file, called _index.scss. This is because of @use and @forward.
In old Sass, we used to import files with @import, but, now we have a modern solution: @use which is created to replace the old @import.
Also, it comes with some other cool features, which you can read here.
If we look at the _index.scss files, we can see that there are only @forwards which we will use to export the files within the folder. By doing this, I can import the whole folder at once, instead of importing each file individually.
And, in our main style.scss, we import the files with @use method.
If you want use a variable or mixin from your abstracts folder into your _button.scss file, you can import it by writing
@use "../abstracts" as *;
Often times, you will only need to import your abstracts folder. That means, this line never changes, so whenever you need to use anything from your abstracts folder, just copy and paste this line and you're good to go.
Fun fact: I've also used @use and @forward in my first sass template 2 years ago.
style.scss file
Last, but not least, our main style.scss file, where everything gets merged into one place. And, the order they are merged is also important since it defines which style should override the other.
I made this diagram to show how files should be ordered. Feel free to inspect it on GitHub.
Outro
And, that's it. This folder structure was and is heavily inspired by the 7-1 pattern in Sass Guidelines as well as Kevin Powell's video on Sass. So, shoutout to them.
This was the start of "I built something" series where I share my interesting & cool projects, and explain my thought process behind it.
As always, thanks for reading. And, I will see you in the next one. :)
Top comments (1)
I love this organizational pattern. Thanks for showing us the most up-to-date way!