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).

Installation

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

Settings

• liveSassCompile.settings.format : To customize exported CSS style - expanded, compact, compressed or nested.

  • Default is expanded.

• liveSassCompile.settings.savePath : To customizable file location of exported CSS. Set absulate path from workspace Root.'/' stands for your workspace root.

  • Example: /subfolder1/subfolder2. All generated CSS file will be saved at subfolder2.
  • NOTE: If destination folder does not exist, folder will be created as well.
  • Default value is null, CSS will be generated at same directory of every SASS/SCSS files.

• liveSassCompile.settings.extensionName : To customize extension name (.css or .min.css) of generated CSS.

  • Default is .css.

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

  • default value :

        [ 
            "**/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 -

    [
        "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 :

      [
          "path/subpath/a.scss",
          "path/subpath/b.scss",
      ]

Extension Dependency

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

What's new ?

• Version 0.4.0 (21.08.2017)

  • [Renamed] liveSassCompile.settings.excludeFolders is renamed to liveSassCompile.settings.excludeList.

  • [Fixed] You can set glob pattern to exclude files through liveSassCompile.settings.excludeList settings. 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 -

        [
            "path/subpath/*[!(file1|file2)].scss"
        ]

  • [New Settings #8 ] 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. [Thanks PatrickPahlke].

• Version 0.3.4 (15.08.2017)

  • [Fixed #7] Duplicate Output. [Thanks Tomekk-hnm].

• Version 0.3.3 (01.08.2017)

  • [#5] Critical Fix Update for Linux & macOS. (Thanks a lot to Shea Fitzek).

• Version 0.3.2 (01.08.2017)

  • [Hot Fix] CSS & map link was broken.

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.savePath": "/dist/css",
    "liveSassCompile.settings.format": "compressed",
    "liveSassCompile.settings.extensionName" : ".min.css",
    "liveSassCompile.settings.excludeList": [
       "**/node_modules/**",
       ".vscode/**"
    ]
}