Install and Customize The Live Sass Compiler

#vscode #sass #scss #css

Install

step 1: Go to vscode and find the extension named "Live Sass Compiler", which is now maintained by Glenn Marks at the time of writing this article.

step 2: At the very bottom of the vscode, click on Watch Sass. If any case, you don't find Watch Sass, then go to .scss file (not partial scss file ) and you will able to click on Watch Sass.

Customize

On vscode editor, press ctrl + shift + p
On search bar, type open setting
then click on
preference: open user setting(JSON) and you will be in settings.json file.

In the settings.json, put the following code very last of the json.

"liveSassCompile.settings.formats": [
    //by default generate css in root directory
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": null,
      "savePathReplacementPairs": null
    },

    //generate compressed css 
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": null,
      "savePathReplacementPairs": null
    },

    // generate css in another folder named css
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css",
      "savePathReplacementPairs": null
    }
  ]