VS Code - create SCSS / SASS project with Live Sass Compiler
In this article, we would like to show you how to create project with Live Sass Compiler for HTML web page.
Create project with the following structure:
xxxxxxxxxx/project_directory/ ├─ index.html └─ style.scssindex.html
xxxxxxxxxx<html><head> <link rel="stylesheet" href="style.css"></head><body> <div>Hello World!</div></body></html>style.scss
xxxxxxxxxx$bg-main-color: yellow;body { background: $bg-main-color;}Open Terminal in your project and install sass globally:
xxxxxxxxxxnpm install -g sassOr use the following article to install Sass locally: SCSS / SASS - local installation
Note:
If you are looking another way to install sass, go the the following page: Sass: Install Sass.
Go to the Extensions tab (Ctrl + Shift + X), search and install Live Sass Compiler.
Once the Live Sass Compiler installation is complete, you will be able to run it using Watch Sass button from the bar at the bottom of the VS Code. This will compile all the .scss files into the .css files that you can later use in your project (as we did in <link> element in the HTML template above - href="style.css").
Now, we can see that the variable from style.scss file has been successfully compiled into style.css file:
xxxxxxxxxxbody { background: yellow;}and when you open the index.html file, you will see the following result:
