Live Sass Compiler | VSCode Extension

Settings

• liveSassCompile.settings.format

  ---

• liveSassCompile.settings.savePath

  ---

• liveSassCompile.settings.extensionName

  ---

• [NEW] liveSassCompile.settings.formats : To setup Format (style), Extension Name & Save location for exported css [Multiple Format Supported].

  • Format can be _expanded_, _compact_, _compressed_ or _nested_. _Default is expanded._

  • Extension Name can be .css or .min.css. Default is .css.

  • [New] Save location is relative from workspace root or your Sass files.

    • Default value is null. (null means, it will generate CSS in the location of scss/sass. By The Way, It is null, NOT "null").

    • ”/” denotes relative to root.

    • ”~” denotes relative to every sass file. - Complex Scenario. (Checkout the example)

  • Example :

          "liveSassCompile.settings.formats":[
              // This is Default.
              {
                  "format": "expanded",
                  "extensionName": ".css",
                  "savePath": null
              },
              // You can add more
              {
                  "format": "compressed",
                  "extensionName": ".min.css",
                  "savePath": "/dist/css"
              },
              // More Complex
              {
                  "format": "compressed",
                  "extensionName": ".min.css",
                  "savePath": "~/../css/"
              }
          ]
    

  ---

• liveSassCompile.settings.excludeList: To Exclude specific folders. All Sass/Scss files inside the folders will be ignored.
  • default value :

          "liveSassCompile.settings.excludeList": [ 
              "**/node_modules/**",
              ".vscode/**" 
          ]
    

  • You can use negative glob pattern.

    • Example : if you want exclude all file except file1.scss & file2.scss from path/subpath directory, you can use the expression -

      "liveSassCompile.settings.excludeList": [
          "path/subpath/*[!(file1|file2)].scss"
      ]
    

  ---

• liveSassCompile.settings.includeItems: This setting is useful when you deals with only few of sass files. Only mentioned Sass files will be included.

  • NOTE: No need to include partial sass files.
  • Default value is null
  • Example :

      "liveSassCompile.settings.includeItems": [
          "path/subpath/a.scss",
          "path/subpath/b.scss",
      ]
    

  ---

• liveSassCompile.settings.generateMap: Set it as false if you don’t want .map file for compiled CSS.
  • Default is true.

  ---

• liveSassCompile.settings.autoprefix : Automatically add vendor prefixes to unsupported CSS properties (e. g. transform -> -ms-transform).

  • Specify what browsers to target with an array of strings (uses Browserslist).

  • Set null to turn off. (Default is null)

  • Example:

     "liveSassCompile.settings.autoprefix": [
          "> 1%",
          "last 2 versions"
      ]
    

  ---

• liveSassCompile.settings.showOutputWindow : Set this to false if you do not want the output window to show.
  • NOTE: You can use the command palette to open the Live Sass output window.
  • Default value is true

  ---