Scott Hanselman

CoffeeScript, Sass and LESS support for Visual Studio and ASP.NET with the Mindscape Web Workbench

July 22, '11 Comments [30] Posted in ASP.NET | ASP.NET MVC | Open Source | Tools
Sponsored By

imageThere's some really impressive stuff happening in the .NET Community lately. Folks are reaching outside their standard built-in tools and pulling inspiration from everywhere. It's been said that (some) Microsoft developers don't like to use tools or technologies that aren't built in to Visual Studio. However, myself and others have been pushing the concept of LEGO blocks snapping together. Rather than thinking of Visual Studio as a giant single block, consider it as a small block amongst many others. Feel empowered to choose the technologies that work for you and discarding the ones that don't. I talked about this LEGO analogy in my DevDays keynote in The Netherlands earlier in the year.

Snap in tools like the HTML5 Web Standards Update for Visual Studio, loggers/profilers/debuggers like Glimpse, MiniProfiler and ELMAH, Package Managers like NuGet and OpenWrap,  all work together to make your development experience more enjoyable (and some new Visual Studio Styles/Themes and a little fresh wallpaper never hurt either! You can even make VS2010 look like 2008 if it make you happy).

One of the most impressive (free!) tools I've seen lately is the Mindscape Web Workbench. It is a 100% free plugin for Visual Studio 2010 to provide CoffeeScript, Sass and Less editing.

What? CoffeeScript? Sass? Less? What are these silly names and why should I care? Well, remember when I blogged about "fanciful names?" These are some names you'll want to know about. Here's a little about each and how Mindscape makes them fun for Visual Studio Developers.

CoffeeScript

"CoffeeScript is a little language that compiles into JavaScript." I've blogged a few times lately about how JavaScript is becoming not just THE ubiquitous language on the web, but also a valid target for high level languages to compile to. Script# compiles C# to JavaScript, GWT compiles to JavaScript, ClojureScript compiles to JavaScript, etc. However, each of these languages has semantics that require some significant mapping to JavaScript. They aren't JavaScript and don't know about it.

Here's the difference with CoffeeScript. "The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime."

CoffeeScript "uplevels" JavaScript to make it more expressive and more idiomatic. You know when you're explaining something and you can't think of a word? Or perhaps you don't know the right word? CoffeeScript adds those new words to JavaScript and you find yourself going, YES! That's what I meant to say!

For example, from their website, here's some CoffeeScript:

# Assignment:
number = 42
opposite = true

# Conditions:
number = -42 if opposite

And here's what it "compiles" into:

number = 42;
opposite = true;
if (opposite) {
number = -42;
}

So what, you say. How about:

# Existence:
alert "I knew it!" if elvis?

Turning into...

if (typeof elvis !== "undefined" && elvis !== null) {
     alert("I knew it!");
}

Now we're talking. See how one is more expressive (and more enjoyable) then the other? This has a multiplying effect and makes your CoffeeScript code more expressive and your resulting JavaScript more robust.

list = [1, 2, 3, 4, 5]

square = (x) -> x * x

math =
root: Math.sqrt
square: square
cube: (x) -> x * square x

cubes = (math.cube num for num in list)

becomes

list = [1, 2, 3, 4, 5];
square = function(x) {
return x * x;
};
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
cubes = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = list.length; _i < _len; _i++) {
num = list[_i];
_results.push(math.cube(num));
}
return _results;
})();


Remember how jQuery made you feel empowered? Released from tedious DOM code? Well, CoffeeScript does that for tedious JavaScript code.

Here's what it looks like in Visual Studio. Oh, yes.

CoffeeScript in Visual Studio

All this is enabled by the Free Web Workbench.

Sass

CSS is great and we all have a love hate relationship with it. When it works, it's great. Demos are nice, but the reality of CSS (much like that of JavaScript) is that it never quite reads like the fine poetry you were hoping for.

Two syntaxes are trying to improve on CSS in the same way that CoffeeScript improves on JavaScript. Remember that the reality is we can't change CSS and JavaScript, but we can change the Domain Specific Language that we write them in. You can't change Aseembler, but you can use C. Then layer in #defines, or perhaps just use C++...you get the idea. Up level your abstractions and favor the more expressive language.

Sass could mean Super Awesome Style Sheets. It's a meta-language on top of CSS. A better, redesigned CSS that is still a super set of CSS itself. CSS, cascading though it is, is still very flat.

If you write this SASS, it makes sense, doesn't it? It's intuitive and you might even think it's CSS as it is.

