Hier erfahren Sie, wie Sie CSS-Präprozessor-Dateien in Dreamweaver verwenden und kompilieren können.

CSS-Präprozessoren kompilieren Code, der in einer Präprozessorsprache geschrieben wurde, zu gewohntem CSS-Code. Die Präprozessorsprache erweitert CSS in Richtung einer Programmiersprache.

Präprozessoren ermöglichen Ihnen die Verwendung von Variablen, Mix-ins, Funktionen und viele anderen Verfahren, die in CSS nicht möglich sind.
Mit CSS-Präprozessoren brauchen Sie alles nur einmal zu definieren und können die definierten Elemente immer wieder verwenden. So verfügen Sie über CSS, das Sie verwalten, erweitern und nach Themen gruppieren können.

Dreamweaver unterstützt die gebräuchlichsten CSS-Präprozessoren, Sass und LESS, sowie die Frameworks Compass und Bourbon für das Kompilieren von Sass-Dateien.

LESS basiert auf JavaScript und Sass basiert auf Ruby. Sie benötigen jedoch keine Kenntnisse in diesen Sprachen und Sie müssen nicht die Befehlszeile verwenden, um die Dateien in CSS-Dateien zu kompilieren. Wenn Sie die Dateien laden, bearbeiten oder speichern, werden sie von Dreamweaver automatisch mit der JavaScript-Bibliothek „less.js“ in CSS-Dateien kompiliert.

So werden CSS-Präprozessoren in Dreamweaver verwendet

Die Verwendung von CSS-Präprozessoren in Dreamweaver variiert abhängig davon, ob Sie eine Site definiert haben. Adobe empfiehlt, eine Site zu definieren, da Sie CSS-Präprozessor-Voreinstellungen einrichten sowie in Dreamweaver die Frameworks Compass und Bourbon verwenden können, wenn Sie über eine Site verfügen. 

Wenn Sie eine Site definiert haben, können Sie durch das 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. Sie können auch ändern, wo die Sass- und CSS-Dateien gespeichert werden, sowie spezifische Präprozessoroptionen für einzelne Sites anpassen.

Wenn Sie eine Site definieren, können Sie zudem die Sass-Frameworks Compass, Bourbon, Bourbon Neat und Bourbon Bitters in Dreamweaver verwenden.

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

Der allgemeine Arbeitsablauf bei Verwendung von CSS-Präprozessoren ist wie folgt:

  1. Definieren Sie eine Site in Dreamweaver. Stellen Sie sicher, dass die zu kompilierende Sass- oder LESS-Datei im Stammordner der Site enthalten ist. 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 über das Einrichten einer Dreamweaver-Site finden Sie unter Dreamweaver-Sites.
  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 finden Sie unter Festlegen von Site-spezifischen Voreinstellungen für CSS-Präprozessoren.
  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 finden Sie unter Verwenden des Compass-Frameworks und Verwenden des Bourbon-Frameworks.
  4. Richten Sie die automatische Kompilierung ein oder kompilieren Sie die Sass- und LESS-Dateien manuell. Weitere Informationen finden Sie unter Kompilieren von CSS-Präprozessor-Dateien.

Festlegen von Voreinstellungen für CSS-Präprozessoren

Sie können im Dialogfeld „Sites“ > „Sites verwalten“ Site-spezifische Voreinstellungen für CSS-Präprozessoren festlegen.

Wenn Sie Site-spezifische CSS-Präprozessor-Voreinstellungen verwenden, können Sie die CSS-Präprozessoren für einzelne Sites verwalten. So haben Sie die Kontrolle über jeden einzelnen Site-CSS-Präprozessor, ohne bei jedem Wechsel zwischen Sites die Voreinstellungen aktualisieren zu müssen.

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. 

Allgemeine CSS-Präprozessor-Einstellungen
Allgemeine CSS-Präprozessor-Einstellungen

Datei beim Speichern automatisch kompilieren

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. Is diese Option nicht deaktiviert, müssen Sie die Dateien jedes Mal, wenn Sie eine Änderung vornehmen, manuell kompilieren.

LESS-Optionen

