Verwenden von CSS-Präprozessoren in Dreamweaver

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

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. Die Präprozessorsprache erweitert CSS in Richtung einer Programmiersprache.

Präprozessoren ermöglichen Ihnen die Verwendung von Variablen, Mix-ins, Funktionen und vieler anderer 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 und erweitern können.

Ein CSS-Präprozessor ermöglicht auch CSS, das besser strukturiert und leichter zu verwalten ist. Wenn Sie Websites erstellen, die auf mehrere CSS-Dateien verweisen, lassen sich mit CSS-Präprozessoren wie Sass oder Compass der manuelle Programmieraufwand und die Anzahl der Kopiervorgänge verringern.

Dreamweaver verwendet einen integrierten Ruby-Saas-Compiler, um SCSS- und LESS-Dateien zu kompilieren. Außerdem unterstützt Dreamweaver die Frameworks Compass und Bourbon zum Kompilieren 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. Wenn Sie die Dateien laden, bearbeiten oder speichern, werden sie von Dreamweaver automatisch mit der JavaScript-Bibliothek „less.js“ in CSS-Dateien kompiliert.

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

Im Folgenden erfahren Sie, wie Sie Dreamweaver mit CSS-Präprozessoren verwenden:

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 widergespiegelt, in denen diese kompilierte CSS-Datei verknüpft oder angefügt wurde.

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

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

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. Wenn bestimmte Mixins oder Funktionen aus dem ursprünglichen Authoring-Framework in späteren Versionen entfernt werden, können Sie immer noch auf die Präprozessordateien in Ihrer Site zurückgreifen.

  • Stellen Sie sicher, dass die automatische Kompilierung aktiviert ist. Klicken Sie dann auf Speichern, um die CSS-Dateien zu aktualisieren.
  • (Optional) Prüfen Sie, ob die Änderungen in der Live-Ansicht oder der Echtzeitvorschau für alle HTML-Seiten angezeigt werden, 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. Sie mussten diese Dateien jedoch selbst außerhalb von Dreamweaver kompilieren.
Ihr Arbeitsablauf würde Schritte wie die folgenden umfassen:

  1. Sie laden einen Compiler herunter und installieren diesen.
  2. Sie richten einen Grunt-Auftrag (Gruntfile.js) für den Compiler ein, um die Sass-/LESS-/SCSS-Datei einzulesen.
  3. Sie richten einen weiteren Grunt-Auftrag ein, um die Datei in CSS zu kompilieren und dann in Dreamweaver einzubinden.

Diese Schritte müssen jedes Mal ausgeführt werden, wenn Sie eine Änderung an der Sass-/LESS-/SCSS-Datei vornehmen.

Hinweis:

In diesem Video-Tutorial erfahren Sie, wie Sie CSS mit Präprozessoren optimieren.

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 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 ü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 Compass-Framework verwenden und Bourbon-Framework verwenden.
  4. Richten Sie die automatische Kompilierung ein oder kompilieren Sie die Sass- und LESS-Dateien manuell. Weitere Informationen finden Sie unter CSS-Präprozessor-Dateien kompilieren.

Voreinstellungen für CSS-Präprozessoren festlegen

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

Site-spezifische Voreinstellungen für CSS-Präprozessoren ermöglichen es Ihnen, für jede Site eigene CSS-Präprozessoren zu verwalten. So haben Sie die Kontrolle über die CSS-Präprozessoren jeder Site, ohne bei jedem Wechsel zu einer anderen Site die Voreinstellungen ändern zu müssen.

Hinweis:

Die Einstellungen in den Unterbereichen Allgemein und Quelle und Ausgabe gelten standardmäßig für das Ruby-Saas-Framework. 

Um die Voreinstellungen für Compass festzulegen, müssen Sie das Kontrollkästchen Kompass verwenden im Bereich Compass aktivieren. 

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.

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. Wenn diese Option nicht aktiviert wird, 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

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 nimmt dann an, dass einer der Werte keine Längeneinheit, sondern lediglich ein Wert sein soll.

Wenn „Strict Units“ aktiviert ist, geht Dreamweaver von einem Rechenfehler aus und meldet diesen.

