How to Create A SASS Environment From Your Locals Without npm
Tags: sass, scss, css, style
Published: 2022-10-11 10:56:53

Have you always thought of implementing a Sass environment in your project but been getting confused as a result of countless tutorials made available online?
 
Don’t sweat over it anymore as this short piece offers only the relevant secrets on how to navigate your way through it even without the guidance of anyone.




1. Click to open your IDE (will be using Visual Studio Code for this guide)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zqeienzh4u3iqw9abnh.PNG)

2. Hover your mouse on “Extension” feature, then click on it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvmy21ndkzos7i9qdz6y.PNG)

3. In the search bar, insert and install both “Live Server,” and “Live Sass Compiler” extensions

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4k0r9muerylo65eidru2.PNG)

3i. Install “Live Server” extension

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g23doh5r0cg0nm6neupa.PNG)

3ii. Install “Live Sass Compiler”

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmay6grw05abpr7yts5l.PNG)

4. Navigate through “Setting” icon

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvl1rn9pfdwl5ceehyuu.PNG)

5. Type “Sass” in the search bar

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71erzcvrlxlsf1w27w4c.PNG)

6. After typing “Sass,” click on “Live Sass Compiler” from the left column.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1idv8s8gzk73irqxjbo.PNG)

7. Drag your mouse, and navigate through “format,” then click to edit the json file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9z5srgrifc7x2nmn1cs.PNG)

7i. Your next screen would look like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rqsut85n3gia7kk7rkz.PNG)

7ii. Make a little modification here

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pt5fm3674dvggwq0h0gj.PNG)

7iii. Change savePath value of ‘null’ to “/css” as this would totally change the initial file path.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyi1k9piijf560bv472r.PNG)

**P.S.** Failure to change the path would not allow a CSS folder to be created automatically upon the compilation of your .scss file. 

Literally, it would look like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1dx6q0wkurl3rz56q6c.PNG)

 8. Press “ctrl + s” to save the file.

Now, it’s high time to create a new folder so as to test out if the SASS environment is fully up and running or not.

9. Create and open a newly created folder of a new project

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0o18bdoyzrstdr2vken.PNG)

10. Create the following inside the folder; 

10i. An index.html file

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbggzdjyob6ml08hsxr0.PNG)

10ii. A folder that would house a .scss file

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eaxxsn735y092dwfy9hk.PNG)

11. From the .scss folder, create a .scss file where all CSS styles would be written and documented.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/es7fjrrtf7r1m45lz9vv.PNG)

12. You would notice that immediately after you had created the .scss file, a prompt showing “Watch Sass” is being popped out. From here, you can easily monitor your Sass environment.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dx6rgirgzbyl2nvipcxz.PNG)

13. And Voila, a new CSS folder would automatically be created alongside its file (.css) and map (.css.map) after you click “Watch Sass.”


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94jt1cja3hvhmd6m7j91.PNG)


This completes this simple and useful guide.
Kindly do not hesitate to drop a message if you have any further inquires or contact via (www.twitter.com/_desglobe)

Thank you for reading; Happy coding!!!