Set Up Your Next Web Dev Project with SCSS Made Easy!

If you are anything like me, sometimes vanilla CSS just doesn't cut it. I mostly use SCSS for it's organizational purposes.

Here, I will walk you through the pretty simple steps of how to set up SCSS for your next project! This article will just help you on how to set up SCSS / SASS in your project. If you would like to learn more on how to use SCSS / SASS and what it can do, you can check out the official SASS Guide Here.

If you don't care about the in depth explanations, check out the TLDR; section at the bottom!

I have a folder structure that seems to work pretty well for me. In any given project folder, I will have a dist folder that holds my index.html, image files, and any JavaScript files I may have. This is considered my distribution file, and if someone wanted to deploy the website, they could just use that folder to deploy without all that extra SCSS stuff to get in the way.

Creating your project folders

Let's start off by creating a project folder for yourself.

1. Create a folder for your project.
2. Within that folder, create another folder labeled dist. You can name it whatever you want, but this is the name I use.

3. Also within your project folder, create another one called scss. This will house all of your SCSS files.
   It should look a little something like this:
   

4. Next step is installing node.js...

Installing Node and SASS

Before we get started with SCSS, you will need Node on your machine. To get node, you can go to Node's Website Here and follow the instructions for your device.

1. Once node is installed, open your terminal.
2. To validate that you have node installed, run the command node --version. You should see a version number returned.
3. Now we will globally install SASS. To do this, run the command npm install -g sass. This will install it globally on your machine.

Code all your SCSS to your heart's content

Here is where you can get creative and code your SCSS files! Have fun with it!

Compiling your SCSS

Alright, now let's see what you did!

1. Within your terminal, you can navigate to your file path.
   • To do this, you can type in cd <filepath>. So if your project was on your desktop, you can do cd \desktop\my_project and you will be brought to your project.
2. Enter the command sass /scss/main.scss dist/css/main.css. This will build and compile your SCSS files. Just run that command every time you want to compile!
3. Just refresh your project, and BOOM! It's updated!

How I Use SCSS

I use SCSS for organization. You can see how I am using this in one of my real projects I am working on. Within the SCSS folder, I use the main.scss file as a file that holds imports to all other scss files. I then break down each section of the website into it's own scss file. So you can see in the above screenshot, I have a file specifically for the Hero of the page.

TLDR;

I know I was wordy up there, you can find a simple numbered list here on how to set it up.

1. Create your project folder
2. Within project folder, create a dist folder
3. Within the project folder, create an scss folder
4. Install Node.js if you have not already.
5. In your terminal, run the command npm install -g sass to install SASS globally.
6. Navigate to your project within your terminal.
7. Code your SCSS with all your might!
8. When you are ready to compile your SCSS files, you can enter the command sass /scss/main.scss dist/css/main.css. This will build and compile your SCSS files. Just run that command every time you want to compile!

Congratulations, you are now up and running with SASS! Happy Coding!

Comments

[Dylan Anderson]

You don't need node-sass to use SCSS. node-sass uses LibSass, and both are deprecated, and slower than using the recommended dart-sass.

New projects should use dart-sass: sass-lang.com/install

[Russ Perry]

So I didn't know this, but I just looked into it. I tried it for myself and it's so much easier that the way I did it in this article... Thanks for letting me know!

[Nishtha Neeraj Kushwah]

It's not that hard if you use vs code you just have to use an extension class "Live sass compiler" By ritwick dey and that's it now write your scss and click on the extension in status bar it will compile your scss to css.

Easy peasy.

[Russ Perry]

Oh man! That was something I was going to look into today was an easy way to compile. Thanks for the heads up!