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

SASS, LESS & Coffeescript in Visual Studio mit der Web Workbench

Written by Robert Muehsig