SASS and SCSS can be used for so many different things. If you are anything like me, you like to be really organized with your code files. SCSS provides a way for me to keep my file structure clean and keep things pretty easy to understand.

If you don't know how to set up SCSS in your project, you can check out an article I wrote on the subject here.

My basic file structure.

I like to keep my folders to a somewhat minimum when it comes to my projects.

Let's take a look at the main folder FEM-Sunnyside-Agency. This is a project I am currently working on through Front End Mentors.

Essentially, I have two folders in the root, and that's it. I have a dist folder and a scss folder. In my dist folder, I have my index.html, another folder for images, and if the project has JavaScript, then I would have a js folder in here as well.

The other folder is the scss folder. Here is the meat and potatoes of my web dev projects.

My SCSS folder

The way I organize my SCSS folder was inspired by a YouTube video from Jesse Showalter. His structure is a little more in depth than what I use. I found that for my projects, I only have about 10 SCSS files at the most, I don't really separate everything into individual folders like Jesse.

The main.scss file.

This is more or less just a master file. I use main.scss as a file that pulls all the other files together.

At the very top, I will put an import for any fonts I may need.

Next, I will add any variables I want to use. Typically, I just have variables for fonts, colors, and media query breakpoints. I typically find the media query breakpoints to be the best use for these variables in my projects. It makes it so I don't have to remember what size I used.

I don't have it in the above screenshot, but next I would put any mixins I am ay want to use. This really depends on a project by project basis for me. One I have made in the past was for centering contend in a display: flex situation. It would look something like this:

// The Mixin
@mixin flex-center {
     display: flex;
     justify-content: center;
     align-items: center;
}

// When I want to use it:
.container { 
     @include flex-center;
}

This way, when I have a hunk of code I want to use a lot, it's easy to reuse.

After any mixins, I will have a small CSS reset and box-sizing: border-box to everything. I find I have more control when I reset margins and padding on everything to 0 before I begin. I also just add box-sizing: border-box to everything. More often than not, I want this option on everything I am working with padding on, so it's easier to set it for everything and remove it when needed.

The final part of my main.scss is the @imports of the other files. Typically, I like to keep each section of a website in its own file. So I will usually have a nav, hero, gallery, footer, etc. scss files. In the main.scss, I will import each file in order of appearance on the page. So I import nav first, then hero, etc.

The remaining SCSS files.

The remaining scss files. I have are what are called " Partials". Naming a file with an underscore at the beginning makes it a partial, and will denote that the file will be used with an @import command.

Each of these partials are relatively small. Let's take a look at my _nav.scss file.

You can't see the entire file here, but I will just do whatever styles are related to that block of content. I also include media queries for the content as well.

I like to have a separate file for each block of content as it feels more organized to me. I know if I go back and want to fix something in the footer, I can easily go to the _footer.scss partial to make my changes.

What about overall styles?

If I have something like, links, that appear the same way in multiple pages or sections in the project, I will have a new partial just for that. This partial would be something like _universal_styles.scss. This would be things like <a></a> tags that need to be green everywhere on the website, I will put these types of styles here.

Compiling

While I am working, I need to compile my scss to be able to see my changes. My text editor of choice is Visual Studio Code. I use the extension "Live Server" to automatically update the page on save. Unfortunately, this doesn't work as smoothly with my scss workflow. So I still use Live Server, but when I want to update the css, I run the command sass /scss/main.scss dist/css/main.css. This command will take the main.scss file, and turn it into a plain main.css file and it will be automatically created and saved in the dist folder in a css folder.

I am aware there is an extension for VS Code that will automatically compile on save called "Live Sass Compiler" but something about my workflow doesn't seem to work with it and I haven't been able to figure it out. I am not too concerned about that now.

Final thoughts

So this is my basic workflow for an scss web dev project. What do you think? Do you know of a way I can improve it? Did you get some ideas for yourself? Let me know!