Starting Point: Installing Live Sass Compiler
Begin by opening Visual Studio Code. Once it's up and running, navigate to the left side panel and choose the extensions tab.
1
Extensions tab in VS Code
Use the search bar to find and install the "Live Sass Compiler" extension. This tool is essential for compiling Sass files (.scss or .sass) into .css files.
view this
Next Step: Defining the Save Location
Adjust the file path so that Sass files are compiled into the styles folder.
To do this, modify the settings.json file.
In VS Code, navigate to File > Preferences > Settings. Search for live sass compile to access and edit the global settings.
Click on Edit settings.json.
In the first few lines, find the following code:
{
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/"
}
],
Change "savePath": "/" to "savePath": "/styles", making it look like this:
{
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName":".css",
"savePath":"/styles",
},
// For production, consider using the minified extension to reduce file size
{
"format": "compressed",
"extensionName":".min.css",
"savePath":"/styles",
}
],
Next Task: Compiling Sass
After saving the settings, return to the Sass file and click on the "Watch Sass" button at the bottom of the window.
how to turn on sass
Click on "Watch Sass"
Clicking this button generates two files in the styles folder: a .css and a .css.map file.
Do not make any changes to these files, as they automatically compile Sass into CSS when you save new styles.
Final Step: Linking the CSS file
Lastly, link the CSS file in your index.html file. In our scenario:
Now you can run the file in your web browser.