DEV Community

Cover image for A Modern Sass Folder Structure
Technophile
Technophile

Posted on

A Modern Sass Folder Structure

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:

First of all, full credit to Sass Guidelines site and Kevin Powell, 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 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 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.

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
Enter fullscreen mode Exit fullscreen mode

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 @forwards 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

@forward 'variables';
@forward 'media-query';
@forward 'colors';
Enter fullscreen mode Exit fullscreen mode

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

style.scss

@use 'abstracts';
Enter fullscreen mode Exit fullscreen mode

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

@import 'abstracts/variables';
@import 'abstracts/media-query';
@import 'abstracts/colors';

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

...
Enter fullscreen mode Exit fullscreen mode

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

@use 'abstracts';
@use 'vendors';
@use 'base';
@use 'utilities';
@use 'components';
@use 'pages';
@use 'themes';
Enter fullscreen mode Exit fullscreen mode

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

@use "../abstracts" as *;
Enter fullscreen mode Exit fullscreen mode

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:

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!

Latest comments (4)

Collapse
 
harry05555 profile image
Sebastian Schwlll

Is the order important in the listing in all _index.scss and style.scss?

Collapse
 
shegzyy profile image
Olusegun Bamgbelu

You're a life saver I tell you!!!!

Collapse
 
axelltech profile image
Axell Tech

Thanks u, awesome!

Collapse
 
sampadsarker profile image
Sampad Sarker

it saves lots of time for me. THANKS.
I think folder structure may vary project to project.