Verwenden von CSS-Präprozessoren in Dreamweaver

CSS ist eine Sprache zur Beschreibung der Formatierung eines HTML-Dokuments. CSS-Präprozessoren kompilieren Code, der in einer Präprozessorsprache geschrieben wurde, in vertrauten CSS-Code. Vorverarbeitete Sprachen heben CSS auf eine Ebene näher an eine Programmiersprache heran.

Präprozessoren ermöglichen es dir insbesondere, Variablen, Mix-ins, Funktionen und viele andere Techniken zu verwenden, die
in CSS nicht möglich sind.Mit CSS-Präprozessoren kannst du alles einmal definieren und wiederverwenden, was zu wartbarem und erweiterbarem CSS führt.

Ein CSS-Präprozessor ermöglicht auch CSS, das besser strukturiert und leichter zu verwalten ist. Wenn du Websites erstellst, die auf eine Reihe von CSS-Dateien verweisen, können CSS-Präprozessoren wie Sass oder Compass die manuelle Codierung und Kopieren/Einfügen-Aktionen reduzieren.

Dreamweaver verwendet einen integrierten Ruby-Saas-Compiler, um SCSS- und LESS-Dateien zu kompilieren. Dreamweaver unterstützt auch Compass- und Bourbon-Frameworks für die Kompilierung von Sass-Dateien. 

LESS basiert auf JavaScript, wohingegen Sass auf Ruby aufbaut. Es sind jedoch keine Kenntnisse in diesen Sprachen erforderlich. Sie brauchen die Dateien auch nicht über die Befehlszeile in CSS zu kompilieren. Dreamweaver kompiliert diese Dateien automatisch in CSS mit der less.js JavaScript-Bibliothek, wenn du diese Dateien lädst, bearbeitest oder speicherst.

Unterstützte Versionen:

• Sass: 3.4.25
• LESS: 2.7.2
• Compass: 1.0.3
• Bourbon: 4.2.6
• Bourbon Neat: 1.7.3
• Bourbon Bitters: 1.2.0

CSS-Präprozessoren in Dreamweaver

Die Verwendung von CSS-Präprozessoren in Dreamweaver hängt davon ab, ob Sie eine Site definiert haben. Wenn du einen Bereich definierst, kannst du CSS-Präprozessor-Einstellungen festlegen und auch die Compass- und Bourbon-Frameworks aus Dreamweaver heraus verwenden.

Bei der Definition einer Site können Sie durch Festlegen Site-spezifischer CSS-Präprozessor-Voreinstellungen die Ausführung von CSS-Präprozessoren in Dreamweaver anpassen. Indem Sie Site-spezifische CSS-Präprozessor-Voreinstellungen festlegen, können Sie Kompilierungsoptionen für einzelne Sites angeben. Du kannst auch den Speicherort von Sass- und CSS-Dateien sowie Präprozessor-Optionen für jeden Bereich anpassen.

Lies weiter, um zu erfahren, wie du Dreamweaver mit CSS-Präprozessoren verwendest:

Dreamweaver 2017 und CSS-Präprozessoren

In Dreamweaver 2017 ist die Unterstützung von CSS-Präprozessor bereits integriert. Das heißt, Sie können direkt in Dreamweaver mit Sass-/LESS-/SCSS-Dateien arbeiten. Drücken Sie einfach Strg+S oder Befehl+S, um CSS automatisch in Dreamweaver zu kompilieren. Sie können einzelne CSS-Dateien auch über Werkzeuge > Kompilieren (oder F9) manuell kompilieren. Die Änderungen werden auch in allen geöffneten HTML-Dateien angezeigt, in denen dieses kompilierte CSS verknüpft oder angehängt ist.

Hier ist ein allgemeiner Workflow der Aufgaben, die bei der Verwendung von CSS-Präprozessoren anfallen:

• Installieren Sie den entsprechenden Compiler, wenn Sie Compass oder Bourbon aus Dreamweaver heraus verwenden möchten. Diese Installation ist mit nur einem Mausklick erledigt. Richte deine CSS-Präprozessor-Einstellungen ein.

Installieren Sie den Compiler nur, wenn Sie eine Kopie der Framework-Dateien (Bourbon) anlegen möchten oder wenn Sie Standard-SCSS-Dateien und Ruby-basierte Konfigurationsdateien (Compass) generieren möchten. Es wird empfohlen, eine Kopie der Framework-Dateien anzulegen. Falls bestimmte Mix-ins oder Funktionen aus dem Authoring-Framework in späteren Revisionen entfernt werden, kannst du weiterhin auf die Präprozessor-Dateien in deinem Bereich zugreifen.

