SASS, LESS & Coffeescript in Visual Studio mit der Web Workbench
CSS und Javascript sind die “kleinste” Schnittmenge von allen Browsern für die Erstellung von Web-Applikationen. Leider geht dabei etwas komfort verloren, daher lieben alle Webentwickler jQuery! SASS und LESS sind zwei Varianten, wie man “schöner” CSS schreiben kann und Coffeescript versucht Javascript Entwicklung zu vereinfachen. Aber immer der Reihe nach…
Was ist SASS?
SASS steht für Syntactically Awesome Stylesheets und kommt ursprünglich aus der Ruby Welt. SASS ist eine Erweiterung von CSS3 und erweitert den Syntax um einige praktische funktionionen, wie z.B. definition von Variablen oder erweiterte Verschachtelung von Style. Eine komplette Liste kann man hier sehen.
Grundsätzlich war hier die Idee: Man schreibt seinen Stylecode in SASS und er wird während der Entwicklung stetig nach CSS “kompiliert” bzw. transformiert (was man auch immer dazu sagen möchte).
Bsp:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Wird zu:
/* CSS */
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
Was ist LESS?
LESS “the dynamic stylesheet language” hat einen ähnlichen Funktionsumfang wie SASS und verfolgt dasselbe Ziel. Ursprünglich war die Idee hier, dass der Client (über Javascript) das CSS erzeugt. Ich habe auch schon über LESS hier gebloggt und dort eine Serverseitige Variante mit dem Framework Combres gezeigt.
Bsp:
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
Wird zu:
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
Was ist CoffeeScript?
CoffeeScript soll die Entwicklung mit Javascript vereinfachen. Javascript hat einige Tücken zu bieten und einige Schreibweisen sind etwas seltsam. CoffeeScript sieht für C# Entwickler etwas seltsam aus, da man bewusst auf einige Syntax-Elemente verzichtet. Am Ende soll natürlich wieder Javascript Code verstehen, sodass man es auch in allen Browsern ohne Probleme ausführen kann. Insbesondere könnte diese “Sprache” für Node.js Entwickler interessant sein – rein aus der Natur heraus 
Bsp:
# Assignment: number = 42 opposite = true # Conditions: number = -42 if opposite # Functions: square = (x) -> x * x # Arrays: list = [1, 2, 3, 4, 5] # Objects: math = root: Math.sqrt square: square cube: (x) -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis? # Array comprehensions: cubes = (math.cube num for num in list)
Wird zu:
var cubes, list, math, num, number, opposite, race, square,
__slice = [].slice;
number = 42;
opposite = true;
if (opposite) {
number = -42;
}
square = function(x) {
return x * x;
};
list = [1, 2, 3, 4, 5];
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
race = function() {
var runners, winner;
winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return print(winner, runners);
};
if (typeof elvis !== "undefined" && elvis !== null) {
alert("I knew it!");
}
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;
})();
Schön und gut, aber wie passt das in meine Visual Studio Welt?
Hier gibt es eine gute und eine schlechte Nachricht. Die Gute: Es gibt ein Plugin. Die Schlechte: Für den vollen (oder nützlichen) funktionsumfang benötigt man eine Lizenz, welche 39$ kostet.
Die Rede ist von der Web Workbench von Mindscape.
Wie ich auf das Tool kam…
Ich hatte bislang immer Combres genutzt. Für KnowYourStack.com nutze ich Twitter Bootstrap als UI Baukasten. Nun wollte ich allerdings den Style des UIs etwas verändern, allerdings sieht man im generierten Twitter Bootstrap UI CSS Source nicht so recht durch und zudem kann man ohnehin viele Sachen leichter direkt in den .less Dateien fixen. Hiermit kam allerdings Combres nicht zurecht, da Twitter für jede einzelne Komponente eine eigene .less Datei erstellt hatte und diese in einer Master-Datei importierte. Alles in allem: Combres mochte nicht und ich musste eine Alternative suchen.
Wie man mit der Web Workbench Twitter Bootstrap bearbeitet
Auf dem Blog von Mindscape ist auch ein Post, der beschreibt, wie man Twitter Bootstrap damit bearbeiten kann und ich kann es bezeugen: Es funktioniert wirklich. .LESS Datei bearbeiten –> Speichern –> neue .CSS Datei fällt heraus. Combres nutz nur noch die originale CSS Datei und alles ist gut.
Die kostenlose Variante von der Web Workbench hat bei mir (bis auf das Syntaxhighlighting), allerdings nix gemacht, daher war ich erst mal etwas enttäuscht. Die Pro Version lohnt sich aber, wenn man mit .LESS arbeitet
Auch Scott Hanselman hatte bei dem ersten Release darüber gebloggt, da ich damit aber noch nichts direktes zutun hatte, kam ich jetzt erst wieder darauf.
Es gibt noch andere Tools, allerdings musste man dort meist ein eigenen Build-Mechanismus einbauen, was das ganze schnell komplizierter werden ließ.
Eure Meinungen zu CoffeeScript, Sass oder LESS?
Wer schon Erfahrungen mit den Sprachen gemacht hat, kann dies gerne auf KnowYourStack kund tun: CoffeeScript, LESS & Sass.
Feedback zur Seite oder zu dem Blogpost ist natürlich auch immer willkommen
About the author
Written by Robert Mühsig
Hi, ich bin Robert Mühsig und bin Webentwickler und beschäftige mich mit Web-Frameworks auf dem Microsoft Web Stack und scheue mich auch nicht vor Javascript. Der Blog begann als "Problemsammelstelle und Lösungshilfe" und seitdem schreibe ich hier alles auf. Seit 2008 bin ich Microsoft MVP für ASP.NET. Treffen kann man mich online via Twitter (@robert0muehsig) oder hier.
Daniel Lang
13. May 2012
Robert, danke wieder mal für diesen interessanten Post. Es sei erwähnt, dass Web Workbench katastrophal mit ReSharper (Version 6.1 bei uns) zusammen arbeitet. Das ist der Grund warum wir Web Workbench schon vor Monaten wieder rausgeschmissen haben.
Robert Mühsig
13. May 2012
Hallo Daniel – ich hab hier auch ReSharper in der Version 6.1 im Einsatz und bislang hatten die Tools sich noch nicht gegenseitig gestört. Gab es Probleme mit der IntelliSense? Habt ihr ein Ersatz für die Web Workbench gefunden?
Daniel Lang
13. May 2012
Die meisten Probleme die wir hatten, waren entweder slow-motion beim CSS/LESS editieren und teilweise auch komplettes Deaktivieren von IntelliSense in Javascript-Dateien, wo man plötzlich das Gefühl hatte mit Notepad zu arbeiten. Möglicherweise funktionieren aktuellere Versionen schon besser – vor einigen Monaten hatten wir auf mehreren PCs dieselben Probleme.
Ersatz haben wir keinen echten gefunden. Wir verwenden allerdings die VS-Extension Live Preview (sehr praktisch) und warten auch sehnsüchtig auf den Release von VS11, auch wenn damit natürlich nicht alles (v.a. das live-kompilieren) von Web Workbench abgedeckt ist.