.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}

Here's the resulting CSS:

.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc; }

This clean nesting works with #IDs of course as well such that this Sass:

#navbar {
width: 80%;
height: 23px;

ul { list-style-type: none; }
li {
float: left;
a { font-weight: bold; }
}
}

expands to this valid CSS:

#navbar {
width: 80%;
height: 23px;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}
#navbar li a {
font-weight: bold;
}

Which would you rather write? I'm sold.

Sass uses an indentation syntax primarily but you can use brackets rather than indentations and semicolons rather than new lines. It's up to you. I like mine to look like nested CSS.

Your Sass files are converted into CSS as you click save in Visual Studio. It's a wonderfully clean integration.

Sass is sassy CSS

Sass is attractive because you really don't need to learn another syntax. You just use scoping and indenting rules you already know and you get cleaner CSS.

But, there's another alternative...

Less

Less extends CSS and adds more dynamic behaviors, variables, functions and more. Because it's more complex and a more dynamic translation, LESS actually runs on the client side and is supported by a client side JavaScript file called http://lesscss.googlecode.com/files/less-1.1.3.min.js.

Because of this, the Web Workbench doesn't do the same automatic developer-time conversion of LESS files. For me, this makes LESS (ahem) less attractive.

That said, you still these features from the Web Workbench, which is nothing to sneeze at.

  • Syntax highlighting
  • Intellisense
  • Warnings of syntax errors
  • Warnings of unknown variables and mixins
  • Go to variable or mixin definition

Here's an example LESS file...

@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}

This is then compiled and results this CSS. Note what happened with functions, statements and variables:

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

Interesting stuff.  I think it's important not only that you, Dear Reader, give this stuff a good hard look, but that you continue to look for ways that the open source community, both .NET and otherwise, are innovating. You maybe able to integrate these tools easily into your existing projects and not only have more fun but be more productive.

Thanks so much to the folks at Mindscape for releasing this free and elegant tool!

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Friday, July 22, 2011 10:54:27 PM UTC
.less can run server side, with Dot Less. It's just as simple as registering an HTTP Handler for the extension .less.
Friday, July 22, 2011 11:18:57 PM UTC
We've had some really great feedback about the Web Workbench and supporting compiled LESS is something we are looking at adding support for in the near future.

The updates through the Visual Studio Extension Manager is a great way for folks to keep grabbing the latest bits - bug fixes, general improvements and new features.

Thanks,

John-Daniel Trask
Friday, July 22, 2011 11:43:21 PM UTC
Sass looks really nice, and LESS brings an interesting concept... actually a combination of the two would be ideal!
Saturday, July 23, 2011 12:21:06 AM UTC
I've been using Chirpy for LESS, but it's not perfect. I hate seeing all the squigglies under my LESS code because it's not really CSS. This still seems to be happening with Mindscape's tool. As Fredrick said, LESS can be compiled server side. I rather do it manually when I'm done with styles and use javascript compiler when designing. It's not like it's going to change very often.
What bothered me the most is that you still have to write stuff like a:hover separately, you can't just do something like:
a {
text-decoration: underline;
:hover { text-decoration: none; }
}

because this translates to:
a { text-decoration: underline; }
a :hover { text-decoration: none; }

and that does not work as intended. And this is a trivial example. But what if you have a .big nested in an anchor element in LESS or SCSS? Is that really a .big or a.big? Two very different things. But all in all LESS and SCSS are still way better then writing CSS the old fashioned way.

I hope Mindscape includes the LESS compiler and removes those annoying sqiugglies.
Saturday, July 23, 2011 12:55:35 AM UTC
I'm surprised no one's developed a Compass compiler that integrates into Visual Studio. Compass let's you add dynamic mix-ins and functions to Sass. Like Less - but all on the server side.

It's easy to install, just install ruby (www.rubinstaller.org) and grab Compass (www.compass-style.org).