Strict Math aktivieren

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 Ausdrücke in der Datei verarbeitet.

Strict Units aktivieren

Gibt nach dem mathematischen Ausdruck eine angenommene Einheit im CSS-Code aus. Beispielsweise wird „5px * 2px“ als „10px“ und nicht als „10px2“ kompiliert. 

Wenn diese Option deaktiviert ist, wird beim Verarbeiten der mathematischen Ausdrücke durch LESS versucht, die Ausgabeeinheit zu ermitteln.

In diesem Beispiel wird der folgende CSS-Code generiert:

.class {
  property: 1px * 2px;
}

In diesem Fall wurde eine falsche Einheit ermittelt: Das Quadrat einer Länge ergibt eine Fläche, Flächenangaben werden in CSS jedoch nicht unterstützt. Hier wird angenommen, dass einer der Werte keine Längeneinheit, sondern lediglich ein Wert sein soll, und die Ausgabe von Dreamweaver lautet „10px“.

Wenn Strict Units aktiviert sind, gilt dieser generierte CSS-Code als Fehler.

URLs als relative URLs umschreiben

Schreibt URLs in importierten Dateien um, sodass die URL immer relativ zur importierten Basisdatei angegeben wird. Wenn beispielsweise in eine LESS-Datei eine andere LESS-Datei importiert wird, die auf ein Bild verweist, wird in der kompilierten CSS-Datei die relative URL angegeben.

Source Map generieren

Erstellt eine Quellzuordnung (eine Datei, mit der die Lücke zwischen höheren Programmiersprachen wie Sass oder LESS und der von ihnen kompilierten niederen Programmiersprache, z. B. CSS, geschlossen wird).

Sass-/SCSS-Optionen

Stil der Ausgabedatei

Gibt den Stil der CSS-Ausgabedatei an:

  • Verschachtelt – Formatiert den kompilierten CSS-Code in der vertrauten modularen Struktur.
  • Kompakt – Formatiert den kompilierten CSS-Code in einer kompakten Struktur, die weniger Speicherplatz als bei Verwendung von „Verschachtelt“ oder „Erweitert“ erfordert.
  • Komprimiert – Gibt den CSS-Code als flache 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 in den Regeln eingerückt, die Regeln werden jedoch nicht eingerückt. 

Quellkommentare erstellen

Erstellt Kommentare in der CSS-Ausgabedatei, die den CSS-Code der Zeile zuordnen, in der er generiert wurde.

Source Map generieren

Erstellt eine Quellzuordnung (eine Datei, mit der die Lücke zwischen höheren Programmiersprachen wie Sass oder LESS und der von ihnen kompilierten niederen Programmiersprache, z. B. CSS, geschlossen wird). 

Voreinstellungen für CSS-Quelle und -Ausgabe festlegen

Sie können festlegen, wo die generierten CSS-Dateien gespeichert werden sollen und welchen Pfad Dreamweaver überwachen soll, um die automatische Kompilierung auszulösen, wenn eine Sass-/LESS-Datei in diesem Pfad mit einem externen Editor geändert wird.

CSS-Präprozessor-Einstellungen für Quelle und Ausgabe
CSS-Präprozessor-Einstellungen für Quelle und Ausgabe

Im Dialogfeld „Sites“ > „Sites verwalten“ können Sie die folgenden allgemeinen CSS-Präprozessor-Einstellungen für Quelle und Ausgabe festlegen.

CSS-Ausgabe

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

Im gleichen Ordner wie die Quelle

Wählen Sie diese Option, wenn die generierten CSS-Dateien in demselben Ordner wie die Sass- und LESS-Quelldateien gespeichert werden sollen.

Ausgabeordner angeben

Geben Sie bei Auswahl dieser Option einen Ordner an, in dem die generierten CSS-Dateien gespeichert werden sollen.

Segment des Eingabepfads ersetzen

Bei Verwendung dieser Option können Sie mithilfe der Zeichenfolgen „Von“ und „Durch“ einen Teil des Pfads ersetzen.

