Verwenden Sie Compass-Dateien.
Wenn Compass noch nicht installiert ist, können Sie es in Dreamweaver installieren.
Zuletzt aktualisiert am
1. Mai 2021
- Dreamweaver-Benutzerhandbuch
- Einführung
- Dreamweaver und Creative Cloud
- Arbeitsbereiche und Ansichten in Dreamweaver
- Sites einrichten
- Dreamweaver-Sites
- Lokale Version Ihrer Site einrichten
- Verbindung mit einem Publishing Server herstellen
- Testserver einrichten
- Site-Einstellungen importieren und exportieren
- Vorhandene Websites von einem Remote-Server in Ihren lokalen Site-Stammordner kopieren
- Barrierefreie Funktionen in Dreamweaver
- Erweiterte Einstellungen
- Site-Voreinstellungen für die Übertragung von Dateien festlegen
- Proxyserver-Einstellungen in Dreamweaver festlegen
- Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
- Git in Dreamweaver verwenden
- Dateien verwalten
- Dateien öffnen und erstellen
- Dateien und Ordner verwalten
- Dateien vom Server abrufen/auf dem Server bereitstellen
- Dateien einchecken und auschecken
- Dateien synchronisieren
- Dateien auf Unterschiede vergleichen
- Dateien und Ordner in Ihrer Dreamweaver-Site von Operationen ausschließen (Cloaking)
- Design Notes für Dreamweaver-Sites aktivieren
- Potenzielle Gatekeeper-Angriffe verhindern
- Layout und Entwurf
- CSS
- Grundlegendes zu Cascading Stylesheets
- Gestalten von Seitenlayouts mit CSS Designer
- CSS-Präprozessoren in Dreamweaver verwenden
- Voreinstellungen für CSS-Stile in Dreamweaver festlegen
- CSS-Regeln in Dreamweaver verschieben
- Inline-CSS in Dreamweaver in eine CSS-Regel umwandeln
- Mit div-Tags arbeiten
- Verläufe auf den Hintergrund anwenden
- CSS3-Übergangseffekte in Dreamweaver erstellen und bearbeiten
- Code formatieren
- Seiteninhalt und Elemente
- Seiteneigenschaften festlegen
- CSS-Eigenschaften von Überschriften und Links festlegen
- Mit Text arbeiten
- Text, Tags und Attribute suchen und ersetzen
- DOM-Bedienfeld
- In der Live-Ansicht bearbeiten
- In Dreamweaver die Kodierung von Dokumenten festlegen
- Elemente im Dokumentfenster auswählen und anzeigen
- Texteigenschaften im Eigenschafteninspektor festlegen
- Rechtschreibprüfung für Web-Seiten durchführen
- Horizontale Linien in Dreamweaver verwenden
- Schriftkombinationen in Dreamweaver hinzufügen und ändern
- Mit Elementen arbeiten
- Datumsangaben in Dreamweaver einfügen und aktualisieren
- In Dreamweaver Favoritenelemente erstellen und verwalten
- Bilder in Dreamweaver einfügen und bearbeiten
- Medienobjekte hinzufügen
- Videos in Dreamweaver einfügen
- HTML5-Videos einfügen
- SWF-Dateien einfügen
- Audioeffekte hinzufügen
- In Dreamweaver HTML5-Audiodateien einfügen
- Mit Bibliothekselementen arbeiten
- Arabischen und hebräischen Text in Dreamweaver verwenden
- Hyperlinks und Navigation
- jQuery-Widgets und -Effekte
- Websites programmieren
- In Dreamweaver programmieren
- Programmierumgebung in Dreamweaver
- Voreinstellungen für Code festlegen
- Codehervorhebung anpassen
- Code schreiben und bearbeiten
- Codehinweise und Codevervollständigung
- Code aus- und einblenden
- Code mit Codefragmenten wiederverwenden
- Code-Linting
- Code optimieren
- Code in der Entwurfsansicht bearbeiten
- Mit den Head-Inhalten von Seiten arbeiten
- Server-Side Includes in Dreamweaver einfügen
- Tag-Bibliotheken in Dreamweaver verwenden
- Benutzerdefinierte Tags in Dreamweaver importieren
- JavaScript-Verhalten (allgemeine Anweisungen)
- Integrierte JavaScript-Verhalten anwenden
- XML und XSLT
- Server-seitige XSL-Transformationen in Dreamweaver durchführen
- Client-seitige XSL-Transformationen in Dreamweaver durchführen
- Zeichenentitäten für XSLT in Dreamweaver einfügen
- Code formatieren
- Produktübergreifende Arbeitsabläufe
- Erweiterungen für Dreamweaver installieren und verwenden
- In-App-Updates in Dreamweaver
- Microsoft Office-Dokumente in Dreamweaver einfügen (nur Windows)
- Mit Fireworks und Dreamweaver arbeiten
- Mithilfe von Contribute Inhalte in Dreamweaver-Sites bearbeiten
- Dreamweaver-Business Catalyst-Integration
- Personalisierte E-Mail-Kampagnen erstellen
- Vorlagen
- Dreamweaver-Vorlagen
- Vorlagen und vorlagenbasierte Dokumente erkennen
- Dreamweaver-Vorlagen erstellen
- Bearbeitbare Bereiche in Vorlagen erstellen
- Wiederholende Bereiche und Tabellen in Dreamweaver erstellen
- Optionale Bereiche in Vorlagen verwenden
- Bearbeitbare Tag-Attribute in Dreamweaver definieren
- Verschachtelte Vorlagen in Dreamweaver erstellen
- Vorlagen bearbeiten, aktualisieren und löschen
- XML-Inhalte in Dreamweaver exportieren und importieren
- Vorlage auf ein vorhandenes Dokument anwenden oder aus dem Dokument entfernen
- Inhalte in Dreamweaver-Vorlagen bearbeiten
- Syntaxregeln für Vorlagen-Tags in Dreamweaver
- Markierungseinstellungen für Vorlagenbereiche festlegen
- Vorteile von Vorlagen in Dreamweaver
- Mobilgeräte und Multiscreen
- Dynamische Websites, Seiten und Web-Formulare
- Grundlegendes zu Web-Anwendungen
- Computer für die Entwicklung von Anwendungen einrichten
- Fehlerbehebung bei Datenbankverbindungen
- Verbindungsskripts in Dreamweaver entfernen
- Dynamische Seiten entwerfen
- Quellen für dynamischen Inhalt – Überblick
- Quellen für dynamische Inhalte definieren
- Dynamische Inhalte in Seiten einfügen
- Dynamischen Inhalt in Dreamweaver ändern
- Datenbankdatensätze anzeigen
- Live-Daten in Dreamweaver bereitstellen und Fehlerbehebung bei der Anzeige
- Benutzerdefinierte Serververhalten in Dreamweaver hinzufügen
- Formulare mit Dreamweaver erstellen
- Formulare zum Sammeln von Benutzerinformationen verwenden
- ColdFusion-Formulare in Dreamweaver erstellen und aktivieren
- Web-Formulare erstellen
- Verbesserte HTML5-Unterstützung für Formularelemente
- Formularentwicklung mit Dreamweaver
- Visuelles Entwickeln von Anwendungen
- Master- und Detailseiten in Dreamweaver erstellen
- Such- und Ergebnisseiten erstellen
- Datensatz-Einfügeseiten erstellen
- Datensatz-Aktualisierungsseiten in Dreamweaver erstellen
- Datensatz-Löschseiten in Dreamweaver erstellen
- ASP-Befehle zum Ändern von Datenbanken in Dreamweaver verwenden
- Registrierungsseiten erstellen
- Anmeldeseiten erstellen
- Seiten erstellen, auf die nur autorisierte Benutzer zugreifen können
- Ordner in ColdFusion mit Dreamweaver schützen
- ColdFusion-Komponenten in Dreamweaver verwenden
- Websites testen, in der Vorschau anzeigen und veröffentlichen
- Fehlerbehebung
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:
- Sie laden einen Compiler herunter und installieren diesen.
- Sie richten einen Grunt-Auftrag (Gruntfile.js) für den Compiler ein, um die Sass-/LESS-/SCSS-Datei einzulesen.
- 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:
- 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.
- 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.
- 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.
- 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.
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.
Im Dialogfeld Sites > Sites verwalten können Sie die folgenden 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
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.
-
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 -
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.
- Wählen Sie im Dialogfeld Site-Definition CSS-Präprozessoren > Compass.
- Aktivieren Sie das Kontrollkästchen Kompass verwenden.
- Klicken Sie auf Vorhandene Ruby-basierte Konfigurationsdatei angeben und navigieren Sie zum Speicherort 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.
- Wählen Sie im Dialogfeld Site-Definition CSS-Präprozessoren > Compass.
-
Konfigurationsoptionen manuell angeben
Wenn keine Konfigurationsoption festgelegt ist, können Sie die Konfigurationen manuell angeben.
- Wählen Sie im Dialogfeld Site-Definition CSS-Präprozessoren > Compass.
- Aktivieren Sie das Kontrollkästchen Kompass verwenden.
- 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.
- Wählen Sie im Dialogfeld Site-Definition CSS-Präprozessoren > Compass.
-
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.
-
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:
-
Wählen Sie im Dialogfeld Site-Definition CSS-Präprozessoren > Bourbon, Bourbon Neat oder Bourbon Bitters.
-
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.
-
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 -
Klicken Sie auf CSS-Präprozessoren > Quelle und Ausgabe.
-
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.
-
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.
Sie können auch auf Werkzeuge > Kompilieren klicken, um die aktuelle Datei zu kompilieren.
