DEV Community

Cover image for Install and Customize The Live Sass Compiler
Sampad Sarker
Sampad Sarker

Posted on

Install and Customize The Live Sass Compiler

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.

Live Sass Compiler extension

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.

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.

open settings

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
    }
  ]
Enter fullscreen mode Exit fullscreen mode

settings json

For more effectiveness, use live server extension on vscode.

HAPPY😃 CODING👩‍💻 !!!

Top comments (1)

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 🫰