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.

    Extensions Tab
    Click on the Extensions tab from the sidebar.

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

    Search Live Sass Compiler
    Search for “Live Sass Compiler” from the search box.

  3. Click on the Install button.

    Install Live Sass Compiler
    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.

    Open Folder
    Click on the Open Folder button from the Explorer tab.

  2. Open the folder from your preferred directory.

    Folder Directory
    Locate your project folder from the preferred directory.

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

    Project Files
    Source or project files inside the folder.

  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.

    New File Button
    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.

    SASS Filename
    Enter the filename with .scss or .sass extension.

  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.

    Watch Sass
    Click on the Watch Sass button from the Status bar.

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

    The output shows the styling we achieved using SASS.

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.

Join the conversation

  1. hello I am using VS Code with extension Sass Live Compiler. When I change .scss file via Chome devtool, the file did change in VSCode,it is saved on disk with new data, I have set AUTO SAVE in VSCode, BUT extension Sass Live Compile dont compile it until I manualy save the .scss file. Can somebody help ? Thanks


Leave a Comment