Live Sass Compiler

[If you like the extension, please leave a review, it puts a smile on my face.]

[If you found any bug or if you have any suggestion, feel free to report or suggest me.]

A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.

Usage/Shortcuts

1. Click to Watch Sass from Statusbar to turn on the live compilation and then click to Stop Watching Sass from Statusbar to turn on live compilation .

2. Press F1 or ctrl+shift+P and type Live Sass: Watch Sass to start live compilation or, type Live Sass: Stop Watching Sass to stop a live compilation.

3. Press F1 or ctrl+shift+P and type Live Sass: Compile Sass - Without Watch Mode to compile Sass or Scss for one time.

Features

• Live SASS & SCSS Compile.
• Customizable file location of exported CSS.
• Customizable exported CSS Style (expanded, compact, compressed, nested).
• Customizable extension name (.css or .min.css).
• Quick Status bar control.
• Exclude Specific Folders by settings.
• Live Reload to browser (Dependency on Live Server extension).
• Autoprefix Supported (See setting section)

Installation

Open VSCode Editor and Press ctrl+P, type ext install live-sass.

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

  ---

Extension Dependency

This extension has dependency on Live Server extension for live browser reload.

What's new ?

• Version 1.2.0 (21.12.2017)

  • [New Features #26] savePath setting updated. You can now specify savePath location relative to your Sass files. See Settings section for more details [Thanks Marius]

  • [Bug Fixed #25] No more extra new line in generated CSS. [Thanks Shahril Amri]

  • [Bug Fixed #33] Now firefox is recognizing source scss file. [Thanks Felix]

  • [Bug Fixed] Regex pattern fixed for savePath.

• Version 1.1.0 (01.11.2017)

  • [NEW #19] Support for autoprefix in generated CSS. (see settings section for more) [Thanks a lot to boyum for sumitting the PR #22]

  • [Bug fixed #20] : Fixed liveSassCompile.settings.includeItems settings. [Thanks Hoàng Nam]

Changelog

To check full changelog click here changelog.

LICENSE

This extension is licensed under the MIT License

FAQ (For Beginners)

How to config the settings in my project?

Create a .vscode folder in the root of project. Inside of .vscode folder create a json file named settings.json. Inside of the settings.json, type following key-value pairs. By the way you'll get intelli-sense.

{
     "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        },
        {
            "extensionName": ".min.css",
            "format": "compressed",
            "savePath": "/dist/css"
        }
    ],
    "liveSassCompile.settings.excludeList": [
       "**/node_modules/**",
       ".vscode/**"
    ],
    "liveSassCompile.settings.generateMap": true,
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ]
}