URLs als relative URLs umschreiben

Mit dieser Option können URLs in der generierten CSS-Datei so umgeschrieben werden, dass die URLs immer relativ zur generierten Datei sind. 

Source Map generieren

Erstellt eine Quellzuordnung. Eine Quellzuordnung ist 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.

Hinweis:

Standardmäßig gelten die Optionen im Bereich Quelle und Ausgabe für Saas. Um diese Optionen für Compass zu aktivieren, müssen Sie das Kontrollkästchen Kompass verwenden im Bereich Compass aktivieren.

Nachdem Sie diese Einstellungen geändert und Compass installiert haben, werden alle Einstellungen in die Datei „config.rb“ migriert. Wenn Sie später eine dieser Einstellungen ändern möchten, bearbeiten Sie die Einstellungen in der Datei „config.rb“. Auch Änderungen im Dialogfeld Site-Einstellungen wirken sich nicht auf die Kompilierung aus.

Einstellungen „Quelle und Ausgabe“ für Compass festlegen
Einstellungen „Quelle und Ausgabe“ für Compass festlegen

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

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

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

Mithilfe dieser Option können Sie einen Teil des Pfads ersetzen, indem Sie in die Felder „Von“ und „Durch“ die entsprechende Zeichenfolgen eintragen. 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 die Kompilierung in Allgemeine Einstellungen aktiviert haben, wird der CSS-Präprozessor automatisch von Dreamweaver ausgelöst. Dreamweaver löst immer dann eine automatische Kompilierung aus, wenn eine Datei im Ordner extern oder innerhalb von Dreamweaver 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 Sie Stylesheets mithilfe von Compass erstellen, können Sie diese Stylesheets in Dreamweaver kompilieren und CSS-Dateien generieren.

  1. Verwenden Sie Compass-Dateien.

    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 dem Computer 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 das Kontrollkästchen Kompass verwenden.
    3. Klicken Sie auf Vorhandene Ruby-basierte Konfigurationsdatei angeben und navigieren Sie zum Speicherort der Datei. 
    4. 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 die Konfigurationen manuell angeben.

    1. Wählen Sie im Dialogfeld Site-Definition CSS-Präprozessoren > Compass.
    2. Aktivieren Sie das Kontrollkästchen 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. Das Verzeichnis ist relativ zum Projektpfad.

    Verzeichnis für generierte Bilder

    Das Verzeichnis, in dem generierte Bilder gespeichert sind. Dieses Verzeichnis ist relativ zu „project_path“ und der Standardwert ist der Wert von „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 an 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 im Browser.

    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 Externes CSS-Stylesheet verknüpfen.

Bourbon-Framework verwenden

Dreamweaver unterstützt die Bourbon-Produktfamilie. Wenn Sie 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 Dateien des Bourbon-Frameworks werden in Ihre Site kopiert. Bourbon ist das Framework, das verwendet wird, wenn die Kompilierung für Dateien ausgelöst wird, die das Framework importieren.

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.

CSS-Präprozessor-Dateien kompilieren

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 an 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. Klicken Sie auf CSS-Präprozessoren > Quelle und Ausgabe.

  3. Geben Sie die Speicherorte an, an denen 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 den 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 nachverfolgt werden sollen. 

    Wenn Sie an einer der Dateien in diesem nachverfolgten Ordner Änderungen vornehmen, werden die Dateien von Dreamweaver 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 angezeigt. Um die kompilierte CSS-Datei zu öffnen, doppelklicken Sie 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.

Hinweis:

Das Ausgabe-Bedienfeld ist am unteren Rand des Arbeitsbereichs angedockt. Falls das Bedienfeld geschlossen wurde, klicken Sie auf Fenster > Ausgabe.

Wenn der Status rot ist, können Sie dieses Statussymbol 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 Externes CSS-Stylesheet verknüpfen.

CSS-Präprozessor-Datei manuell kompilieren

In einigen Situationen (beispielsweise wenn Sie keine Dreamweaver-Site definiert haben) empfiehlt es sich, 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 klicken, um die aktuelle Datei zu kompilieren.

Adobe-Logo

Bei Ihrem Konto anmelden