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.
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).
Features – Sass
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).
