Logo DMX Zone

LESS im Dreamweaver verwenden – Möglich mit DMX-Zone Plugin

CSS – Preprozessoren wie SASS und LESS sind quasi State-of-the-Art im Webdevelopment geworden. Im Grunde genommen wird von Beiden das Grundkonzept von CSS herangezogen und um praktische Funktionalitäten wie zum Beispiel Funktionen und Variablen erweitert. Was die Wartbarkeit des Codes enorm verbessert.

Doch für alle Dreamweaver-User (wie ich auch einer bin) hat die Verwendung von LESS/SASS einen bitteren Beigeschmack. Ein zusätzlicher Kompiler muss her.

Viele werden jetzt sagen, warum nicht einfach LESS per Node.js am Server installieren und die .less – Files in Echtzeit kompilieren? Weil es kurz gesagt einfach langsamer ist. Der bessere Weg ist definitiv die .less – Files in .css – Files zu kompilieren und die .css Files dann upzuloaden und einzubinden.

Hier gibt es eine Fülle von Third-Party Programmen die alle etwas gemeinsam haben, es ist ein zusätzlicher Arbeitsschritt notwendig (Update LESS -> Programm wechseln -> kompilieren -> Programm wechseln -> Upload CSS). Für Viele wiederum kein Problem, ich habe es jedoch gerne so einfach wie möglich. Was tun wenn ich LESS im Dreamweaver direkt verwenden will?

DMXzone Less CSS Compiler

Eine kurze Recherche hat mich dann zum Dreamweaver Plugin DMXzone LESS CSS Compiler gebracht, welches genau die Funktionalität verspricht die ich mir erhofft habe:

  • Color Highlighting
  • CSS Hints
  • LESS Error Reporting
  • und am wichtigsten: Compile on Save

Soweit die Versprechungen auf der Website von DMXzone,  die Realität sieht leider wie so oft etwas anders aus. (korrigiert mich falls ich falsch liege)

Installation

Der Vorgang der Installation ist relativ simpel: zxp-Datei herunterladen -> Doppelklick fertig. Danach den Dreamweaver (in meinem Fall CS6) neu starten und es kann los gehen? Nicht ganz! Laut der Anleitung von DMXzone sollte man sofort im Dreamweaver unter: Datei -> Neu .less Files erzeugen können. Hat in meinem Fall (unter Windows 10 und Mac os Sierra) leider nicht funktioniert. Darum habe ich einfach händisch ein .less File erstellt und siehe da, KEIN Color Highlighting. Die positive Nachricht: Das „Compile on Save“ funktioniert tadellos.

Color Highlighting

Für das Color Highlighting habe ich dann einen Work-Around gefunden, der das Standard Highlighting von CSS im Dreamweaver auch auf die LESS-Files anwendet. Dazu sind folgende Schritte notwendig:

MAC:

  • Dreamweaver schließen
  • im Finder „cmd + shift + g“ drücken und folgendes Verzeichnis öffnen:
    ~/Library/Application Support/Adobe/
  • Dort den Ordner für die jeweilige Dreamweaver Version suchen, in meinem Fall: DreamweaverCS6 und folgendem Pfad folgen: *Sprachcode*/Configuration/DocumentTypes/
  • Darin die Datei: MMDocumentTypes.xml öffnen
  • In Zeile 142 folgenden Code:
    <documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" >
    auf diesen Code ändern:
    <documenttype id="CSS" internaltype="Text" winfileextension="css,scss,less" macfileextension="css,scss,less" file="Default.css" writebyteordermark="false" mimetype="text/css" >
  • Jetzt sollte auch das Color-Highlighting funktionieren.

WINDOWS 10

  • Dreamweaver schließen
  • Den Pfad zu Dreamweaver öffnen (auf meinem PC: C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration) und den Ordner „DocumentTypes“ betreten.
  • Dort nach der Datei MMDocumentTypes.xml suchen und diese öffnen
  • In Zeile 142 folgenden Code:
    <documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" >
    auf diesen Code ändern:
    <documenttype id="CSS" internaltype="Text" winfileextension="css,scss,less" macfileextension="css,scss,less" file="Default.css" writebyteordermark="false" mimetype="text/css" >
  • Jetzt sollte auch das Color-Highlighting funktionieren.

Dies also als kurze Zusammenfassung zu LESS im Dreamweaver. Fröhliches Schaffen.

Facebook
Google+
http://www.stefan-rammer.at/2016/09/28/less-im-dreamweaver/
Twitter
RSS
Follow by Email

Stefan

Webdeveloper, Wordpress, PHP, MYSQL

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.