Wenn zum Beispiel „Von: scss“ und „Durch: css“ festgelegt wird, wird die Ausgabedatei in derselben Baumstruktur abgelegt, wobei „SCSS“ durch „css“ ersetzt wurde.

Quellordner

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

Wenn Sie in Allgemeine Einstellungen Kompilierung aktiviert haben, wird der CSS-Präprozessor automatisch ausgelöst, sobald eine Datei extern oder in Dreamweaver geändert wird.

Verwenden des Compass-Frameworks

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 Sie also Stylesheets mithilfe von Compass erstellen, können Sie diese Stylesheets in Dreamweaver kompilieren und CSS-Dateien generieren.

  1. Compass-Dateien installieren

    Wenn Compass noch nicht installiert ist, können Sie es in Dreamweaver installieren.

    Wählen Sie im Dialogfeld „Site-Definition“ „CSS-Präprozessoren“ > „Compass“. Aktivieren Sie die Option „Kompass verwenden“ und klicken Sie dann auf „Dateien installieren“.

    Installieren von Compass-Dateien
    Installieren von Compass-Dateien

    Alle Compass-Dateien und die *rb-Konfigurationsdatei werden im Site-Ordner installiert. Sie können sie im Bedienfeld „Dateien“ anzeigen.

    Installierte Compass-Dateien
    Installierte Compass-Dateien

  2. Vorhandene Ruby-basierte Konfigurationsdatei angeben

    Wenn Compass bereits auf den Computern installiert ist und die Compass-*.rb-Datei eingerichtet wurde, geben Sie im Dialogfeld „Site-Definition“ von Dreamweaver den Pfad zur Compass-*.rb-Datei im aktuellen Site-Stammordner an.

    1. Wählen Sie im Dialogfeld „Site-Definition“ „CSS-Präprozessoren“ > „Compass“.
    2. Aktivieren Sie die Option „Kompass verwenden“.
    3. Klicken Sie auf „Ruby-basierte Konfigurationsdatei angeben“ und öffnen Sie den Pfad zu der Datei. Wenn Sie fertig sind, klicken Sie auf „Speichern“.
    Angeben einer vorhandenen Ruby-basierten Konfigurationsdatei
    Angeben einer vorhandenen Ruby-basierten Konfigurationsdatei

    Hinweis:

    Diese Datei muss sich in Ihrem Site-Stammordner befinden.

  3. Konfigurationsoptionen manuell angeben

    Wenn keine Konfigurationsoption festgelegt ist, können Sie Konfigurationsoptionen manuell eingeben.

    1. Wählen Sie im Dialogfeld „Site-Definition“ „CSS-Präprozessoren“ > „Compass“.
    2. Aktivieren Sie die Option „Kompass verwenden“.
    3. Klicken Sie auf „Konfigurationsoptionen manuell angeben“. Legen Sie die folgenden Konfigurationsoptionen fest und klicken Sie auf „Speichern“.

    Die folgenden Felder werden automatisch ausgefüllt. Sie können sie jedoch Ihren Anforderungen entsprechend ändern:

    Hinweis:

    Alle in diesen Optionen ausgewählten Pfade müssen sich im Site-Stammordner befinden.

    HTTP-Pfad

    Der Pfad des Projekts, wenn es innerhalb des Webservers ausgeführt wird. Standardeinstellung ist „/“.

    Bildverzeichnis

    Das Verzeichnis, in dem die Bilder gespeichert sind. Es ist relativ zum Projektpfad.

    Verzeichnis für generierte Bilder

    Das Verzeichnis, in dem generierte Bilder gespeichert sind. Es ist relativ zum Projektpfad. Standardwert ist „images_dir“.

    Schriftenverzeichnis

    Das Verzeichnis, in dem die Schriftdateien gespeichert sind.

    Relative Elemente

    Zeigt an, ob die Compass-Hilfsfunktionen vom generierten CSS-Code relative URLs zu den Elementen oder absolute URLs mit dem HTTP-Pfad für diesen Elementtyp generieren sollen.

  4. Haben Sie im Dialogfeld „Sites“ > „Sites verwalten“ > „CSS-Präprozessoren“ die Option „Datei beim Speichern automatisch kompilieren“ aktiviert, generiert Dreamweaver jedes Mal eine CSS-Datei, wenn Sie Änderungen in Ihren Sass-Dateien speichern. Sie können auch eine Vorschau dieser Änderungen in Echtzeit in Ihrem Browserfenster anzeigen. Weitere Informationen zum Anzeigen der Änderungen in einer Echtzeitvorschau im Browser finden Sie unter Echtzeitvorschau.

    Soll keine automatischen Kompilierung durchgeführt werden, haben Sie auch die Möglichkeit, eine CSS-Datei manuell zu kompilieren, indem Sie einen der folgenden Schritte ausführen:

    • Klicken Sie im Bedienfeld „Dateien“ mit der rechten Maustaste auf die Sass-, LESS- oder SCSS-Datei und klicken Sie auf „Kompilieren“. 
    • Wählen Sie „Werkzeuge“ > „Kompilieren“, um die aktuelle Datei zu kompilieren.
  5. Danach können Sie in den HTML-Dateien in Ihrer Site auf kompilierte CSS-Datei verweisen. Weitere Informationen finden Sie unter Erstellen eines Links zu einem externen CSS-Stylesheet.