I build a little Windows service that will watch a folder and subfolders for modified Sass files and automatically recompile them into css. If this would be useful for you, @lucasjans on Twitter.
Saturday, July 23, 2011 1:20:11 AM UTC
IMHO, the introduction is not whole. Sass supports a small set of extensions called SassScript. SassScript allows properties to use variables, arithmetic, and extra functions. please see: a@href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#sassscript"
Saturday, July 23, 2011 7:09:21 AM UTC
Thanks dear scott nice article,
but really what are we doing ? why no one tries to change some of these assemblies ( I mean big companies which are holder of browsers ) I mean javascript , css or event html? I feel that like old asp we all trying to cover lack of new technologies we need by creating some add-on frameworks and etc.it seems that such VS 5 we will have lots of components active x which will confuse us in the future for finding which is better really or which is not ... I can't beleive that an idea from about 20 years ago is the best one for today ...
Saturday, July 23, 2011 1:00:15 PM UTC
Tried this - 100% over-hyped ..... it crashed VS2010 within seconds ..... I will stick with Chirpy which has given faultless service for may months.
Saturday, July 23, 2011 11:14:34 PM UTC
@John, I'd love to resolve the issues you're having. It absolutely should not be crashing VS2010 and that behavior is not something we have seen before. Having said that, perhaps there are extensions conflicting and causing issues (we do have folks working with Chirpy and the Web Workbench happily so it shouldn't be that).

Making sure a Visual Studio Extension works well is like all installable software - we've tested it on many different setups and configurations. We have many users without any issues at all and dog food the software ourselves but inevitably some configurations we haven't seen do cause hiccups. We would love feedback on those situations so we can make this free tool better for everyone :-)

@gligoran We're looking at getting the LESS compiler included as it has been requested a lot. We tighten up on the squigglies with each release. If you have specific situations do not hesitate to send them to us and we'll ensure the parser is doing the right thing. Squigglies are only good if they are showing actual mistakes, otherwise, as you say, they're just annoying!

John-Daniel Trask
Sunday, July 24, 2011 12:44:21 AM UTC
Scott, what are you thinking? Why would you publish these last two articles just before the first nice weekend we've had in weeks (I'm in Western Washington)? Next time try to publish these type of articles before crappy weekends please :).
Sunday, July 24, 2011 6:03:31 AM UTC
@gligoran, just write


a {
text-decoration: underline;
&:hover { text-decoration: none; }
}


Note the ampersand in front of :hover. This will do what you want.

Gidon
Sunday, July 24, 2011 2:12:54 PM UTC
@GidonJunge: I didn't know about that little trick. Thank you very much! I guess I have some LESS rewriting to do :)

@John-Daniel: That would be great to have a built-in LESS compiler.
There are a lot of squigglies in my styles, but an example from the starter ASP.NET MVC 3 application in the Site.css is the font-size: .85em. Note that there's no leading zero. I've checked this with the W3C validator and is valid CSS. Your editor marks it as syntax error, although it SCSS compiles it correctly. Also I would be great to have the Format Document functionality as CSS and other native Visual Studio documents have, but that's of lower priority.
But don't mistake my complaining for criticism. It's great to see proper SCSS and LESS support in Visual Studio :)

-- Goran
Sunday, July 24, 2011 3:30:49 PM UTC
@John-Daniel: I also forgot to mention that in cases like:
.line {
+ .line { /* some css */ }
> .something { /* some css */ }
}

the indented + and > are squiggled.
Sunday, July 24, 2011 11:01:12 PM UTC
I'm surprised Dot Less was not used out of the box and the javascript version was used instead. Less trumps Sass. It was the first to focus on using CSS as is and extending it which friendly to designers and web developers.

Vs SASS creating it's own DSL with crazy whitespace/tab issues targeted towards ruby programmers. (of course it now supports regular CSS, but only after Less came out).

The plugin will definitely have value when the Less syntax being supported without errors from within Visual Studio and Dot Less itself integrated.

Monday, July 25, 2011 5:14:53 AM UTC
I've also used the Chirpy plugin, and find it to be good for my needs. Not only does Chirpy support LESS, but also lets you run minification on CSS and JS, as well as combining multiple files into one.
Monday, July 25, 2011 9:23:05 AM UTC
LESS *can* run in the browser because it's JS - that doesn't mean that's how you *should* use it. See the http://www.dotlesscss.org/ or https://github.com/duncansmart/LessCoffee HTTP handlers (mine uses good old Windows Script Host)
Monday, July 25, 2011 10:22:53 AM UTC
For some reason i'm not getting syntax highlighting on .less files (works fine on .sass though).
Anybody else is having the same issue?
Tuesday, July 26, 2011 12:01:57 AM UTC

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

See <a @href="http://visualstudiogallery.msdn.microsoft.com/0cc86917-7f3a-4646-9a29-de997fe1ba23">CoffeeScriptRunnerVSPackage</a>.

It is part of my project <a @href="https://github.com/fredericaltorres/DynamicJavaScriptRunTimes.NET">DynamicJavaScript.Net</a> on Github, which is about using JavaScript from C# programs.

