How to Compile SASS/SCSS to CSS in Visual Studio Code

SASS is a CSS preprocessor that adds special features such as variables, loops, and functions into regular CSS. You can use SASS to write CSS. The goal is to make the coding process simpler and more organized.

SASS has two versions: .sass and .scss. The main difference between these versions is the syntaxes. Once we have created our .sass or .scss files, we need to convert them into standard CSS.

This guide will show how to compile your SASS/SCSS to CSS in Visual Studio Code.

Step 1: Install Live SASS Compiler Extension

1. Select the Extensions tab from the sidebar.

   

2. Search for Live Sass Compiler in the search box.

   

3. Click on the Install button.

   

Step 2: Open an existing project in VS Code

1. From the “Explorers” tab in the sidebar, click on the Open Folder button.

   

2. Open the folder from your preferred directory.

   

3. Once the folder is opened, you’ll see all the source files.

   

4. As you can see from the above image, I have set up a simple HTML file to style it using SASS.

Step 3: Create a SASS/SCSS file

1. Inside the “Explorer” panel, click on the New File button.

   

2. Enter any name and press Enter. Make sure to add .sass or .scss at the end of the filename.

   

3. Now, write the SASS code to style your HTML file. For example, I am entering the following code:

   .card {
   position: relative;
   background-color: red;
   .card__name {
   background-color: blueviolet;
   }

4. Click on the Watch Sass button from the Status bar at the bottom of VS Code.

   

5. Finally, the extension will generate a .css and map.css file inside the project folder. The following image shows our output.

   

As you may have noticed, the Live Sass Compiler extension compiles your SASS files in real time. Also, choosing SASS over directly writing CSS removes many syntax requirements, like blocks and semicolons. It makes it easy to execute CSS.