Verwenden des Bourbon-Frameworks

Dreamweaver unterstützt die Bourbon-Produktfamilie. Wenn Sie also Stylesheets mithilfe von Bourbon erstellen, können Sie diese Stylesheets in Dreamweaver kompilieren und CSS-Dateien generieren.

Die folgenden Bourbon-Derivate werden unterstützt:

  • Bourbon – eine einfache, leichtgewichtige Mixin-Bibliothek für Sass
  • Bourbon Neat – ein leichtgewichtiges semantisches Raster-Framework für Sass und Bourbon
  • Bourbon Bitters - Gerüste, Variablen und Strukturen für Bourbon Projekte

Sie können das Bourbon-Framework importieren, indem Sie im Code einen der folgenden Befehle hinzufügen:

  • @import "bourbon" – zum Importieren von Bourbon
  • @import "neat" – zum Importieren von Bourbon Neat
  • @import "base" – zum Importieren von Bourbon Bitters

Dreamweaver verwendet dann beim Kompilieren der Präprozessordateien die vorgefertigte Bourbon-Version.

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 Bourbon-Framework-Dateien werden auf Ihre Site kopiert und das ist das Framework, das verwendet wird, wenn für eine Datei, die dieses Framework importiert, eine Kompilierung ausgelöst wird.

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

So installieren Sie Bourbon oder eines seiner Derivate:

  1. Wählen Sie im Dialogfeld „Site-Definition“ „CSS-Präprozessoren“ > „Bourbon“, „Bourbon Neat“ oder „Bourbon Bitters“.

  2. Klicken Sie auf „Dateien installieren“, um die Dateien im angegebenen Pfad im Site-Stammordner Ihrer Seite zu installieren.

    Installieren von Bourbon-Dateien
    Installieren von Bourbon-Dateien

    Alle Bourbon-Dateien werden im Site-Ordner installiert und im Bedienfeld „Dateien“ angezeigt.

    Installierte Bourbon-Dateien
    Installierte Bourbon-Dateien

    Im Fall eines Fehlers wird dieser im Bedienfeld „Ausgabe“ („Fenster“ > „Ergebnisse“ > „Ausgabe“) angezeigt und die Farbe des Statusleistensymbols ändert sich in Rot.

Kompilieren von CSS-Präprozessor-Dateien

Sie können CSS-Präprozessor-Dateien mit einer der folgenden Methoden kompilieren:

Automatische Kompilierung von CSS-Präprozessor-Dateien einrichten