The JavaScript runtime used is Noesis JavaScript.Net which use a version of Google V8 from 2010, it is really fast.
Tuesday, July 26, 2011 1:07:42 PM UTC
Awesome stuff there - Sass really appeals over LESS though because it doesn't require delivery of a 34k JS file. I've been wishing for a way to have variables/constants in CSS for years now and this is a wish granted. Very little learning curve too, which is great.
Wednesday, July 27, 2011 12:38:18 PM UTC
I know these are just examples but, to me, the SASS examples make things less readable.
Thursday, July 28, 2011 3:13:17 PM UTC
Scott!

For LESS what about the haack's T4 template? I've never used it, but i remember coming across it in the past:
http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

Great article as always though :-) coffee script sounds interesting, but i'm already planning on learning knockout.js, backbone.js and maybe node.js! Too much javascript at the moment, exciting times
Thursday, August 04, 2011 1:27:36 PM UTC
Thanks, great! Interestingly written review. Using business process solutions it is the best way to obtain mobile software development.
Thursday, August 04, 2011 1:28:13 PM UTC
Thanks, Great! Interestingly written review. Using business process solutions it is the best way to obtain mobile software development.
Saturday, August 06, 2011 8:49:37 AM UTC
Loved VS doing less, sass and coffee stuff. But I feel like we stay in the dark for toooooooo much time before we see a ray. As always.
Thursday, August 25, 2011 9:40:07 PM UTC
BTW: You can use DotNetLess command line tool in "watch" mode. This will compile your .less file every time you modify it. This less you see the .css output as you are coding. Visual Studio will see the file change if you have it opened in an editor as well.

BOb
Friday, September 02, 2011 3:27:14 PM UTC
If I didn't know better, your article makes it sound like SASS only has nested styles and, while LESS has a whole bunch of extra stuff like variables, mixins and functions as well as nested styles. They're pretty much the same. SASS also have all those things.

However, what LESS does have that SASS doesn't, is the client-side translation via Javascript. It's not something I'd use in production, but it makes it easy to play around with LESS if you're just learning and want to try it out.
Friday, January 27, 2012 11:44:02 AM UTC

I'd have to agree with a number of commenters there's a lot of OLD OUTDATED MISSINFORMATION on blog posts that look at both Less and SASS, in particular citing the client-side compilation I've used Less for over 10 months now and not once have I used the client-side scripts. Everything I deliver is pure CSS.

Please update the blog post to make it clear that Less can be compiled OFF the client exceeding easy, there are a number of options.

SASS is nice too, I've used that on a number of projects also, currently I'm preferring less over SASS, but who knows that might change

Either via the command-line utility lessc which is packaged with the official less download, which I originally wrote a wrapper for that listened for file changes and automatically generated the CSS to be delivered. lesscss.org

OSX has the Less.app that works a treat, this is currently my favourite util on OSX. less.app

Another OSX app is SimpleLess, this looks similar to the Less.app but I've never used it : SimpleLess

As for Windows you can either write your own wrapper, it's really trivial using .net FileSystemWatcher but there are also some other solutions :

WinLess, I've used this when using a windows box and works a treat. Works very similar to Less.app, watches files & folders for changes to .less files and automatically compiles the CSS on changes to these files Win Less.

If you're using Visual Studio, that I imagine people reading this post are WinLess also have a really simple script that allows you to add the compilation of the CSS to the build event of the Visual Studio Solution. So rather than generating the CSS on every save it will compile on when you compile your C#, or whatever.

Another option is dotless, I found this not a great tool and TBH I'm not convinced on getting the server to do the complication via a HTTPHandler IMHO that's going to be asking for trouble, but nevertheless it works DotLessCSS





Wednesday, February 08, 2012 11:47:20 AM UTC
The benefit of LESS is we do not need to care about output.

The worse side of SASS and LESS is that we cannot easily append live updates directly from firebug , back to css files.

In normal cases you have SAVE Button in LIVE preview mode of CSS files inside firebug. And if you do not use webkit stuff you can save back.

I keep webkit stuff, gradients etc in different files.
Tuesday, March 20, 2012 9:54:58 PM UTC
Thanks for the tip on the extension.
Thursday, September 27, 2012 9:46:55 PM UTC
DotLess is not so hot...it broke my build with the latest Twitter Bootstrap release. I discovered it is just a port of less.js and lacks full LESS compatibility. I switched to http://winless.org which directly uses less.js and therefore offers full compatibility.
Pat James
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.