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
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';
If you want to use all files within abstracts/ folder, you can "use" them like this:
style.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
@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
@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
@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:
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!
Top comments (5)
it saves lots of time for me. THANKS.
I think folder structure may vary project to project.
Thanks u, awesome!
You're a life saver I tell you!!!!
Is the order important in the listing in all _index.scss and style.scss?
Depends on your code. If the styles are not overwritten (which is very rare), the order doesn't matter. But, let's say, if you want
utilitiesoverridecomponentsstyles, you can put it below, so that when it gets converted to CSS, it's read from top to bottom.Simply put, you can order them by their "importance". More important = below and less important = above.