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

There'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.

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 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

• Download Mindscape Web Workbench Free
• Web Workbench Support Forum