• Stellen Sie sicher, dass die automatische Kompilierung aktiviert ist. Drücke dann Speichern, um die CSS-Dateien zu aktualisieren.
• (Optional) Zeige die Änderungen in der Live-Ansicht oder Echtzeitansicht auf iOS/Android in allen HTML-Seiten an, in denen das generierte CSS verwendet wird.

Dreamweaver 2015 und CSS-Präprozessoren

In Dreamweaver 2015 und früheren Creative Cloud-Versionen konnten Sass-, LESS- und SCSS-Dateien mit Dreamweaver verwendet werden. Du musstest diese Dateien jedoch selbst außerhalb der Dreamweaver-Anwendung kompilieren.
Dein Workflow würde den folgenden Schritten ähneln:

1. Lade einen Compiler herunter und installiere ihn.
2. Richte einen Grunt-Job (Gruntfile.js) für den Compiler ein, um deine Sass/LESS/SCSS-Datei zu lesen.
3. Richte einen weiteren Grunt-Auftrag ein, um die Datei in CSS zu kompilieren, die du dann in Dreamweaver einbindest.

Du musst diese Schritte jedes Mal ausführen, wenn du eine Änderung in deiner Sass/LESS/SCSS-Datei vornimmst.

Wenn keine Site definiert wurde, haben Sie die Möglichkeit, Sass- und LESS-Dateien manuell zu kompilieren. Die Frameworks Compass und Bourbon werden jedoch nicht unterstützt.

Mit CSS-Präprozessoren in Adobe Dreamweaver arbeiten

Hier ist ein allgemeiner Workflow der Aufgaben, die bei der Verwendung von CSS-Präprozessoren anfallen:

1. Definieren Sie eine Site in Dreamweaver. Stellen Sie sicher, dass die zu kompilierende Sass- oder LESS-Datei sich im Stammordner der Site befindet. Wenn Sie bereits eine Site definiert haben und die Sass-/LESS-Datei im Stammordner der Site enthalten ist, fahren Sie mit dem nächsten Schritt fort. Weitere Informationen zum Einrichten einer Dreamweaver-Website findest du unter Über Dreamweaver-Websites.
2. Legen Sie die Voreinstellungen für CSS-Präprozessoren fest (indem Sie z. B. den Speicherort der generierten CSS-Dateien definieren). Diese Voreinstellungen sind Site-spezifisch. Weitere Informationen findest du unter Websitespezifische CSS-Präprozessor-Einstellungen festlegen.
3. Wenn Sie bestimmte Frameworks, z. B. Compass oder Bourbon, verwenden möchten, können Sie die Einstellungen für diese Frameworks angeben. Weitere Informationen findest du unter: Verwendung des Compass-Frameworks oder Verwendung des Bourbon-Frameworks.
4. Richten Sie die automatische Kompilierung ein oder kompilieren Sie die Sass- und LESS-Dateien manuell. Weitere Informationen findest du unter CSS-Präprozessor-Dateien kompilieren.

Voreinstellungen für CSS-Präprozessoren festlegen

Du kannst sitespezifische Einstellungen für CSS-Präprozessoren über das Dialogfeld Sites > Sites verwalten festlegen.

Site-spezifische Voreinstellungen für CSS-Präprozessoren ermöglichen es Ihnen, für jede Site eigene CSS-Präprozessoren zu verwalten. Diese Aktion gibt dir auch die Kontrolle über den CSS-Präprozessor für jede Site, ohne dass du jedes Mal die Einstellungen aktualisieren musst, wenn du zwischen Sites wechselst.

Allgemeine CSS-Präprozessor-Einstellungen festlegen

Im Dialogfeld Sites > Sites verwalten > CSS-Präprozessoren können Sie die folgenden allgemeinen CSS-Präprozessor-Einstellungen festlegen. Standardmäßig gelten diese Einstellungen für das Saas-Framework.

Markieren Sie dieses Kontrollkästchen, um die automatische Kompilierung von CSS-Präprozessoren zu aktivieren. Wenn Sie diese Option aktivieren, erstellt Dreamweaver beim Speichern Ihrer Sass-, LESS-, oder SCSS-Datei automatisch eine CSS-Datei. Wenn diese Option deaktiviert bleibt, musst du die Dateien jedes Mal manuell kompilieren, wenn du eine Änderung vornimmst.

LESS-Optionen

