Visual Studio Code SASS/SCSS Compiler

Compile sass/scss in visual studio code without need of installing Node.js

Table Of Contents

• Features
• How To
• Config File
• Extension API
• Known Issues

Features

• Single Compilation: compile any sass/scss file without need of being in a sass/scss project:
  • see in vscode output
  • compile it next to current sass/scss file
  • compile it anywhere you want
• Live View: see the compiled css next to sass/scss as you edit
• Compile Project^*: compile a sass/scss project
• Watch Project^*: use sass/scss watch feature to compile your project

How To

Single Compilation-Live View:

1. open any .{sass,scss} file
2. click the icon at top right of editor
3. choose the compilation mode

Compile Project:

1. open a vscode workspace(folder)
2. add a sassconfig.json file at the root of your sass/scss files
3. a status bar item appears (Compile Project)
4. click on that and your project will be compiled

Watch Project:

1. follow steps 1 and 2 of previous section
2. right click on sassconfig.json file
3. click Watch Project and your project will be watched
   • open commands by pressing F1
     • destroy watch: destroys an active watch
     • show active watches: shows the current active watches

Config File

Here is the syntax of sassconfig.json file:

{
    outDir?: string,
    removeComments?: boolean,
    sourceMaps?: boolean,
    indentType?: "space" | "tab",
    indentWidth?: number,
    linefeed?: "cr" | "crlf" | "lf" | "lfcr",
    omitSourceMapUrl?: boolean,
    outputStyle?: "expanded" | "compressed"
}

Extension API

This extension provides some commands that can be used by other extensions

Current Commands:

• vscode-sassc.api.render
  • parameters
    • sass.Options options: see sassCompileOptions
  • returns sass.Result: see sassResult

Known Issues

• nothing yet!

*: needs sassconfig.json file to be in the root of sass/scss project