Getting Started with the Web Workbench

Mindscape Web Workbench provides Visual Studio integration for three Web productivity languages. Sass and Less are extensions to CSS which support variables, functions, mixins and other techniques to reduce duplication and coding effort. CoffeeScript is a simple scripting language which gets converted to JavaScript, enabling you to write your client-side scripts in a safer and simpler language than raw JavaScript.

Visual Studio 11 support: Web Workbench support for the Visual Studio 11 Developer Preview is currently alpha. See below for known issues and limitations.

Creating Files

Web Workbench adds three templates to your New File dialog, in the Web tab: Sass SCSS Style Sheet, Less Style Sheet and CoffeeScript File. You can use these templates to create your files and they will be automatically hooked up to syntax highlighting, Intellisense and/or compilation as appropriate (see Features).

Creating sass, coffeescript and less files

Features – Sass

Generated CSS file For Sass SCSS files, Web Workbench provides:

Syntax highlighting
Intellisense
Warnings of syntax errors
Warnings of unknown variables and mixins
Go to variable or mixin definition
CSS file generation
CSS file minification - pro edition only.

Your CSS file will be generated in the same folder as the SCSS source, so your HTML pages can reference the CSS file at that location just as if you were writing the CSS by hand.

For information about writing Sass SCSS, see the Sass documentation. (Note: Web Workbench doesn't support the old SASS syntax, only the new SCSS syntax.)

Features – Less

For Less files, Web Workbench provides:

Syntax highlighting
Intellisense
Warnings of syntax errors
Warnings of unknown variables and mixins
Go to variable or mixin definition
CSS file generation - pro edition only.
CSS file minification - pro edition only.

For more information about writing Less, see the Less documentation.

Features – CoffeeScript

For CoffeeScript files, Web Workbench provides:

Syntax highlighting
JavaScript file generation
JavaScript file minification - pro edition only.

Your JavaScript file will be generated in the same folder as the CoffeeScript source, so your HTML pages can reference the JS file at that location just as if you were writing the JavaScript by hand.

For more information about writing CoffeeScript, see the CoffeeScript documentation.

Customising Highlighting

To customise highlighting, use Tools > Options > Fonts and Colours. Sass and Less syntax highlighting uses the standard CSS colours (e.g. CSS Selector), plus a couple of new settings beginning with the name CSS Extension. CoffeeScript uses the Script colours (e.g. Script Identifier).

Coffeescript and Sass beside each other

Visual Studio 11 Support

Web Workbench is available for the Visual Studio 11 Developer Preview, but syntax highlighting currently requires VS2010 to be installed on the same machine (and CoffeeScript syntax highlighting is unavailable even then). We expect to address these issues in a future release. Web Workbench on VS11 should be considered alpha!