A Modern Sass Folder Structure
Tags: sass, structure
Published: 2022-08-24 19:30:00

Hi, there! 

Today, it is all about organizing your CSS with the power of Sass. 

I hope that you have an idea of what Sass is and how it works. Because this topic focuses on improving your productivity while working with Sass. You might be wondering why I am calling SCSS as Sass, instead of SCSS. Yes, there are some difference between them, however, most developers use this term as well. After hearing it over time, I developed a habit of calling it Sass. Perhaps because pronunciation is easier.:) If you want to learn more about the difference between them, check out these resources:

- [Sass Guidelines on "about sass"](https://sass-guidelin.es/#about-sass)
- [Kevin Powell on "sass or scss"](https://www.youtube.com/watch?v=TymGwiNMlh0)

First of all, full credit to [Sass Guidelines site](https://sass-guidelin.es/) and [Kevin Powell](https://www.kevinpowell.co/), who made me aware of those concepts. I am just combining all those concepts and writing what I have learned. I made some modifications depending on my preferences. Now, here I would like to share what modern Sass template folder structure looks like. You can fork this [GitHub repo](https://github.com/dostonnabotov/sass-template) and use it as a template. Ok, with all that being said, let's get started.

There is a famous _7-1 pattern_ folder structure. If you don't know what it is, you can head over to [Sass Guidelines](https://sass-guidelin.es/#architecture) and learn more about it. Basically, it has 7 different folders, which contain files or so-called 'partials', which are then all imported to one main Sass file and compiled into one big CSS file. 

- `abstracts/`
- `base/`
- `utilities/`
- `components/`
- `layout/`
- `pages/`
- `themes/`
- `vendors/`
- `style.scss`

However, the example of folder structure that is given in Sass Guidelines uses `@import` method, which is now deprecated. Now, we have `@use` and `@forward`, which are modern methods of importing files and folders in Sass. I got a clear understanding after watching Kevin Powell's YouTube video on these two methods. You can learn more about it [here](https://youtu.be/CR-a8upNjJ0).

### Folder Structure

```
sass/
|
|- abstracts/
|    |- _variables.scss
|    |- _media-query.scss
|    |- _colors.scss
|    ...
|    |- _index.scss
|
|- base/
|    |- _base.scss
|    |- _reset.scss
|    ...
|    |- _index.scss
|
|- utilities/
|    |- _main.scss
|    |- _container.scss
|    |- _exceptions.scss
|    ...
|    |- _index.scss
|
|- components/
|    |- _buttons.scss
|    |- _carousel.scss
|    |- _dropdown.scss
|    ...
|    |- _index.scss
|
|- layout/
|    |- _header.scss
|    |- _sidebar.scss
|    |- _footer.scss
|    ...
|    |- _index.scss
|
|- pages/
|    |- _about.scss
|    |- _contact.scss
|    ...
|    |- _index.scss
|
|- themes/
|    |- _theme.scss
|    |- _admin.scss
|    ...
|    |- _index.scss
|
|- vendors/
|    |- _bootstrap.scss
|    |- _modern-reset.scss
|    ...
|    |- _index.scss
|
|- style.scss
```

As you might have noticed, in every folder, there is a file, called `_index.scss`. It is there becuase you no longer need to import each file from the folder one by one. In `_index.scss` file, there should be only `@forward`s which is literally used to "forward" your files as a folder across other different files.

For example, in our case, in `abstracts/` folder, there are 3 different files except for `_index.scss` one. In `_index.scss` file, we can "forward" each file within that folder:


`_index.scss`
```scss
@forward 'variables';
@forward 'media-query';
@forward 'colors';
```

If you want to use all files within `abstracts/` folder, you can "use" them like this:

`style.scss`
```scss
@use 'abstracts';
```

However, if we had used `@import` method to import files, we wouldn't need `_index.scss` file and it would look like this:

`style.scss`
```scss
@import 'abstracts/variables';
@import 'abstracts/media-query';
@import 'abstracts/colors';

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

...
```

Now, we can 'forward' all files with `_index.scss` file within its folder, and import it in our main `style.scss` file using `@use` method. Result should look something like this:

`style.scss`
```scss
@use 'abstracts';
@use 'vendors';
@use 'base';
@use 'utilities';
@use 'components';
@use 'pages';
@use 'themes';
```

Let's say you created some mixins in your `_mixins.scss` file. And, you want to use it in your `_buttons.scss` file to give some styling for buttons. What you can do is this:

`_buttons.scss`
```scss
@use "../abstracts" as *;
```

The reason why `_mixins.scss` file is in `abstracts/` folder is that mixins don't get compiled into CSS. Just like functions, maps and Sass variables. These all reusable files should be in `abstracts/` folder, so that you can use those mixins, maps and variables across your files easily by importing them.

You might be wondering what does this `*` mean. If you know Python or React, you might have seen this a lot. If you don't, it basically means that you can freely use all those reusable files within your current file. I mean, if you had used `a` instead of `*`, you would need to use `a.something` for wherever you have used the code that belongs to that folder.

Also, note that `/path` should be relative to that file as well.

---

If you are still struggling to understand some of the concepts, once again I strongly recommend you to check out these two resources:

- [Sass Guidelines site](https://sass-guidelin.es/)
- [Kevin Powell](https://youtu.be/CR-a8upNjJ0)

Once you've learned these methods, it will soon become the part of your habit. I use this template for almost all my projects. 

With all that being said, I wish you good luck on your journey!

Thanks for reading!