How to minify, complile and output your sass/scss to a specific file location

Using Sass or Scss is a great way to simplify the way you write css. However it requires compiling to css in order for it to be readable in a browser.

Here's how to set up automatic minification, compilation and output of the css file to a desired path.

Requirement: This assumes you're using VSCode.

Steps

1. Install the VSCode Live Sass Compiler extension by selecting View + Extensions in the main menu and searching for Live Sass Compiler.
2. Create a folder .vscode at the root of your project if it doesn't already exist
   • Create a file settings.json in the new .vscode
3. Paste the following settings into your .vscode/settings.json file

{
  "liveSassCompile.settings.formats": [
      {
        // compress the css file
        "format": "compressed",
        // add .min.css as the extension
        "extensionName": ".min.css", 
        // define the output/save path
        "savePath": "~/../_site/assets/styles/"
      }
    ],
    "liveSassCompile.settings.excludeList": [
      "/_styles/!screen.sass",
      "**/node_modules/**"
    ],  
}

Additional settings and config are documented here in the Github repo.