Sie können in Dreamweaver Optionen einrichten, um in einer Sass- oder LESS-Datei vorgenommene Änderungen automatisch in der entsprechenden CSS-Datei zu kompilieren. Sie können auch die Verzeichnisse (im Site-Stammordner) angeben, in denen die generierten CSS-Dateien gespeichert werden sollen.

  1. Wählen Sie im Dialogfeld „Site-Definition“ „CSS-Präprozessoren“ > „Allgemein“ und aktivieren Sie die Option „Datei beim Speichern automatisch kompilieren“.

    Aktivieren der automatischen Kompilierung
    Aktivieren der automatischen Kompilierung

  2. Wählen Sie im Dialogfeld „Site-Definition“ „CSS-Präprozessoren“ > „Quelle und Ausgabe“.

  3. Geben Sie an, wo die generierten CSS-Dateien gespeichert werden sollen. Sie können eine der folgenden Optionen wählen:

    Im gleichen Ordner wie die Quelle

    Wählen Sie diese Option, wenn die generierten CSS-Dateien in demselben Ordner wie die Sass- und LESS-Quelldateien gespeichert werden sollen.

    Ausgabeordner angeben

    Geben Sie bei Auswahl dieser Option einen Ordner an, in dem die generierten CSS-Dateien gespeichert werden sollen.

    Segment des Eingabepfads ersetzen

    Mithilfe dieser Option können Sie einen Teil des Pfads ersetzen, indem Sie in die Felder „Von“ und „Durch“ die entsprechende Zeichenfolgen eintragen.

  4. Geben Sie den Ordner an, der die Sass- oder LESS-Dateien enthält, die von Dreamweaver überwacht werden sollen. 

    Wenn Sie an einer der Dateien in diesem überwachten Ordner Änderungen vornehmen, werden die Dateien automatisch nach dem Speichern kompiliert. 

    CSS-Präprozessor-Einstellungen für Quelle und Ausgabe
    CSS-Präprozessor-Einstellungen für Quelle und Ausgabe

    Hinweis:

    Diese Dateien werden von Dreamweaver überwacht und kompiliert, auch wenn Sie außerhalb von Dreamweaver Änderungen vornehmen (z. B. mithilfe eines Texteditors).

Nach einer erfolgreichen Kompilierung enthält das Ausgabe-Bedienfeld („Fenster“ > „Ergebnisse“ >„Ausgabe“) eine Meldung und das Statussymbol auf der Statusleiste wird in Grün <icon> angezeigt. Um die kompilierte CSS-Datei zu öffnen, doppelklicken Sie auf die Erfolgsmeldung im Bedienfeld.

Wenn Fehler auftreten, wird die CSS-Datei nicht erfolgreich kompiliert. Das Statussymbol wird in Rot <icon> 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.

Hinweis:

Das Ausgabe-Bedienfeld ist im Allgemeinen am unteren Rand des Arbeitsbereichs angedockt. Falls das Bedienfeld geschlossen wurde, können Sie es über „Fenster“ > „Ausgabe“ öffnen.

Wenn das Statussymbol in Rot angezeigt wird, können Sie dieses verwenden, um das Ausgabe-Bedienfeld anzuzeigen bzw. auszublenden.

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 Webseite wird ebenfalls automatisch in der Live-Ansicht aktualisiert.

Weitere Informationen zum Verknüpfen der Webseite mit dem Stylesheet finden Sie unter Erstellen eines Links zu einem externen CSS-Stylesheet.

CSS-Präprozessor-Datei manuell kompilieren

In einigen Situationen (beispielsweise wenn Sie keine Dreamweaver-Site definiert haben) müssen Sie eine CSS-Präprozessor-Datei manuell kompilieren.

Deaktivieren Sie in solchen Fällen im Bedienfeld „CSS-Präprozessoren“ > „Allgemein“ des Dialogfelds „Site-Definition“ die Option „Datei beim Speichern automatisch kompilieren“.

Um eine manuelle Kompilierung mit einem CSS-Präprozessor durchzuführen, klicken Sie im Bedienfeld „Dateien“ mit der rechten Maustaste auf die Datei und klicken auf „Kompilieren“.

Manuelles Kompilieren von CSS-Präprozessor-Dateien über das Bedienfeld „Dateien“
Manuelles Kompilieren von CSS-Präprozessor-Dateien über das Bedienfeld „Dateien“

Sie können auch auf „Werkzeuge“ > „Kompilieren“ wählen, um die aktuelle Datei zu kompilieren.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie