Go Back

Live Sass Compiler extension for Visual Studio Code.

Updated on 04 March, 2019

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.

download vscode

  • Follow the instructions and install VS Code.
  • Open VS Code
  • Go to extensions tab

download vscode

  • Search for live sass compiler, the author is Ritwick Dey

download vscode

  • 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.

download vscode

  • Click watch sass at the bottom right corner

download vscode

  • Our main.scss file is compiled to main.css and we can see the compiled css here.

download vscode

  • We can include the compiled main.css in our html like this

download vscode

  • I have added the font color as white in the main.scss.This is our output

download vscode

Thank you for reading this tutorial.

Go Back