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

image.png

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?

image

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?

image

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?

image

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.

image

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?

image

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

Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

About the author

Written by

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.

3 Responses

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

    Reply
  2. 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?

    Reply
  3. 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.

    Reply

Comment on this post

Letzte Posts

  • image_thumb.png
    NuGet Package Restore & Build Server wie z.B. AppVeyor

    NuGet ist ja mittlerweile weit verbreitet, aber eine Frage stellt sich natürlich immer noch: Checkt man die NuGet Packages ein oder nicht? In meinem kleinen Side-Projekt, welches auf GitHub liegt und ich über AppVeyor auch bauen lasse nutze ich das Package Restore Feature von NuGet, d.h. in meinem Repository befindet sich kein NuGet Package mehr, […]

  • image.png
    Microsoft Account Login via ASP.NET Identity

    Der Microsoft Account ist die zentrale Identifikationsstelle in der “Consumer-Microsoft-Welt”, allerdings ist das Einbinden eben dieser in die eigene Applikation eher schwierig. Das “Live SDK” ist nun unter dem OneDrive Dev Center zu finden und ganz professionell wurden auch alle Links zum alten Live SDK damit unbrauchbar gemacht. Beim Microsoft Account ist es auch unmöglich […]

  • image.png
    Zeitgesteuerte Azure WebJobs – so einfach kann Azure sein

    Das noch in Entwicklung befindliche Azure WebJob SDK bietet einige coole Features zum Verarbeiten und Bereitstellen von Daten. Bekanntes Beispiel ist das Sample welches auf eine Azure Queue lauscht und sobald ein Item da vorhanden ist anfängt dies zu verarbeiten. Szenario: Zeitgesteuerte Aktivitäten – ohne Queue und co. Mein Szenario war allerdings wesentlich trivialer: Ich […]

  • image.png
    Get Involved in OSS! Ja, aber wie geht das denn mit GitHub?

    Auch im .NET Lager gibt es Bewegung im OSS Bereich und es gibt verschiedene Arten wie man bei einem Open Source Projekt “Contributed”. Was zählt alles zu “Contribution”? Unter “Contribution” läuft eigentlich alles – ob es Fragen/Probleme zu dem Projekt via Issues ist oder Dokumentation nachreicht oder ob man darüber bloggt oder das Projekt vorstellt. […]

  • HowTo: Web.config samt eigener ConfigSection zur Laufzeit ändern

    In dem HowTo geht es darum wie man die Web.config zur Laufzeit ändert und was es dabei zu beachten gilt. Das ganze klappt auch mit komplexeren ConfigSections. Eigene ConfigSection? Vor einer ganzen Weile habe ich mal über das Erstellen einer eigenen ConfigSection geschrieben – im Grunde nutzen wir jetzt fast dieselbe Config. Zur Laufzeit? Startet […]

Amazon Shop

Facebook