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
    }
  ]

For more effectiveness, use live server extension on vscode.

HAPPY😃 CODING👩‍💻 !!!

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.