Setup Live SASS compiler for Visual Studio Code

Sass(syntactically awesome style sheets) is a popular CSS pre-processor that helps developers write less repetitive CSS codes and generate more organized and maintainable scripts. It is an extension of CSS and offers fantastic features like variables, nesting, mixins, functions, import, include, extends, and many more. 

Writing maintainable CSS codes when working on large projects or developing templates is essential as a front-end developer. Adding more CSS code and repeating the same codes in a single file makes managing things difficult once the project requires more layouts. Often, It becomes a nightmare for a frontend developer if multiple people work on the same project.

Sass is the tool that eliminates all the issues. There are several ways to compile the Sass code and generate regular CSS code that browsers can understand. The following tutorial will explain all the steps to set up the Visual Studio Code editor’s extension, which compiles the Sass file and generates CSS code.

Keynotes About Sass:

• Designed by Hampton Catlin
• Developer Natalie Weizenbaum, Chris Eppstein
• Launched November 28, 2006
• Filename extensions .sass, .scss

Source Credit: wikipedia.org

Setup Live Sass Extension:

Step 01: Open the Visual Studio Code editor.

Step 02: Navigate to the Extensions menu from the sidebar.

Step 03: Search for the Live Sass Compiler and install it.

Step 04: Next, create new styles.scss file inside the scss directory, and the extension will automatically compile all the scss code into a css file. All the compiled code will be generated inside the dist folder.

Templates Uses Sass:

The following templates are built using the Sass.

SmartFix – Computer Repair Center Template

Pakkapati – Flooring Service Template

Petmate – Animal Care Center HTML5 Template

Advanced Settings

Step 01: In the Visual Studio Code search box, search for “open settings”. Select the “Preferences: Open Settings (UI)”

Step 02: From the “Extensions” menu, click on the “Live Sass Compiler”. Click “Add Item” to add more settings.

Step 03: Next, click on the “Edit in settings.json”

Step 04: It will open a settings.json file, and now you can add a custom settings code here for the live server.

Step 05: All settings information you will get from this following link.
https://github.com/glenn2223/vscode-live-sass-compiler/blob/HEAD/docs/settings.md

Step 06: If you want to avoid creating a map for the CSS output, add “generateMap”:false in that file and save it.

Step 07: You can also change the source and output directory. For example- I would like to read the scss file from the “src” directory and output the file into the “css” folder. Add the following lines of code in the settings file.

Full settings.json:

You can copy the following JSON codes and add it to your Visual Studio Code editor.

"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css",
      "savePathReplacementPairs": null,
      "generateMap": false
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/css",
      "savePathReplacementPairs": null,
      "generateMap": false
    }
  ],
  "liveSassCompile.settings.excludeList": ["/**/node_modules/**", "/.vscode/**"],
  "liveSassCompile.settings.includeItems": ["/src/styles.scss"],
  "git.confirmSync": false,

I hope this tutorial will help you to compile SASS to CSS for your next project.