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 for 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

The Visual Studio Code editor provides an amazing option to install an extension for compiling ".scss" files and outputting a ".css" file. Additionally, it can generate a minimized version of the compiled CSS file. This extension helps front-end developers build instant CSS files for their projects. The following tutorial describes how to set up a live SASS extension and compile the files.

Step 01

Open the Visual Studio Code editor.

Step 02

Next, navigate to the Extensions menu from the Visual Studio Code editor's sidebar.

Step 03

Search for the Live Sass Compiler and install it.

Step 04

Next, create a new "scss" folder, or you can name it whatever you want. Then, create a new "styles.scss" file inside that "scss" directory, and the extension will automatically compile all the scss code into a css file. All the compiled code will be output inside the dist folder.

🚀 Templates Use SASS

We have developed several responsive web templates using the SASS compiler. Here are a few templates that were built using 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 link. Next, click the Add Item button to add more settings.

Step 03

Next, click on the Edit in settings.json link.

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 compile SASS to CSS for your next project.