Verarbeitet nur die mathematischen Ausdrücke, die in Klammern angegeben sind. Beispielsweise wird „(100px/25px)“ erfolgreich verarbeitet und „20% + 10%“ (ohne Klammern) wird nicht verarbeitet. Wenn diese Option deaktiviert ist, werden alle mathematischen Operationen in der Datei verarbeitet.

Wenn diese Option deaktiviert ist, wird beim Verarbeiten von mathematischen Ausdrücken durch LESS versucht, die Ausgabeeinheit zu ermitteln. Beispiel:

.class {

property: 1px * 2px;

}

In diesem Fall ergibt das Quadrat einer Länge eine Fläche, Flächenangaben werden in CSS jedoch nicht unterstützt. Dreamweaver geht davon aus, dass der Anwender einen der Werte als Wert und nicht als Längeneinheit gemeint hat.

Bei aktivierten strikten Einheiten geht Dreamweaver von einem Berechnungsfehler aus und gibt einen Fehler aus.

Diese Option ermöglicht es dir, URLs in der generierten CSS-Datei so umzuschreiben, dass die URLs immer relativ zur generierten Datei sind. 

Erstellt eine Quellzuordnung. Eine Source Map ist eine Datei, die die Lücke zwischen höheren Sprachen wie Sass und LESS und der niedrigeren Sprache, in die sie kompiliert werden, wie CSS, überbrückt.

Sass-/SCSS-Optionen

Legt den Stil der CSS-Ausgabedatei fest:

• Verschachtelt - Formatiert das kompilierte CSS in der bekannten, modularen Struktur.
• Kompakt - Formatiert das kompilierte CSS in einer kompakten Struktur, die weniger Platz benötigt als Verschachtelt oder Erweitert.
• Komprimiert - Gibt das CSS in einer flachen Struktur aus.
• Erweitert – Gibt den CSS-Code in einer erweiterten Struktur aus, in der für jede Eigenschaft und Regel eine eigene Zeile verwendet wird. Eigenschaften werden innerhalb der Regeln eingerückt, aber die Regeln werden in keiner Weise eingerückt. 

Erstellt Kommentare in der ausgegebenen CSS-Datei, die den CSS-Code der Zeile zuordnet, aus der er generiert wurde.

Erstellt eine Source Map (Datei, die die Lücke zwischen höheren Sprachen wie Sass und LESS und der niedrigeren Sprache, zu der sie kompiliert werden, wie CSS, überbrückt). 

Voreinstellungen für CSS-Quelle und -Ausgabe festlegen

Du kannst definieren, wo die generierten CSS-Dateien platziert werden sollen und welchen Pfad Dreamweaver überwachen soll, um die automatische Kompilierung auszulösen, wenn eine Sass/LESS-Datei im Pfad mit einem externen Editor geändert wird.

Du kannst die folgenden Quell- und Ausgabe-CSS-Präprozessor-Einstellungen im Dialog Websites > Websites verwalten festlegen.

CSS-Ausgabe

Gib den Speicherort der CSS-Ausgabedatei an, die generiert wird.

Wähle diese Option, wenn die generierten CSS-Dateien im selben Ordner wie die Sass- und LESS-Quelldateien gespeichert werden sollen.

Wähle diese Option und gib einen Ordner an, in dem du die generierten CSS-Dateien speichern möchtest.

Mithilfe dieser Option können Sie einen Teil des Pfads ersetzen, indem Sie in die Felder „Von“ und „Durch“ die entsprechende Zeichenfolgen eintragen.Beispielsweise wird bei der Einstellung Von: scss und Nach: css die Ausgabedatei in derselben Baumstruktur platziert, nachdem SCSS im Pfad durch css ersetzt wurde.

Geben Sie den Unterordner im Site-Stammordner an, der überwacht werden muss. Normalerweise enthält dieser Unterordner alle deine SCSS- oder LESS-Dateien. 

Wenn Sie die Kompilierung in Allgemeine Einstellungen aktiviert haben, wird der CSS-Präprozessor automatisch von Dreamweaver ausgelöst. Dreamweaver löst eine automatische Kompilierung aus, wenn eine Datei innerhalb des Ordners extern oder von Dreamweaver aus geändert wird.

Compass-Framework verwenden

Compass ist ein Open-Source-CSS-Authoring-Framework, das es Ihnen erlaubt, mithilfe von Sass CSS3-Stylesheets zu erstellen.

Dreamweaver bietet Unterstützung für Compass. Wenn du Stylesheets mit Compass erstellst, kannst du diese Stylesheets kompilieren und CSS-Dateien aus Dreamweaver heraus generieren.

