Live Sass Compiler is a VS Code extension to compile Sass/Scss files to css. In this tutorial we will look into how to set it up and how to add the compiled file to our html.
Follow these steps.
- Follow the instructions and install VS Code.
- Open VS Code
- Go to extensions tab
- Search for live sass compiler, the author is Ritwick Dey
- Install it
- It will install live sass and live server which provides browser auto reloading
- Reload VS Code
- Create a folder named 'test' for our project.
- Open that project directory using VS Code.
- Create an
scss folder in our project root and inside create a filed named
main.scss ,add some sass code inside.
- Click watch sass at the bottom right corner
main.scss file is compiled to
main.css and we can see the compiled css here.
- We can include the compiled
main.css in our html like this
- I have added the font color as white in the main.scss.This is our output
Thank you for reading this tutorial.