Visual Studio + Sass + Less + CoffeeScript = Web Workbench

You may have noticed that this new-fangled Web thing is getting quite a bit of traction at the moment. And these days you can’t get away with static Web pages built with table-based layouts and presentational markup. It’s all script this and stylesheet that and jQuery the other. Why, even those time-hallowed animated GIFs of little men digging now incur only sneers from the Weberati.

But when you’re writing one of these modern Web pages, don’t you find yourself wishing for something a bit less repetitive than CSS and a bit neater and safer than JavaScript? Well, you’re not alone. A bunch of smart folks have invented extensions and alternatives: languages that do the same jobs as CSS and JavaScript, but are a bit easier on your fingers and your brain. Three prominent productivity languages are Sass and Less, which provide extensions to CSS to reduce duplication and promote reuse, and CoffeeScript, which provides a simpler and safer syntax than JavaScript but still compiles down to JavaScript to run in the browser.

Today, we’re releasing a FREE Visual Studio extension that supports all three of these languages. Mindscape Web Workbench gives you Visual Studio syntax highlighting for Sass, Less and CoffeeScript, and automatically generates the corresponding CSS and JavaScript into your Web project so you can just reference it on your Web pages as though you’d written it by hand*. For Sass and Less, Web Workbench also provides Intellisense, outlining, “go to definition” support — very handy for navigating around large stylesheets — and of course the ever-popular error squigglies!

How does it work? Easy! Just install it into Visual Studio 2010 from the Gallery or using the Extension Manager, and you’ll see three new templates in the Web tab of the Add Item dialog — Sass SCSS Style Sheet, Less Style Sheet and CoffeeScript File. Choose the one you want and start coding — we’ll do the rest! Take a look at the Getting Started guide for more information. And of course the Sass, Less and CoffeeScript home pages are full of great information on the languages themselves.

We think Sass, Less and CoffeeScript are great little helpers for Web developers, and Web Workbench is our way of sharing the love. Give them a try and see if you don’t fall in love too!

As always, we love to hear feedback. Are there other features or improvements you’d like to see in Web Workbench? Have you found a *gasp* bug? Would you like to see us add support for your favourite Web productivity language? Let us know in the forums!

You can learn more about Web Workbench here, or download it FREE from the Visual Studio Gallery here.

Happy coding!

* For Less files, we don’t generate CSS because Less files are typically referenced directly and translated to CSS within the browser. See the Getting Started guide for a link to the Less JavaScript include file.

22 Responses to “Visual Studio + Sass + Less + CoffeeScript = Web Workbench”

  • Does this also work with “web site” projects (or only with “web application” projects)?

  • Some features work with “Web site projects,” but not all. Things that work: syntax highlighting, intellisense and outlining/go to definition. Things that don’t work: item templates and automatic compilation. You can get around the lack of item templates by choosing Text File in the Add Item dialog and entering the .scss, .less or .coffee file extension — the file extension is enough to give you the highlighting etc. This should be good to go for Less because Less isn’t usually compiled down to CSS anyway, but for Sass or CoffeeScript you’d still need to arrange to run the compiler somehow (or you might be able to compile on the fly by mapping the file extension in IIS — not sure about this).

  • I’ve been looking for a good SASS plugin for VS for weeks and just this morning was going to look into rolling my own. Thanks, guys!

  • [...] Visual Studio + Sass + Less + CoffeeScript = Web Workbench – The folks over at Mindscape announce a new (free) Visual Studio 2010 Extension which brings support for Sass, Less and CoffeeScript to the Visual Studio IDE, offering syntax highlighting, Intellisense, outlining, go to definition support, and interactive error highlighting. [...]

  • That looks exciting !)

  • If licensing were free, what would be the downsides of using the Microsoft stack for a website?…

    Licensing – To the original question about Licensing. Microsoft clearly wants you to run Windows. That’s basically it. ASP.NET, IIS, and ASP.NET MVC are all free. There’s no licensing for the frameworks, and the Free version of Visual Studio is extre…

  • [...] Read more about it here or simply go straight to the download page [...]

  • This looks really cool, thanks for this!

    Is there a way to disable the IntelliScense at least for Sass?
    It conflicts with other VS plugins (ViEmu).

  • It’s not currently possible to disable the intellisense — I’ll see if we can add an option for this.

  • I created an extension to execute CoffeeScript and JavaScript programs from Visual Studio 2010.

    A video: http://www.youtube.com/watch?v=HetoziaPPII

    Th extension: http://visualstudiogallery.msdn.microsoft.com/0cc86917-7f3a-4646-9a29-de997fe1ba23

    It is part of my project https://github.com/fredericaltorres/DynamicJavaScriptRunTimes.NET

  • Is it going to be available via NU.GET, just love that!

  • It will be if Microsoft allow for providing Visual Studio extensions (VSIX) via nuget. Until then we can’t do it via Nuget sorry.

  • For website projects, I think you’d need a build provider.

  • Is there any way to have this template available in a non-website project? To clarify, I started working on an existing project, and it is a website, but I guess it doesn’t use the regular website project template because when I go to add new item, the “Visual C#” tab doesn’t expend into more tabs. It does contain, among other file types, CSS and JavaScript, but no “Web” tab and no SASS, LESS or CoffeeScript files (after I installed this package, obviously).

  • Hi Ilia! The templates should be available in “normal” Web projects (Web Application projects as they are also known). They don’t seem to be available in Web “sites.” Web “sites” have a very cut-down project system and don’t fully support Web Workbench — specifically they don’t allow us to compile SASS or CoffeeScript. You can still get highlighting though, just choose the Text File template but give the file an extension of .scss, .less or .coffee — highlighting triggers on file extension, no need to use a specific template.

  • This is REALLY COOL! I’d AWESOME if .less files compiled server-side to .css though. :/

  • Hi Ozzie,
    This is now included in version 2 as a pro feature. I hope that helps.

  • I agree that it looks a nice product (very nice product) – one that I would be happy to pay for. But it would be better to make it clear that it is targeted at “Web Application” projects and does not really fit very well with “Web Site” projects. Alsas I use these.

    If someone wrote a small add-in (toolbat button) that compiled sass files then I would buy the Pro version.

  • Hi Trevor,

    We’re working on an update that should make it work with Web Sites. We’re hoping this will ship within the next couple of weeks. Keep an eye on the blog for news!

  • great work! Do you plan support for VS 2011 and CoffeeScript?
    We would especially like to see features like that:
    - set breakpoints in CoffeeScript and the extension translates the breakpoint to the correct line in the generated JavaScript
    - Prevent changes in the generated JS files or ask to transform them back into CoffeeScript upon save

  • Hi Phil,

    You can run Web Workbench in VS11 today, with the constraint that VS2010 must be installed on the same machine (we’re not sure what the dependency is, but we don’t want to put too much time into sorting it out until VS11 is a bit more stable!).

    We haven’t investigated debugging yet but we’ll put that on the forward load — thanks for the suggestion. Preventing changes in the generated JS files is probably not possible, because they are after all just text files, and doing a two-way transform from JavaScript to CoffeeScript is definitely not an option.

  • Hello Ivan,

    thanks for your reply. Since syntax highlight for Coffee does not work in VS11 (as stated on the site), we did not install the extension yet.
    Thanks for looking into the debugging thing. Currently we prevent changes in the JS files by simply setting them “read-only” via a patched coffeescript compiler. But it would be nice to have this support directly inside VS.
    You can also contact me on the email I used here for further discussion of the subject.

  • Leave a Reply

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top