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.png
    Azure AppInsights: Ein mini Google Analytics für Websites

    Seit der Build Konferenz ist das neue Azure Portal für alle freigeschaltet. Durch das neue Portal ist mir ein “Dienst” aufgefallen, den ich bisher nicht gesehen hatte: Azure Application Insights Viel weiss ich nicht über den Dienst, aber wer eine Azure Website hat der sollte mal die “Analytics” Box öffnen. Im Grunde handelt es sich […]

  • image.png
    Source Code veröffentlichen – aber bitte mit Lizenz

    Seit es den Blog gibt wird auch meist der gesamte Demo Source Code mit veröffentlicht. Das Ganze hatte ich am Anfang noch als .zip verteilt, später lag es mal auf Google Code und nun liegen alle Samples und sonstige Sachen auf GitHub. Beim letzten User Group Treffen in Zürich mit dem Titel “Open Source: Get […]

  • Fix: Cannot convert from ‘CConnectProxy::_ComMapClass *’ to ‘AddInDesignerObjects::IDTExtensibility2 *’

    Mal einen etwas esoterischer Blogpost, welcher auftaucht wenn man zu viel mit Office Addins rumspielt. Der Fehler passiert beim Bauen von C++ Projekten, welchen diesen Typ benötigen. Lösung (auf 64bit Systemen): C:\Program Files (x86)\Common Files\DESIGNER>regsvr32 MSADDNDR.DLL And Rebuild. Meine lieben Kollegen hatte mir dies schon mehrfach gesagt, allerdings hatte ich es immer wieder vergessen Das […]

  • Gegen das Gesetz verstoßen: X Jahre Haft. Gegen die Terms of Use verstoßen: Bann auf Lebenszeit. Danke Google & co.

    Bei fast allen Diensten die man im Internet nutzen kann muss man den “Terms of use” zustimmen. Völlig logisch dass da natürlich drin steht was erlaubt und was nicht. Wenn man gegen diese Regelungen verstößt hat das Unternehmen natürlich das Recht etwas dagegen zu unternehmen. In der heutigen Welt beherrschen einige wenige Unternehmen die digitale […]

  • image.png
    RSS Feed samt Kommentaranzahl und andere nicht Standard Elemente mit dem SyndicationFeed auslesen

    Jetzt mal ein Blogpost ohne ein fancy NuGet Package: Seit .NET 3.5 gibt es die SyndicationFeed Klasse. Eine schon etwas ältere API, reicht aber aus um Atom bzw. RSS Feeds zu lesen. In diversen RSS Feeds gibt es aber Erweiterungen, welche man natürlich auch auslesen möchte. So gibt WordPress z.B. auch die Anzahl der geposteten […]

Amazon Shop

Facebook