Bourbon-Framework verwenden

Dreamweaver unterstützt die Bourbon-Produktfamilie. Falls du Stylesheets mit Bourbon erstellst, kannst du diese Stylesheets kompilieren und CSS-Dateien innerhalb von Dreamweaver generieren.

Die folgenden Bourbon-Varianten werden unterstützt:

• Bourbon - Eine einfache und schlanke Mixin-Bibliothek für Sass
• Bourbon Neat - Ein schlankes semantisches Raster-Framework für Sass und Bourbon
• Bourbon Bitters - Gerüste, Variablen und Strukturen für Bourbon Projekte

Du kannst das Bourbon-Framework importieren, indem du eine der folgenden Optionen in deinem Code hinzufügst:

• @import "bourbon" - um Bourbon zu importieren
• @import "neat" – um Bourbon Neat zu importieren
• @import "base" – Bourbon Bitter importieren

Dreamweaver verwendet dann die vorverpackte Version von Bourbon beim Kompilieren der Präprozessor-Dateien.

Sie können aber auch Bourbon-Framework-Dateien auf Ihrer Site installieren, sodass künftige Dreamweaver-Updates keinen Einfluss auf Ihre Kompilierungsarbeitsabläufe haben. Die Dateien des Bourbon-Frameworks werden in Ihre Site kopiert. Bourbon ist das Framework, das verwendet wird, wenn die Kompilierung für eine der Dateien ausgelöst wird, die das Framework importieren.

Bourbon-, Bourbon Neat- bzw. Bourbon Bitters-Dateien installieren

So installierst du Bourbon oder eine seiner Varianten:

CSS-Präprozessor-Dateien kompilieren

Du kannst CSS-Präprozessor-Dateien auf eine der folgenden Arten kompilieren:

• Automatische Kompilierung von CSS-Präprozessor-Dateien einrichten
• CSS-Präprozessor-Datei manuell kompilieren

Automatische Kompilierung von CSS-Präprozessor-Dateien einrichten

Sie können in Dreamweaver Optionen einrichten, um an einer Sass- oder LESS-Datei vorgenommene Änderungen automatisch in der entsprechenden CSS-Datei zu kompilieren. Du kannst auch die Speicherorte (innerhalb des Site-Stammverzeichnisses) angeben, an denen du das generierte CSS speichern möchtest.

Nach einer erfolgreichen Kompilierung wird eine Meldung im Ausgabe-Bedienfeld (Fenster > Ergebnisse > Ausgabe) angezeigt.Das Statussymbol in der Statusleiste wird grün angezeigt.Um das kompilierte CSS zu öffnen, doppelklicke auf die Erfolgsmeldung im Bedienfeld.

Wenn Fehler auftreten, bedeutet dies, dass die CSS-Datei nicht erfolgreich kompiliert wurde. Das Statussymbol wird in Rot angezeigt und im Ausgabe-Bedienfeld werden alle Fehler und Warnungen aufgeführt. Sie können im Bedienfeld auf eine Fehlermeldung doppelklicken, um schnell zur fehlerhaften Zeile im Code zu wechseln. Die CSS-Datei wird erst erfolgreich kompiliert, wenn alle Fehler behoben sind.

Nach dem Abrufen der kompilierten CSS-Datei können Sie die Webseite mit dem Stylesheet verknüpfen. Wenn Sie Änderungen an CSS-Präprozessoren vornehmen, werden die entsprechenden kompilierten CSS-Dateien automatisch aktualisiert. Die Web-Seite wird auch in der Live-Ansicht automatisch aktualisiert.

Weitere Informationen zum Verknüpfen deiner Web-Seite mit dem Stylesheet findest du unter Verknüpfung zu einem externen CSS-Stylesheet.

CSS-Präprozessor-Datei manuell kompilieren

In manchen Situationen (z. B. wenn du keinen Dreamweaver-Bereich definiert hast) möchtest du möglicherweise eine CSS-Präprozessor-Datei manuell kompilieren.

Deaktiviere in solchen Szenarien Automatische Kompilierung beim Speichern der Datei aktivieren im Bedienfeld CSS-Präprozessoren > Allgemein des Dialogs Bereich einrichten.

Um einen CSS-Präprozessor manuell zu kompilieren, klicke mit der rechten Maustaste auf die Datei im Bedienfeld Dateien und klicke auf Kompilieren.

Du kannst auch auf Tools > Kompilieren klicken, um die aktuelle Datei zu kompilieren.