This content originally appeared on DEV Community and was authored by Russ Perry
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.
- Create a folder for your project.
- Within that folder, create another folder labeled
dist. You can name it whatever you want, but this is the name I use. 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:
Next step is installing node.js...
Installing Node
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.
- Once node is installed, you are ready to set up SCSS for your project.
Setting up SCSS in your project.
Now for the exciting part, setting up SCSS in your project!
For this step, you will need to use your command prompt / terminal / Git Bash.
To open command prompt on Windows, you can press CTRL + R on your keyboard, and in the "Run" dialog that opens, you can type in cmd and your command prompt will open.
To open the terminal on Mac, if you go to your Launchpad tile in your dock, and type in terminal, you should be able to find your terminal from there.
I use a Windows computer, and I prefer to use Git Bash. Any of these options will work though!
- Within your terminal / command prompt of choice, 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 docd \desktop\my_projectand you will be brought to your project.
- To do this, you can type in
- Once in your folder, type
npm init. This will initialize node package manager into your project. When you do this, the command line will just ask you a bunch of questions. You can leave them blank for now. Just hit enter on your keyboard until it installs. - Now, enter the command
npm install node-sass. This will install SASS into your project.
Once you npm init and npm install node-sass, you will see a few extra files in your folder. This is good!
Next, we need to go into our text editor of choice. We are in the home stretch!
- Locate and open the
package.jsonfile. Where it saystest, you need to replace that withsass. - You also need to replace
"echo \"Error: no test specified\" && exit 1"with"node-sass -w scss/ -o dist/css/ --recursive". - Save the file.
Start using SCSS!
In order to "activate SASS in your project, you only have one more thing to do.
- In the command prompt, run the command
npm run sass.
What this will do, is every time you "run" sass on this project, every time you SAVE your project, it will turn everything in your scss folder into one convenient css folder within your dist folder.
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.
- Create your project folder
- Within project folder, create a
distfolder - Within the project folder, create an
scssfolder - Install Node.js if you have not already.
- Navigate to your project folder within your command prompt, terminal, etc.
- Enter the command
npm init. - Hit enter on your keyboard until you can type again.
- Enter the command
npm install node-sass. - Open your project folder in your text editor.
- Open
package.json. - In
package.json, replace "test" withsass. - In
package.json, replace the text that starts with "echo" withnode-sass -w scss/ -o dist/css/ --recursive. - In the command prompt, enter
npm run sass.
Congratulations, you are now up and running with SASS! Happy Coding!
This content originally appeared on DEV Community and was authored by Russ Perry
Russ Perry | Sciencx (2021-06-30T23:21:59+00:00) Set Up Your Next Web Dev Project with SCSS Made Easy!. Retrieved from https://www.scien.cx/2021/06/30/set-up-your-next-web-dev-project-with-scss-made-easy/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.